Nu gaan we verschillende template bestanden invoegen dit klinkt moeilijk maar is makkelijk. Laten we onze eerste stap zetten door het hoodmenu te gaan koppelen. We volgende de volgende stappen.
1. Open main.tpl
2. Ga naar het html gedeelte waar het menu te vinden is. Het kan op de onderstaande code lijken
<div class=”menu”>
<ul>
<li class=”active”>
<a href=”/”>Home</a>
</li>
<li class=”active”>
<a href=”/over_ons.html”>Over ons</a>
</li>
</ul>
</div>
3. We vervangen de bovenstaande code met {menu=@menu.tpl} Laten we deze code even ontleden.
{ Geeft aan dat je begint met een template code
menu Geeft aan dat het gaat om het menu
=@ Geeft aan dat je 1 element terug verwacht in dit geval het menu
menu.tpl De naam van het bestand waar de data verder gespecificeerd is
} Geeft aan dat je eindigt met een template code
4. We slaan de main.tpl nu op en je code ziet er nu als volgt uit.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>{$title}</title>
<link href="/themes/{$_theme}/css/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div class="container">
{menu=@menu.tpl}
<div class=”content”>
<h1>Welkom</h1>
<p>
Hello World.
</p>
</div>
</div>
</div>
</body>
</html>
5. We maken nu het menu.tpl bestand aan. Deze plaatsen we in components/navigation
6. Hierin komt de niet herhaalbare html van het menu te staan
7. Waar de herhaalbare html komt te staan zetten we de volgende code neer {menu=list.tpl} Laten we deze code even ontleden.
{ Geeft aan dat je begint met een template code
menu Geeft aan dat het gaat om het menu
= Geeft aan dat je meerdere elementen terug verwacht
list.tpl De naam van het bestand waar de data verder gespecificeert is
} Geeft aan dat je eindigt met een template code
8. Als we dit hebben gedaan zou onze file er als volgt uit moeten zien.
<div class=”menu”>
<ul>
{menu=list.tpl}
</ul>
</div>
9. We slaan de menu.tpl nu op
10. We maken een nieuw bestand aan voor onze list items genaamd list.tpl. Deze plaatsen we in de map components/navigation/elements/menu
11. Hierin plaatsen we de html van 1 herhaalbaar element. Tevens kunnen we van de volgende tags gebruik maken.
- {$active} Hierin komt de tekst “active” te staan als het gaat om de actieve menu pagina.
- {$url} De link naar de pagina.
- {$title} De naam van de pagina.
12. Als we dit hebben gedaan dan zal onze file er als volgt moeten uitzien.
<li class=”{$active}”>
<a href=”{$url}”>{$title}</a>
</li>
13. Sla het bestandt list.tpl op.
14. Gefeliciteerd!!! Je hebt je menu nu met het cms gekoppelt