9 - Navigation

Unsere Website braucht eine Navigation. Sie wird wie üblich mit einer Liste aufgebaut. Du hast freie Hand was CSS und Gestaltung anbelangt. Einzig die Navigationsbezeichnung und den Hyperlink werden wir dynamisch mit PHP in den HTML-Code einsetzen.

Navigation - Navigationsbezeichnung und Link

Dazu stehen dir folgende PHP-Platzhalter zur Verfügung:
$MenuTitle stellt die im Backend eingegebene Navigationsbezeichnung dar,
$Link bringt die als Ziel anvisierte URL in den HTML-Code
Um die bestehendne CSS-Stile zu nutzen, ist die Liste mit einer ID versehen.

...
<header><h1>Silverstripe - Tutorial - $Title</h1>
    <nav>
        <ul>
                <li>
                    <a href="$Link">$MenuTitle.XML</a>
                </li>
        </ul>
    </nav>
</header>
...
</section>
... 

1. Füge den HTML-Code für die Liste in dein Templatebereich <section> ein
2. Speichere die Seite und teste sie im Browser

Nun siehst du den Navigationspunkt der Startseite, nicht aber die anderen Navigationspunkte..

So weit so gut! Aber du möchtest ja nicht nur den Menüpunkt der jeweiligen Seite anzeigen, sondern eine Anzeige der gesamten Menüstruktur. Es braucht also eine umfassendere Abfrage und ein Durchlaufen sämtlicher Navigationsbezeichnungen und Hyperlinks deiner Website.

Alle Navigationspunkte «kontrollieren»

Silverstripe bietet dazu ein «loop-Tag» an, es wird direkt in den HTML-Code geschrieben. Das CMS führt so eine Abfrage der Navigationspunkte durch, es ensteht ein Array. Ein 'loop' wird wie folgt geschrieben: 

   <% loop Menu(1) %>
      ...
   <% end_loop %>

Du musst also den HTML-Code deiner Liste ergänzen:
$Menu(1) ruft die oberste Navigationsebene auf. Wir werden später auf Untermenüs eingehen.

    <nav>
        <ul>
            <% loop $Menu(1) %>
                <li><a href="$Link">$MenuTitle.XML</a></li>
            <% end_loop %>
        </ul>
    </nav>

3. Ergänze deinen HTML-Code mit dem 'loop'
4. Speichere, publiziere und teste die Seite im Browser

 

Jetzt werden alle Navigationspunkte angezeigt, die im Backend definiert sind.

Hervorhebung (Highlighting) der aktiven Menüpunkte

Eine Hervorhebung (Highlighting) der aktiven Menüpunkte erreichst du mit dem PHP-Platzhalter $LinkingMode.
Der Platzhalter gibt je nach Aktivität des Menüpunktes folgendes zurück:
current, wenn die Seite aktiv, also der Menüpunkt angewählt ist
link, für alle nicht aktiven Menupunkte
section, für alle Untermenüs des gewählten Menüpunktes

Es sind verschiedene Einsatzmöglichkeiten von $LinkingMode denkbar. Da wir die bestehenden CSS-Definitionen verwenden wollen, übergeben wir dem einzelnen Listenelement <li> den jeweiligen Aktivitätsmodus.

Um die bestehenden CSS-Stile auf die Navigation anzuwenden muss die Top-Navigation mit der dafür verwendeten Klasse class="primary" versehen werden.

...
    <nav  class="primary">
        <ul>
            <% loop $Menu(1) %>
                <li class="$LinkingMode">
                    <a href="$Link">$MenuTitle.XML</a>
                </li>
            <% end_loop %>
        </ul>
    </nav>
...

5. Ergänze das Listenelemnt <li> mit class="$LinkingMode"
6. Ergänze das HTML-Element <nav> mit  class="primary"
7. Speichere, publiziere und teste die Seite im Browser

Wenn du deine eben erstellte Startseite im Browser betrachtest, sollte sie etwa so aussehen. Wähle andere Menüpunkte und untersuche das Highlighting deiner Navigation. 

Weiter, zusätzliche Seiten im Backend erstellen