Zum Inhalt

Beispiel: Breadcrumb

Beispiel "Breadcrumb"

Im Folgenden zeigen wir Ihnen ein Beispiel für die Konfiguration/Erzeugung einer Horizontal-Navigation mit dem Namen breadcrumb.

Die folgende Konfiguration wird für jede einzelne Seite, durchgeführt; nur im Falle der aktuell geöffneten Seite, d.h. "active", wird eine andere CSS-Klasse gewählt, um die tatsächlich geöffnete Ebene farblich hervorzuheben.

Folgender Rubrikenbaum liegt zugrunde: 

-Wurzelknoten (0)
    -Stadtthemen (1)    
        -Aktelles (2)
            -News (3)
            -Veranstaltungen (3)
        -Bildung (2)
            -Schulen (3)
            -Kinderbetreuung (3)
    -Buergerservice (1)
    -Tourismus (1)


0. Darstellung im HTML-Code

Im HTML-Code wird die Navigation folgendermaßen dargestellt.

Für das Beispiel wird in der Navigation die Ebene 2 "Bildung" gewählt:

Die Angabe der Ebene wurde zur besseren Veranschaulichung hier hinzugefügt und bezieht sich auf den Rubrikenbaum und die Beschreibung im nächsten Schritt.

     <ul class="level_1 clearfix">                          "Ebene 1 ul"
       <li>

         <a href="/index.html.de">Stadtthemen</a>           "Ebene 1 li"
        <ul class="level_2">                                "Ebene 2 ul"
       <li>
         <a href="/aktuelles/index.html.de">
             <span class="nav_label">Aktuelles</span>       "Ebene 2 li"
     </a>
             <ul class="level_3">                           "Ebene 3 ul"
         <li>

     <a href="/aktuelles/news/index.html.de">               "Ebene 3 li"
            <span class="nav_description">News</span>
    </a>

</li> 
<li>

     <a href="/aktuelles/veranstaltungen/index.html.de">    "Ebene 3 li"
        <span class="nav_description">Veranstaltungen</span>
    </a>

    </li>
    </ul>
    </li>
    <li class="active">                                     "Ebene 2
    <a href="/schauen/bildung/index.html.de">                aktuell
        <span class="nav_label">Bildung</span>               gewählt"
    </a>
    </li>

</ul>
</li>
</ul>

Beschreibung der Darstellung im HTML-Code bezogen auf die Konfigurationsdatei (siehe unten):

  • Auf jedes ul-Snippet folgt ein li-Snippet.
  • Die "ul-Zeile" im li-Snippet (siehe unten Konfigurationsdatei) sorgt dafür, dass die Rekursion von neuem startet, bis das content_maxlevel erreicht ist.
  • Aufgrund der Angabe des content_startlevel bzw. content_maxlevel in der Konfigurationsdatei erkennt diese, ab bzw. bis zu welcher Rubrik die Navigation erstellt werden soll.
  • Anhand des Rubrikenknoten im Rubrikenbaum erkennt die Konfigurationsdatei, welches Level zutrifft und gibt diese entsprechend im HTML-Code aus.
  • Die Klasse "active" wird angewendet, wenn die Ebene aktuell gewählt ist, i.d.F. "Bildung", sodass sie farblich hervorgehoben wird.


1. Umsetzung in der Konfigurationsdatei

In der Konfigurationsdatei (z.B. navigation_generator.conf) wird die Navigation durch die "Verschachtelung" von <!--XX-li_content--> und <!--XX-ul_content--> umgesetzt.

Die nummiererten Zeilen veranschaulichen die Schritte der Rekursion, die für den Aufbau der Navigation zuständig ist, und werden unten beschrieben.

 Schritte
[        ]  <breadcrumb>
[        ]       file_startlevel = "0"
[        ]       file_maxlevel = "10"
[        ]       content_startlevel = "1"
[        ]       content_maxlevel = "3"
[        ]       fulltree = 1
[        ]
[        ]        li_snippet <<EOF
[        ]         #IF (("<!--XX-current-->" EQ "1") OR ("<!--XX-nodeid-->" EQ "<!--XX-current_nodeid-->")
[  14    ]           <li class="active">
[        ]        #ELSE
[2,5,8,11]     <li>
[        ]        #ENDIF 
[        ]
[        ]            #IF ("<!--XX-level-->" EQ "1")
[   3    ]               <a href="<!--XX-link-->"><!--XX-name--></a>
[        ]            #ELSIF ("<!--XX-level-->" EQ "2")
[  6,15  ]               <a href="<!--XX-link-->"><span class="nav_label"><!--XX-name--></span></a>
[        ]
[        ]            #ELSE 
[  9,12  ]             <a href="<!--XX-link-->"><span class="nav_description"><!--XX-name--></span></a>
[        ]            #ENDIF
[ul-Zeile]               <!--XX-ul_content-->
[        ]           </li>
[        ]       EOF
[        ]        ul_snippet <<EOF
[        ]        #IF ("<!--XX-level-->" EQ "0")
[   1    ]           <ul class="level_1 clearfix">
[        ]        #ELSIF ("<!--XX-level-->" EQ "1")
[  4,13  ]           <ul class="level_2">
[        ]        #ELSE
[  7,10  ]           <ul class="level_3">
[        ]        #ENDIF 
[        ]              <!--XX-li_content-->
[        ]           </ul> 
[        ]       EOF
[        ]    </breadcrumb>

Beschreibung der Schritte der Rekursion:

  1. Die Rekursion startet mit dem ul-Snippet in Level 1.
  2. Sie springt dann zum li-Content hoch.
  3. Die Navigation gibt das erste Level als href aus, d.h. link mit name — Navigationsebene "Stadtthemen".
  4. Erneut beginnt es mit dem ul-Snippet, diesmal in Level 2.
    Wie bereits erwähnt, sorgt die "ul-Zeile" im li-Snippet dafür, dass die Rekursion von neuem startet, bis das content_maxlevel erreicht ist.
  5. Sie springt zum li-Content hoch.
  6. Das Level 2 trifft zu, sodass der zweite Link als nav_label ausgegeben wird — Navigationsebene "Aktuelles".
  7. Das neue ul-Snippet beginnt, diesmal in Level 3.
  8. Sie springt dann zum li-Content hoch.
  9. In Level 3 wird der Link als nav_description ausgegeben — Navigationsebene "News".
  10. bis 12. Schritt: Navigationsebene "Veranstaltungen" liegt auf derselben Ebene wie "News", sodass hier erneut ein Link als nav_description ausgegeben wird.

13.bis 14. Schritt: Da in der Navigation die Ebene 2 "Bildung" gewählt ist, trifft hier zusätzlich class="active" zu.


2. SSI in Codeincludes einbinden

Die Navigationsdateien (SSI) sind für jede Seite hinterlegt; dies erfolgt in der Regel über die Codeincludes. Auch können dabei verschiedene Navigationen gleichzeitig angegeben werden z.B. für mobile und Desktop-Versionen.

SSI in Codeincludes

Gehen Sie wie folgt vor:

  1. Legen Sie einen neuen Codeinclude, z.B. navigation.htms an.

  2. Tragen Sie in diesem Codeinclude den Code-Schnipsel ein, z.B.:

    <!--#include virtual="/ssi/navigation<!--SECTION:DIRECTORY-->/breadcrumb.<!--SECTION:__CAT_ID-->.<!--XX-lingua-->.ssi" -->

    • DIRECTORY: zeigt das entsprechende Verzeichnis.
    • "breadcrumb": ist der Name der Navigation aus der Konfigurationsdatei.
    • CAT_ID: Rubrik, ab der begonnen wird.
    • XX-lingua: beschreibt die Sprache, z.B. de.

3. SSI generieren (Menüeintrag erzeugen)

Anschließend wird die Navigation generiert. Dafür kann ein Controller in der imperia-Oberfläche folgendermaßen gesetzt werden:

  1. Öffnen Sie Menü -> System -> Menüs konfigurieren.
  2. Erstellen Sie einen neuen Menüeintrag (für nähere Informationen, siehe Kapitel Menükonfiguration):
    SSI in Codeincludes
  3. Wählen Sie dort den entprechenden Controller /navigation aus.

  4. Tragen Sie die Controller-Parameter ein (wie bei jedem Menüeintrag durch die Angabe der Rubriken-ID und der Konfigurationsdatei), z.B.:

    ?rootNodeId=/28&conf=/config/navigation_generator.conf .

  5. Speichern Sie Ihre Einstellungen.

Die Navigation kann dann über einen Klick auf den Menüeintrag generiert werden.

Andere Navigationen

Andere Navigationen können mit den folgenden Konfigurationsdateien umgesetzt werden.

Wie bereits erwähnt, ist es möglich neben dem allgemeinen Block <common> mehrere Navigationen in einer Konfigurationsdatei zu hinterlegen.

Die folgenden Codes sind zur besseren Lesbarkeit umgebrochen.

Eine Breadcrumb-Navigation kann bspw. mit dem folgenden Code bewerkstelligt werden:

<breadcrumb>
      file_startlevel = "0"
      file_maxlevel = "10"
      content_startlevel = "1"
      content_maxlevel = "10"
      filename = /ssi/breadcrumb<!--directory-->/<!--nav_element-->.<!--cat_id-->.<!--lingua-->.ssi

      li_snippet <<EOF
          #IF (("<!--XX-current-->" EQ "1") OR ("<!--XX-has_children-->" EQ "1"))
                / <a href="<!--XX-link-->" title="<!--XX-description-->"><!--XX-name--></a>
                <!--XX-ul_content-->
          #ENDIF    
      EOF

      ul_snippet <<EOF
          <!--XX-li_content-->
      EOF

</breadcrumb>

Darstellung im HTML-Code:

/ <a href="/index.html.de" title="">Stadtthemen</a>
    / <a href="/aktuelles/index.html.de" title="">Aktuelles</a>
         / <a href="/aktuelles/news/index.html.de" title="News, Verkehrsinfo, Bekanntmachungen">News</a>

Auch hier findet wieder die Rekursion statt:

  • ul_snippet bezieht sich auf das li_content.

  • Hat das li-Element einen Link, Titel und Namen, so wird dieses im HTML-Code ausgegeben.

    • Das erste Element besitzt einen Link und den Namen "Aktuelles", aber keinen Titel (description).
    • Das zweite Element besitzt einen Link, den Titel/Beschreibung sowie den Namen "News".

Anderes Code-Beispiel für eine Breadcrumb-Navigation:

    <breadcrumb>
    file_startlevel = "0"
    file_maxlevel = "10"
    content_startlevel = "0"
    content_maxlevel = "10"
    fulltree = "1"

    li_snippet <<EOF

            #IF ("<!--XX-current-->")
                #IF ("<!--XX-level-->" EQ "4")
                #ELSE
                    <li><a href="/<!--XX-project_lang--><!--XX-directory-->" title="<!--XX-description-->" class="active"><!--XX-name--></a></li>
                #ENDIF
            #ELSIF ("<!--XX-current_nodeid-->" REQ "<!--XX-nodeid-->")
                <li><a href="/<!--XX-project_lang--><!--XX-directory-->" title="<!--XX-description-->"><!--XX-name--></a></li>
                #IF ("<!--XX-has_children-->")
                        <span class="hasChildren">/</span>
                #ENDIF
            #ENDIF

        <!--XX-ul_content-->

    EOF

    ul_snippet <<EOF
        <!--XX-li_content-->
    EOF
    </breadcrumb>

Einfache Navigationen

Einfache Horizontal- oder Vertikal-Navigationen können bspw. mit folgenden Codes bewerkstelligt werden (aus navigation_generator.conf.sample):

Horizontal

<hnav>
    file_startlevel = "0"
    file_maxlevel = "0"
    content_maxlevel = "1"

    li_snippet <<EOF
        <li class="hnav">
            <a href="<!--XX-link-->" title="<!--XX-description-->" target="<!--XX-linktarget-->"><!--XX-name--></a>
            <!--XX-ul_content-->
        </li>
    EOF

    ul_snippet <<EOF
        <ul class="hnav">
           <!--XX-li_content-->
        </ul>
    EOF

</hnav>

Vertikal

<vnav>
    file_startlevel = "0" 
    file_maxlevel = "02"

    content_maxlevel = "03"

    li_snippet <<EOF
        <li class="vnav">
            <a href="<!--XX-link-->" title="<!--XX-description-->" 
        target="<!--XX-linktarget-->"><!--XX-name--></a>
            <!--XX-ul_content-->
        </li>
    EOF

    ul_snippet <<EOF
        <ul class="vnav">
           <!--XX-li_content-->
        </ul>
    EOF

    </vnav>

Sub-Navigation 

    <subnav>
    file_startlevel = "0"
    file_maxlevel = "10"
    content_startlevel = "3"
    content_maxlevel = "3"
    fulltree = 0

    li_snippet <<EOF
     #IF (("<!--XX-current-->" EQ "1") OR ("<!--XX-nodeid-->" EQ "<!--XX-current_nodeid-->")
        <li class="active">
     #ELSE
        <li>
     #ENDIF
            <a href="<!--XX-link-->" class="btn btn-lg btn-primary btn-block">
                <span><!--XX-name--></span>
            </a>
            <!--XX-ul_content-->
        </li>
    EOF

    ul_snippet <<EOF
        #IF ("<!--XX-level-->" EQ "2")
        <ul class="subnav_list">
        #ENDIF
           <!--XX-li_content-->
        #IF ("<!--XX-level-->" EQ "2")
        </ul>
        #ENDIF
    EOF

    </subnav>

Horizontal-Navigationen mit Drop-Down können bspw. mit folgenden Codes bewerkstelligt werden (aus navigation_generator.conf.sample):

Horizontal mit Drop-Down

<navigationmenu>
    file_startlevel = "0"
    file_maxlevel = "3"
    content_startlevel ="1"
    content_maxlevel = "2"
        fulltree = "1"

    ul_snippet <<EOF
    #IF ("<!--XX-level-->" EQ "0")
            <ul class="nav navbar-nav uppercase topnavigation">
            <!--XX-li_content-->
        </ul>
    #ELSIF ("<!--XX-level-->" EQ "1")
    <a href="#" class="dropdown-toggle customCollapseCaret" data-toggle="dropdown" role="button" >
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
        <!--XX-li_content-->
    </ul>
    #ELSIF ("<!--XX-level-->" EQ "2")
    <ul class="dropdown-menu" role="menu">
        <!--XX-li_content-->
    </ul>
    #ENDIF
    EOF


    li_snippet <<EOF
    #IF ("<!--XX-level-->" EQ "1")
    <li class="dropdown"> 
        <a href="/<!--XX-project_lang--><!--XX-directory-->"
        title="<!--XX-description-->" target="<!--XX-linktarget-->"><!--XX-name--></a>
<!--XX-ul_content-->
    </li>
    #ELSIF ("<!--XX-level-->" EQ "2")
        <li class="dropdown"> 
        <a href="/<!--XX-project_lang--><!--XX-directory-->"
        title="<!--XX-description-->" target="<!--XX-linktarget-->"><!--XX-name--></a>
        </li>
    #ENDIF
    EOF



    </navigationmenu>

Mobile Navigation mit Drop-Down

   <mobile_nav>
    file_startlevel = "0"
    file_maxlevel = "10"
    content_startlevel = "1"
    content_maxlevel = "10"
    # include all category entries
    fulltree = 1

    li_snippet <<EOF
    #IF (("<!--XX-level-->" EQ "1") AND ("<!--XX-has_children-->" EQ "1"))
        #IF ("<!--XX-current-->" EQ "1")
        <li class="dropdown open">
        #ELSE
        <li class="dropdown">
        #ENDIF
        <a href="<!--XX-link-->" class="dropdown-toggle" data-toggle="dropdown" title="<!--XX-description-->"><!--XX-name--> <b class="caret"></b></a>
     #ELSE
        #IF ("<!--XX-current-->" EQ "1")
        <li class="active">
        #ELSE
        <li>
        #ENDIF
        <a href="<!--XX-link-->" title="<!--XX-description-->"><!--XX-name--></a>
     #ENDIF
            <!--XX-ul_content-->
        </li>
    EOF

    ul_snippet <<EOF
     #IF ("<!--XX-level-->" EQ "0")
        <ul class="nav nav_mobile">
     #ELSE
        <ul class="dropdown-menu">
     #ENDIF
           <!--XX-li_content-->
        </ul> 
    EOF

    </mobile_nav>

Sitemaps

Ein Sitemap kann bspw. mit den folgenden Codes bewerkstelligt werden (aus navigation_generator.conf.sample):

Beispiel 1:

<sitemap>
    file_startlevel = "0"
    file_maxlevel = "0"

    content_maxlevel = "1"

    # include all category entries
    fulltree = 1

    li_snippet <<EOF
        <li class="hnav">
            <a href="<!--XX-link-->" title="<!--XX-description-->" 
        target="<!--XX-linktarget-->"><!--XX-name--></a>
            <!--XX-ul_content-->
        </li>
    EOF

    ul_snippet <<EOF
        <ul class="hnav">
           <!--XX-li_content-->
        </ul>
    EOF

    </sitemap>

Beispiel 2 (Tabellenform):

<sitemap>
    file_startlevel = "0"
    file_maxlevel = "0"

    content_maxlevel = "0"
    content_maxlevel = "10"

    # include all category entries
    fulltree = 1

    li_snippet <<EOF
        <hr />
        <table border="0" style="border:thin solid silver" >
        <tr><td width="200px">name            </td><td width="350px"><!--XX-name--></td></tr>
        <tr><td>description     </td><td><!--XX-description--></td></tr>

        <tr><td>cat-directory   </td><td><!--XX-directory--></td></tr>
        <tr><td>cat-filename    </td><td><!--XX-filename--></td></tr>

        <tr><td>link            </td><td><!--XX-link--></td></tr>
        <tr><td>linktarget      </td><td><!--XX-linktarget--></td></tr>

        <tr><td>current         </td><td><!--XX-current--></td></tr>
        <tr><td>has_children    </td><td><!--XX-has_children--></td></tr>
        <tr><td>active          </td><td><!--XX-active--></td></tr>

        <tr><td>cat_skip        </td><td><!--XX-cat_skip--></td></tr>
        <tr><td>doc_count       </td><td><!--XX-doc_count--></td></tr>

        <tr><td>level           </td><td><!--XX-level--></td></tr>
        <tr><td>levelindex      </td><td><!--XX-levelindex--></td></tr>

        <tr><td>catid           </td><td><!--XX-catid--></td></tr>
        <tr><td>nodeid          </td><td><!--XX-nodeid--></td></tr>
        <tr><td>current_nodeid  </td><td><!--XX-current_nodeid--></td></tr>

        </table>
        <!--XX-ul_content-->
    EOF

    ul_snippet <<EOF
        <!--XX-li_content-->
    EOF
</sitemap>


<fnav>
        file_startlevel = "0"
        file_maxlevel = "0"
        content_startlevel = "1"
        content_maxlevel = "2"
        fulltree = "1"

        li_snippet <<EOF
        #IF NOT ("<!--XX-description-->" REQ "PAGEFOOTER")
                #IF ("<!--XX-level-->" EQ "1")
                <div class="subLinkBox">
                    <h2><!--XX-name--></h2>
                    <!--XX-ul_content-->
                </div>
                #ELSE
                    #IF ("<!--XX-level-->" EQ "2")
                            <!--XX-ul_content-->
                            <li><a href="<!--XX-link-->"><!--XX-name--></a></li>
                    #ELSE
                        <!--XX-ul_content-->
                    #ENDIF
                #ENDIF
        #ENDIF
        EOF

        ul_snippet <<EOF
        #IF NOT ("<!--XX-description-->" REQ "PAGEFOOTER")
                #IF ("<!--XX-level-->" EQ "1")
                    <ul class="subLinkList">
                #ENDIF
                    <!--XX-li_content-->
                #IF ("<!--XX-level-->" EQ "1")
                    </ul>
                #ENDIF
        #ENDIF
        EOF

    </fnav>

escaper-Plug-in CATMETA.pm - in Entwicklung

Dieses Plug-in kann in der navigation_generator.conf genutzt werden, um alle relevanten Metadaten der Rubriken zu erhalten. 

NAME
       Dynamic::Escape::CATMETA

DESCRIPTION
       The Dynamic::Escape::CATMETA module can be used for accessing Category-Metafields when the node_id is given.

SYNTAX
       In templates:

       <!--XX-CATMETA(__imperia_ac_enabled):cat_nodeid-->

       This will return the value of the field __imperia_ac_enabled from the category specified by the node_id <!--XX-cat_nodeid--> of the element
       rendered.

       Data will automatically be HTML-escaped.

       You can specify another escaper by passing it seperated by a comma.

       <!--XX-CATMETA(__imperia_ac_enabled,HTML):cat_nodeid-->

       Would return the Field unescaped.