Templatebeispiel: Hierarchische Navigation

Content Management that rocks » Template Engine » Navigation

Das on-page basiert auf einer hierarchischen Navigationsstruktur. In der Seitenstruktur können einfach neue Seiten oder Inhalte auf Seiten hinzugefügt werden. Diese Inhalte können einfache Textinhalte, Bildergallerien, Videos oder auch ganze Blogbeiträge sein.

Möchte man nun die Navigation im Frontend abbilden, kann man das ganz einfach im Template tun.  

Wenn die Navigation etwa so aussehen soll:

<div id="nav">
  <ul>
   <li>
    <a href="/link1" title="Title">
     <span>Highlights1</span> |
    </a>
   </li>
   <li>
    <a href="/link2" title="Title">
     <span>Highlights2</span> |
    </a>
   </li>
   <li class="active">
    <a href="/link3" title="Title">
     <span>Highlights3</span>
    </a>
    <ul>
     <li>
      <a href="/link3-1" title="Title">
       <span>Template Engine1</span>
      </a>
     </li>
     <li class="active">
      <a href="/link3-2" title="Title">
       <span>Template Engine2</span>
      </a>
     </li>
     <li>
      <a href="/link3-3" title="Title">
       <span>Template Engine3</span>
      </a>
     </li>
    </ul>
   </li>
  </ul>
</div>

Dann sieht der entsprechende Template Code so aus

<div id="nav">
  <ul>
   <!-- BEGIN nav1 -->
   <li<!-- IF this.ACTIVE --> class="active"<!-- ENDIF -->>
    <a href="{this.LINK}" title="<!-- TITLE {this.H1} -->">
     <span>{this.H1}</span> <!-- IF ! this.IS_LAST --> | <!-- ENDIF -->
    </a>
   <!-- IF nav2 -->
    <ul>
    <!-- BEGIN nav2 -->
     <li<!-- IF this.ACTIVE --> class="active"<!-- ENDIF -->>
     <a href="{this.LINK}" title="<!-- TITLE {this.H1} -->">
      <span>{this.H1}</span>
     </a>
    </li>
    <!-- END nav2 -->
    </ul>
   <!-- ENDIF -->
   </li>
  <!-- END nav1 -->
 </ul>
</div>

Erklärung der on-page Variablen, Abfragen und Schleifen:

<!-- BEGIN nav1 --> leitet eine Schleife im Template ein und wiederholt sich so lange bis alle Navigationspunkte abgearbeitet sind, dabei wiederholen sich alle Ausgaben bis <!-- END nav1 -->

Wenn die Seite Unterseiten hat wird innerhalb von nav1 eine neue Schleife nav2 geöffnet und abgearbeitet.

Innerhalb dieser Schleifen kann man dan mit {nav1.XXX} ,  {this.XXX} oder sogar {parent.XXX} auf die Templatevariablen zugreifen. {this} bezieht sich dabei immer auf die Variable in der aktuellen Schleife und {parent} auf die aktuelle übergeordnete Schleife.

• {this.H1} ist die Ausgabe der 1. Überschrift der Seite (die 1.Überschrift hat nichts mit <h1> zu tun, das System ist hier völlig flexibel.)
• {this.H2} ist die 2. Überschrift
• {this.LINK} ist die Url zur Seite
• {this.ID} ist die ID zur Seite
• {this.ACTIVE} gibt an ob die Seite im Klickpfad ist

Zusätzlich sind noch viele weitere Variablen verfügbar, wie: {this.IS_ODD}, {this.IS_FIRST}, {this.IS_LAST}
Weitere Variablen können per Modul hinzugefügt werden.

Mochte man Überprüfen ob die Variable existiert, kann man <!-- IF this.VARIABLENNAMEN --> verwenden.
Mit <!-- IF ! this.IS_LAST --> | <!-- ENDIF --> wird im o.g. Beispiel eine Trennlinie zwischen die Menüpunkte geschrieben.