Thema: Mehrstufige Navigationen

Ein übliches Szenario in der Erstellung von Vorlagen ist die Erstellung und Anzeige von verschachtelten Navigationen.

Dieses Tutorial ist ebenfalls im Benutzerhandbuch enthalten (Kapitel 10, Anwendung, Verschachtelte Navigationen).

Vorbemerkung: Um eine verschachtelte Navigation zu erstellen/anzeigen zu lassen, werden ineinander verschachtelte Smarty-Schleifen benötigt ({foreach}{/foreach}). Damit unsere Vorlagen nicht unnötig kompliziert und groß werden, lagern wir den Code zur Navigationserstellung in zwei eigenen Vorlagentypen aus, die wir dann in jeder beliebigen Seitenvorlage inkludieren können, in der die Navigation angezeigt werden soll.

1. Gehen Sie in der Rubrik Vorlagen auf die Unterrubrik Vorlagentypen und klicken Sie auf Neu anlegen um einen neuen Eintrag anzulegen.

2. Legen Sie jeweils einen Vorlagentyp mit Namen custom_navigation_embed und custom_navigation_generator.

3. Wechseln Sie nun zur Unterrubrik Seitenvorlagen. Hier legen wir für unsere zwei neuen Vorlagentypen jeweils 1 Seitenvorlage an. Wir beginnen mit der Seitenvorlage für den Vorlagentyp custom_navigation_embed.

3.a Klicken Sie auf Neu anlegen um einen neue Seitenvorlage anzulegen.
3.b Wählen Sie im Feld Typ unseren neuen Vorlagentyp aus (hier: custom_navigation_embed).
3.c Vergeben Sie einen beliebigen Namen für die Seitenvorlage.
3.d Kopieren Sie folgenden Quelltext und fügen diesen im Feld Inhalt ein.

{select_named ns="Content" class="Page" method="selectPages" var="pages" navigation="1"}
{select_simple ns="Content" class="Page" method="selectPath" var="path" target=$page.id}

{include file="wcom:custom_navigation_generator.`$page.id`" pages=$pages level=1 parent=0}

Hinweis: Wir gehen im Tutorial davon aus, das eine Navigation mit der ID 1 existiert. Passen Sie den Parameter navigation ggf. an.

3.e  Selektieren Sie die Vorlagengruppen, die den inhaltlichen Seiten zugeordnet sind, in denen die Navigation später angezeigt werden soll.
3.f Speichern Sie die Seitenvorlage.

4. Legen Sie in analoger Art und Weise die Seitenvorlage für den Vorlagentyp custom_navigation_generator an.

4.a Wählen Sie im Feld Typ unseren zweiten, neuen Vorlagentyp custom_navigation_generator aus.
4.b Vergeben Sie wiederum einen beliebigen Namen für die Seitenvorlage.
4.c Kopieren Sie folgenden Quelltext und fügen diesen im Feld Inhalt ein.

<ul class="nav_{$level}">
{foreach from=$pages item=_page}
    {if $_page.level == $level && $_page.parent == $parent}
        {* find out if navigation item is in path *}
        {assign var="__in_path" value="false"}
        {foreach from=$path item=_path}
            {if $_page.id == $_path.id}
                {assign var="__in_path" value="true"}
            {/if}
        {/foreach}
            
        <li{if $page.id == $_page.id} class="on"{/if}>
            {if $page.id == $_page.id}
                <span>{$_page.name}</span>
                        {else}
                <a href="{get_url page_id=$_page.id action="Index"}">{$_page.name}</a>
            {/if}    
            {if ($_page.rgt - $_page.lft) > 1 && $__in_path == 'true'}
                {include file="wcom:custom_navigation_generator.`$page.id`" pages=$pages
                    level=$_page.level|increment parent=$_page.id}
            {/if}
        </li>
    {/if}
{/foreach}
</ul>

Anmerkung: Der Ausgabe-Quelltext wird bei einer zweistufigen Navigation beispielhaft wie folgt aussehen:

<ul class="nav_1">
    <li><a href="datei.suffix">Seite</a></li>
    <li><a href="datei.suffix">Seite</a></li>
    <li class="on"><span>Aktive Seite</span>
        <ul class="nav_2">
            <li><a href="datei.suffix">Seite</a></li>
            <li><a href="datei.suffix">Seite</a></li>
        </ul>            
    </li>
    <li><a href="datei.suffix">Seite</a></li>
</ul>

4.d  Selektieren Sie die Vorlagengruppen, die den inhaltlichen Seiten zugeordnet sind, in denen die Navigation später angezeigt werden soll.
4.e Speichern Sie die Seitenvorlage.

5. Nun sind wir fast fertig. Was fehlt ist die Einbindung der Navigation in die Seitenvorlagen, in denen wir die Navigation einbinden wollen.

5.a Wählen Sie die gewünschte Seitenvorlage aus, in der die Navigation eingefügt werden soll und gehen über das Bearbeiten-Symbol zur inhaltlichen Ansicht.
5.b Fügen Sie an der Stelle, an der die Navigation plaziert werden soll, folgenden Quelltext ein:

{include file="wcom:custom_navigation_embed.`$page.id`"}

5.c Speichern Sie die Seitenvorlage.

Damit sind alle Schritte abgeschlossen.