fluid_navigation

TYPO3 10.4 - 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.

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.

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.

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.

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.

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.

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.

Cookies helfen bei der Bereitstellung von Inhalten. Durch die Nutzung dieser Seiten erklären Sie sich damit einverstanden, dass Cookies auf Ihrem Rechner gespeichert werden. Weitere Information
  • fluid_navigation.txt
  • Zuletzt geändert: 14/11/2020 12:09
  • von Thomas Berscheid