Simple Zweiweg-Navigationsmenüs mit Textpattern 4.0.7

29. November 2008

Eine der Neuerungen in Textpattern 4.0.7 liegt in den erweiterten Fähigkeiten vieler Templatetags.

Für die meisten der Tags, die eine Liste von “Dingen” (um mal einen Fachbegriff aus der Informationstechnik hier einzustreuen) erzeugen, kann man nun den erzeugten HTML-Code über Vorlagenbausteine oder im Tag in situ eingeschlossene Schablonen definieren.

Am Beispiel einer einfachen Navigation über zwei Ebenen lässt sich der dafür nötige Gedankengang nachvollziehen. Das Endresultat soll eine verschachtelte Liste (UL) sein, deren erste Ebene von Links zu Artikelkategorien gebildet wird, unter der dann die Links zu den jeweils zur Kategorie gehörigen Artikeln aufgelistet werden:

  • Kategorie A
    • Artikel A1
    • Artikel A2
  • Kategorie B
    • Artikel B1
    • Artikel B2
    • Artikel B3
  • Kategorie C
    • Artikel C1
    • Artikel C2
    • Artikel C3
    • Artikel C4

Die erste Ebene wird über <txp:category_list /> erzeugt. Zusatzfeature: Die CSS-Klasse des Menülinks wird in einer Textpattern-Variablen über <txp:variable name="catclass" value="..." /> festgelegt und der über die URL der Seite aktive Menüpunkt mit der CSS-Klasse active gekennzeichnet.

<!-- first level: all subcategories of 'parent' -->
<txp:category_list parent="parent" exclude="parent" wraptag="ul" break="li" > 

  <!-- determine classname for first level list items 
       depending on the current URI category. 
       Use txp:variable as a scratchpad  -->

  <txp:variable name="catclass" value="passive" />
  <txp:if_category name='<txp:category />'>
    <txp:variable name="catclass" value="active" />
  </txp:if_category>

  <!-- first level list item: category link -->
  <txp:category title="1" link="1" class='<txp:variable name="catclass" />' />
</txp:category_list>

Die zweite Menüebene bildet eine Liste mit Links auf alle Artikel einer bestimmten Kategorie, wieder mit Bestimmung einer CSS-Klasse für den aktiven Link. Der entsprechende Ausschnitt sieht so aus:

<!-- second level: all articles of the current category list item, 
     sorted by title ascending -->
<txp:article_custom category='<txp:category />' wraptag="ul" break="li" sort="title asc">

<!-- determine classname for second level list items 
     depending on the current article id.
     Use another txp:variable as a scratchpad  -->

<txp:variable name="artclass" value="passive" />
<txp:if_article_id>
  <txp:variable name="artclass" value="active" />
</txp:if_article_id>

<!-- second level list item: article permlink -->
<txp:permlink class='<txp:variable name="artclass" />'><txp:title /></txp:permlink>
</txp:article_custom>

Zusammengebaut und ein wenig leserlicher formatiert sieht das Textpattern-Template für das Navigtionsmenü dann so aus:

<txp:category_list parent="parent" exclude="parent" wraptag="ul" break="li" > 

  <txp:variable name="catclass" value="passive" />
  <txp:if_category name='<txp:category />'>
    <txp:variable name="catclass" value="active" />
  </txp:if_category>

  <txp:category title="1" link="1" class='<txp:variable name="catclass" />' />

  <txp:article_custom category='<txp:category />' wraptag="ul" break="li" sort="title asc">

    <txp:variable name="artclass" value="passive" />
    <txp:if_article_id>
       <txp:variable name="artclass" value="active" />
    </txp:if_article_id>

    <txp:permlink class='<txp:variable name="artclass" />'>
        <txp:title />
    </txp:permlink>

  </txp:article_custom>

</txp:category_list>

Die erste Navigationsebene kann ganz ähnlich auch über eine Liste aller gewünschten Sektionen erzeigt werden. Dazu ersetzt man

<!-- first level: all subcategories of 'parent' -->
<txp:category_list parent="parent" exclude="parent" wraptag="ul" break="li" >

mit

<!-- first level: named sections -->
<txp:section_list sections="products, news, about" 
  include_default="1" default_title="Start" wraptag="ul" break="li">

Kommentare

  1. Die Menüstruktur bevorzuge ich! Das wäre doch glatt was für meine nächsten Sites! Mal sehen, wo und wann ich das einsetzen kann!