11 - Unternavigation

Im Seitenbaum des Silverstripe-Backends kannst du die Seiten organisieren. Eine neue Seite wird immer unterhalb der gewählten Seite erstellt. Ist das Häckchen 'Erlaube Neuordnen per Drag & Drop' aktiviert, kannst du die Seiten an ihre gewünschte Position ziehen. Jede Veränderung musst du mit 'Speichern und Veröffentlichen' abschliessen.

Eine Unterseite erstellen

1. Erstelle eine neue Seite unter der 'Startseite'
     - Du kannst die darüberliegede Seite (Parent) wählen und dann 'Hinzufügen' klicken
     - Du kannst die Position der neuen Seite im Dialogfeld 'Seite erstellen' wählen
     - Du kannst jede Seite im Seitenbaum mit 'Drag&Drop' platzieren
2. Schreibe Seitenname, URL-segment, Navigationsbezeichnung und etwas Inhalt
3. Mit 'Speichern und Veröffentlichen' schliesst du den Vorgang ab.

Wenn du jetzt deine Site im Browser betrachtest, wird keine Navigation zur Unterseite dargestellt. Dazu muss erst das Template um eine Unternavigation erweitert werden.

Du könnest jetzt genau gleich vorgehen wie beim Bau der Topnavigation (9 Navigation). Einziger Unterschied wäre, du wählst einen Loop durch die untere Seitenebene - $Menu(2) -, etwa folgendermassen:

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

Silverstripe bietet auch die Möglichkeit, bestehende Code-Blöcke in modularer Weise zu nutzen.

Das Template mit 'include' erweitern

Im Ordner themes/tutorial/templates/Includes findest du Teile des Templates 'simple'. Hier liegen Code-Teile für Header, Footer, Krümelnavigation oder Seiten-Navigation zur Verwendung bereit. Die Code-Schnipsel für die Unternavigation im Theme 'simpel' befinden sich in der Datei: SideBar.ss. Wird die Datei mit 'include' in dein Template geladen, hast du die Unternavigation aus 'simple' in dein Template eingefügt.

...
<section>
    <% include SideBar %>
    <div class="inner typography line">
        $Content
        $Form
    </div>
</section>
...

Baue die Unternavigation in die Datei 'Page.ss' ein.

1. Füge den include- Code in die Datei Page.ss
2. Speichere und publiziere die Datei
3. Untersuche das Ergebnis im Browser

Die Unternavigation wird nun angezeigt.

Wenn du den Quellcode der Datei: SideBar.ss im Editor untersuchst, wirst du feststellen, das darin nochmals ein 'include' auf die Datei: SidebarMenu.ss verwendet wird. Die zweifache Verschachtelung geht noch einen Schritt weiter.

In dieser Datei wird noch ein weiteres 'include' verwendet und zwar innerhalb eines weiteren <ul>-Element ruft sich der Code-Block nochmals selber auf. Das führt dazu, dass die Listen-Navigation beliebig oft ineinander verschachtelt werden kann. Das heisst, das beliebig tiefe Navigationsstrukturen erstellt werden können. Wie tief die Verschachtelung reichen soll, ist eine Frage deines Webprojekts und der entsprechenden Gestaltung mit CSS.

Weiter, um eine Krümelnavigation zu erstellen