Sie befinden sich hier: start » fluid_navigation

TYPO3 Navigation mit Fluid Templates

TYPO3 Navigation mit Fluid Templates

Mit der Einführung von Fluid gibt es die Möglichkeit, Bausteine einer Webseite nicht mehr nur mit TypoScript zu programmieren, sondern Fluid Templates zu nutzen. Bislang gab es für solche Zwecke Extensions wie den VHS Viewhelper. Seit der Version 10.4 von TYPO3 gibt es jedoch neue Fluid Elemente im Core von TYPO3, die man für den Aufbau verschiedener Typen einer Navigation nutzen kann. In diesem Teil unseres TYPO3 Wiki der Agentur IBK zeigen wir Ihnen den Quelltext für mehrere Möglichkeiten zum Aufbau einer Navigation per Fluid Template.

Dabei haben Sie die Möglichkeit, eine NavBar Navigation oder eine Liste als Special Menu über den MenuProcessor von TYPO3 zu gestalten. Auch der Sprachumschalter hat nun die Option, nicht mehr rein über TypoScript, sondern als Language Selector über den LanguageMenuProcessor und ein eigenes Fluid Template gestaltet zu werden.

Den MenuProcessor können wir im TypoScript Setup unserer Webseite über das PAGE Element ansprechen. Der Vorteil liegt hier in der einfachen Konfiguration. Wir müssen nicht mehr für jede Ebene ein eigenes TMENU bzw. HMENU anlegen, was die Übersichtlichkeit des Codes deutlich vereinfacht.

TypoScript Code Snippet für MenuProcessor

Hier ein TypoScript Code Snippet zur Einbindung des Menu Processors im TypoScript Setup:

page {
  10 {
    dataProcessing {
      10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
      10 {
        levels = 2
        as = headerMenu
        expandAll = 1
        includeSpacer = 1
        titleField = nav_title // title
      }
    }
  }
}

Wir erzeugen hier das Objekt headerMenu, das wir nun in unseren Fluid Templates weiter verarbeiten können.

Fluid Templates und Partials für MenuProcessor

Das Objekt steht uns nun in unserem Fluid Template zur Verfügung. Bei Aufbau der Template Struktur einer TYPO3 Webseite lagert man der Übersichtlichkeit halber die Header Navigation meist in ein Partial aus. In diesem Beispiel trägt das Partial den Namen Header. Wir dürfen nicht vergessen, diesem Partial das headerMenu Objekt als Argument zu übergeben:

<f:render partial="Header" arguments="{headerMenu:headerMenu}" />

Nun können wir unser Fluid Template bzw. Partial gehen und dort mit Conditions arbeiten, um den Code für unsere Header Navigation in Form einer Navbar zu generieren:

<f:for each="{headerMenu}" as="menuItem" iteration="headerMenuIteration">
  <f:if condition="{menuItem.children}">
    <f:then>
      <li class="nav-item dropdown{f:if(condition:'{menuItem.active}',then:' active')}">
        <a href="{menuItem.link}" 
          class="nav-link dropdown-toggle" id="navbarDropdown{headerMenuIteration.index}">
            {menuItem.title}
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <f:for each="{menuItem.children}" as="menuChild" iteration="headerChildIteration">
            <f:link.page pageUid="{menuChild.data.uid}" 
              class="dropdown-item {f:if(condition:'{menuChild.active}',then:' active')}">
                {menuChild.title}
            </f:link.page>
          </f:for>
        </div>
      </li>
    </f:then>
    <f:else>
      <li class="nav-item {f:if(condition:'{menuItem.active}',then:'active')}">
        <f:link.page pageUid="{menuItem.data.uid}" class="nav-link">
          {menuItem.title}
        </f:link.page>
      </li>
    </f:else>
  </f:if>
</f:for>  

Der große Vorteil für Entwickler ist in diesem Fall, dass die Bedingungen, ob man sich in der aktuellen Seite, der Rootline oder in einem anderen Menu befindet, komplett auf das Fluid Template verlagern und dort mit Conditions arbeiten kann. Dies bringt die Möglichkeit, mit CSS Klassen direkt am Ort der Entstehung zu arbeiten.

Im Footer einer Webseite, manchmal auch in einem gesonderten Menu für den Header einer Webseite, hat man oft spezielle Links, die in jeder Seite zu sehen sein sollen. Dies kann die Kontaktseite sein, auch das Impressum und der Link zur Datenschutzerklärung sind solche herausgehobenen Seiten. Der MenuProcessor des TYPO3 Core bietet nun ebenfalls eine Möglichkeit, ein Spezial Menu als Linkliste über ein Fluid Template zu gestalten.

TypoScript Code Snippet für Special Menu mit MenuProcessor

Auch in diesem Fall erzeugen wir mit Hilfe unseres TypoScript Setup ein PAGE Objekt, mit dem wir den Menu Processor aufrufen.

page {
  10 {
    dataProcessing {
      20 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
      20 {
        special = list
        special.value = 7, 8
        as = footerMenu
        titleField = nav_title // title
      }
    }
  }
}

Dem MenuProcessor geben wir die Information mit, welche Seiten verlinkt werden sollen und wie das Objekt heißen soll. Es besteht zudem noch die Möglichkeit, die zu verlinkenden Seiten als Konstanten aus dem TypoScript Template der Webseite zu übergeben. Der Code Block kann dann wie folgt aussehen:

[...]
      20 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
      20 {
        special = list
        special.value = {$plugin.tx_provider.settings.listpages}
        as = footerMenu
        titleField = nav_title // title
      }
[...]

Über die Constants unserer Webseite können wir dann die zu verlinkenden Seite auflisten und unterschiedliche IDs zwischen der Test- und der Live Webseite eingeben:

plugin.tx_provider.settings.listpages = 7, 8

Damit geben wir die Seiten für den Footer unabhängig von der Programmierung ein.

Fluid Template oder Partial für Special Menu mit MenuProcessor

In nächsten Schritt können wir in unserem Fluid Template oder Partial auf das von uns so benannte Objekt footerMenu zugreifen.

<f:for each="{footerMenu}" as="footermenuItem" iteration="footerMenuIteration">
  <f:link.page 
    pageUid="{footermenuItem.data.uid}" 
    class="nav-link{f:if(condition:'{footermenuItem.current}',then:' active')}">
    {footermenuItem.title}
  </f:link.page>
</f:for>

Auch hier haben wir erneut alle Möglichkeiten der Conditions und der Formatierung per CSS.

Language Selection Menu - Sprachumschalter mit Fluid

Ein Menu zum Umschalten der Sprache einer TYPO3 Webseite, auch Language Selector oder Language Selection Menu genannt, war bislang eine typische Anwendung für TypoScript oder den VHS Viewhelper. Hier sehen Sie ein Beispiel für den Aufbau einer Navigation zum Umschalten zwischen mehreren Sprachen einer TYPO3 Webseite, wie er mit der Version 10.4 von TYPO3 möglich geworden ist.

TypoScript im Setup für Language Selection Menu

Auch diese Lösung kommt nicht ohne ein wenig TypoScript aus. Im Setup Ihrer TYPO3 Webseite können Sie den Data Processor des TYPO3 Core anprechen, um ein Sprachmenu einzurichten. Hier ist eine Vorlage für Source Code zum Aufbau des PAGE Objekt:

page {
  10.dataProcessing {
    40 = TYPO3\CMS\Frontend\DataProcessing\LanguageMenuProcessor
    40 {
      languages = 0, 1, 2, 3
      as = languagenavigation
    }
  }
}

Bei diesem Menu gehen wir von vier Sprachen aus, die wir in unserem TYPO3 System mit den Language IDs 1, 2, 3 und 4 angelegt haben. Über dieses TypoScript Setup geben wir unserem System die Sprachen mit, die wir für die Anzeige nutzen möchten. Das von uns benannte Objekt languagenavigation stellt nun Links, Sprachvarianten, Flaggen und mehrere Zustände für die jeweilige Sprache bereit.

Fluid Template für Language Selector ab TYPO3 10.4

Wenn wir diese Grundlage gelegt haben, können wir die Objekte des Data Processors von TYPO3 nutzen, um das Fluid Template für unseren Sprachumschalter aufzubauen. Hier ein grundlegendes Beispiel für die Syntax des Fluid Templates:

<f:for each="{languagenavigation}" as="item">
  <f:if condition="{item.available}">
    <f:then>
      <a href="{item.link}" hreflang="{item.hreflang}" title="{item.title}">
        {item.navigationTitle}
      </a>
    </f:then>
    <f:else>
      <span>{item.navigationTitle}</span>
    </f:else>
  </f:if>
</f:for>

Sehen wir uns die Syntax dieses Fluid Templates einmal etwas genauer an:

  • Wir nehmen die Variable languagenavigation entgegen und durchlaufen eine <f:for> Schleife, um sämtliche Objekte in der Variable darstellen zu können.
  • Jedes Objekt bekommt den Namen item zugewiesen.
  • Über den Zustand item.available können wir mit Hilfe einer Condition abfragen, ob es eine Seite überhaupt in einer Variante der jeweilige Sprache gibt. Im aktiven Fall wird ein Link erzeugt. Im anderen Fall wird die Sprache als nicht verfügbar angegeben und als Text angezeigt, man könnte sie auch abschalten.
  • Die Variable item.link gibt uns den Link zur Seite in der jeweiligen Sprache an
  • Durch die Variable item.hreflang können wir die Sprachversion der Webseite steuern und Suchmaschinenoptimierung betreiben, denn wir geben Google damit die alternativen Sprachen mit, unter denen die Webseite erreichbar ist
  • Über item.title können wir das title-Attribut für SEO befüllen
  • Mit der Variable item.navigationTitle fragen wir den dargestellten Titel der Seite ab, den wir redaktionell und per Setup festgelegt haben

Hier ein weiteres Beispiel, denn wir können dank des Fluid Templates noch mehr mit unserer Navigation zum Umschalten zwischen Sprachen erreichen.

Fluid Template mit aktivem Zustand für Sprachumschalter TYPO3

Das oben gezeigte Beispiel können wir erweitern. Der Data Processor des TYPO3 Kernels liefert uns die Möglichkeit, nicht nur zu unterscheiden, ob es überhaupt eine Sprachvariante für die aktuell angezeigte Seite gibt. Wir haben auch die Möglichkeit zu unterscheiden, ob die Seite vorhanden ist und ob wir uns gerade auf dieser Seite befinden, also den aktiven Zustand dieser Seite abzufragen. Unser oben geschildertes Beispiel im Quellcode lässt sich wie folgt erweitern:

<f:for each="{languagenavigation}" as="item">
  <f:if condition="{item.available}">
    <f:then>
      <f:if condition="{item.active}">
        f:then>
          <a href="{item.link}" hreflang="{item.hreflang}" title="{item.title}" class="link-language link-active">
            {item.navigationTitle}
          </a>
        </f:then>
        <f:else>
          <a href="{item.link}" hreflang="{item.hreflang}" title="{item.title}" class="link-language">
            {item.navigationTitle}
          </a>
        </f:else>
      </f:if>
    </f:then>
    <f:else>
      <span>{item.navigationTitle}</span>
    </f:else>
  </f:if>
</f:for>

Zur Erklärung des Quellcodes für das Fluid Template:

  • Über die Variable item.active fragen wir mit Hilfe einer Condition ab, ob dies der Link für die aktuell aufgerufene (aktive) Seite ist
  • Im Falle der aktiven Seite fügen wir eine Klasse für unser CSS hinzu, mit dem wir diesen Link hervorheben können
  • In Falle einer nicht aktiven, aber als Sprachvariante vorhandenen Seite fügen wir eine andere Klasse für unser Style Sheet hinzu.

TYPO3 Sprachmenu als Listenelement formatieren

Das oben beschriebene Beispiel lässt sich in die Seitenvorlage einer TYPO3 Webseite einbauen. Ein beliebtes HTML-Element für die Gestaltung einer Navigation ist bekanntlich das Listenelement. Dieses lässt sich recht einfach und übersichtlich in das Fluid Template einbauen. Hier erweitern wir das Beispiel:

<ul>
  <f:for each="{languagenavigation}" as="item">
    <li>
      <f:if condition="{item.available}">
        <f:then>
          <a href="{item.link}" hreflang="{item.hreflang}" title="{item.title}">
            {item.navigationTitle}
          </a>
        </f:then>
        <f:else>
          <span>{item.navigationTitle}</span>
        </f:else>
      </f:if>
    </li>
  </f:for>
</ul>

Unser CSS können wir nun erweitern und den bei Listenelementen <ul> und <li> über list-style: none; die normale Formatierung entfernen. Auch das padding und margin können wir entfernen. Ab diesem Zeitpunkt haben wir die vollkommene Freiheit zur Gestaltung des Layouts unserer Webseite nach unseren Wünschen.

Länderflagge in Sprachmenu mit Fluid Template

Einen Sprachumschalter mit Fluid Template in TYPO3 können wir mit Hilfe der Objekte aus dem Data Processing noch um weitere Elemente im Layout erweitern. Eine recht einfache Variante ist eine Flagge. Das oben bereits mehrfach erwähnte Objekt item hat mehrere Variablen, die man dazu nutzen kann. Über die Variable item.flag kann man entsprechende Anzeigen steuern. Hier ein Beispiel für den Link zu einer Sprachversion:

<f:image src="fileadmin/img/Flags/{item.flag}.png" />
<a href="{item.link}" hreflang="{item.hreflang}" title="{item.title}" class="link-language link-active">
  {item.navigationTitle}
</a>

Bei diesem Beispiel gehen wir davon aus, dass wir Länderflaggen in einem bestimmten Verzeichnis gespeichert haben (hier: fileadmin/img/Flags/) und diese nach einer Namenskonvention und mit der Dateiendung .png benannt haben. Nun können wir die Flaggen für das Language Selection Menu automatisch laden.