Since we have more and more actions now and like everybody else we are lazy, we add a navigation now to our layout HTML file. Then we don’t have to enter the URL for each action anymore, we can just click the correct link.
Create the partial
First we have to create the partial that we include in our layout later.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<section id="navigation"> <ul id="trans-nav"> <li> <f:link.action action="index" controller="Event">Home</f:link.action> </li> <li> <a href="#">Events</a> <ul> <li> <f:link.action action="list" controller="Event">List</f:link.action> </li> <li> <f:link.action action="add" controller="Event">Add</f:link.action> </li> </ul> </a> </li> <li> <a href="#">Locations</a> <ul> <li> <f:link.action action="index" controller="Location">List</f:link.action> </li> <li> <f:link.action action="new" controller="Location">Add</f:link.action> </li> </ul> </li> </ul> </section> <br class="clear"/> |
Include it in your layout
After we created the partial we just have to include it in our layout so that the navigation is available on all pages.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE HTML> <html> <head> <title>TYPO3 Flow - Tutorial</title> <f:base/> <link rel="stylesheet" href="{f:uri.resource(path: 'Css/style.css')}" type="text/css" media="all" /> <link rel="stylesheet" href="{f:uri.resource(path: 'Css/navigation.css')}" type="text/css" media="all" /> <link rel="stylesheet" href="{f:uri.resource(path: 'Css/messy-list.css')}" type="text/css" media="all" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script> <script type="text/javascript" src="{f:uri.resource(path: 'Js/jquery.ui.core.js')}"></script> <script type="text/javascript" src="{f:uri.resource(path: 'Js/jquery.ui.datepicker.js')}"></script> <script type="text/javascript" src="{f:uri.resource(path: 'Js/Scripts.js')}"></script> </head> <body> <section class="content"> <f:render partial="Navigation" /> <f:render section="content"/> </section> </body> </html> |
Now you should see the navigation in each of your actions.
It looks ugly
Additional in this step I added some CSS and JS to make it look better. JS is used later when we want to work with jQuery and Ajax.
If the Css and Js files are not loaded, check your permissions and make sure that:
Options Indexes FollowSymLinks
is set in your apache config.
Your homepage now should look like:
