Navigation als TypoScript Library in TYPO3 Webseite

Die Navigation in einer TYPO3-Webseite wird im Allgemeinen über TypoScript aufgebaut. Dieser Teilbereich von TypoScript stellt mehrere Möglichkeiten bereit, eine Navigation aufzubauen. Im Regelfall schreibt man jedes Modul der Navigation in ein eigene TypoScript-Datei, die man dann als Library einbindet.

Auch mit dem   VHS Viewhelper können Sie eine Navigation aufbauen - nützlich vor allem dann, wenn Sie mit Bedingungen (Conditions) unterschiedliche Inhalte darstellen möchten.

Libraries für TypoScript in TYPO3

In der täglichen Arbeit mit TypoScript zum Aufbau von Webseiten mit TYPO3 hat es sich als Best Practice herausgestellt, die einzelnen Module der Navigation in Dateien zu speichern, die man als lib. Dateien ins System einbindet. Dies bietet mehrere Vorteile:

  • Bei der Kontrolle der ins System eingebundenen Libraries tauchen die Funktionen für die Navigation zusammen mit den anderen Elementen im TypoScript Objekt Browser auf
  • Die Dateien sind versionierbar und können von mehreren Entwicklern unabhängig voneinander bearbeitet werden
  • Als lib. benannte Funktionen können in den Cache geladen werden und sparen damit im Gegensatz zu temp. Dateien Ladezeit

Dateiendungen in TypoScript

Viele Beispiele für die Einbindung von TypoScript in diesem Tutorial verwenden die Dateiendung .ts für Dateien zur Konfiguration von TYPO3. In den letzten Jahren ist es der empfohlene Standard, die TypoScript Dateien mit der Endung .typoscript zu verwenden. Die Endung .ts kann je nach verwendetem Rechner auch als Videodatei oder Typescript identifiziert werden. In Extensions findet man auch oft Dateien wie setup.txt in der Konfiguration. Dies funktioniert zwar, sollte aber bei einem Update angepasst werden.

Einbindung einer TypoScript Datei und Funktion

Die Datei kann nun über das Setup ins System eingebunden werden:

@import "EXT:ibkprovider/Configuration/TypoScript/Library/lib.navigation.ts"

Damit steht dem System eine Lib bereit, die Sie über den TypoScript Objekt Browser kontrollieren können. Dort bekommen Sie den Namen der Funktion angezeigt, die Sie nun dort in Ihr Fluid Template einbinden, wo Sie Ihre Navigation benötigen:

<f:cObject typoscriptObjectPath="lib.navigation" />

Damit steht Ihnen die Navigation in Ihrer Webseite zur Verfügung. 

Beachten Sie:
Mit dem @import Befehl binden Sie eine Datei ein.
Der typoscriptObjectPath Befehl bindet eine Funktion ein.

Library Verzeichnis für TypoScript Navigation

In den wenigsten Fällen reicht eine einzige Funktion aus, um die Navigation einer Webseite bereitzustellen. Im Normalfall benötigt man weitere Bestandteile der Navigation, etwa für eine Breadcrumb Navigation oder besondere Seiten. In solchen Fällen bietet es sich an, Verzeichnisse für TypoScript anzulegen und mehrere Dateien zu erstellen, die man ins System lädt. 

Eine Verzeichnisstruktur kann folgendermaßen aussehen:

TypoScript
         ├── Setup
         └── Library
                   ├── Search
                   ├── Navigation
                   └── Includes

Im Verzeichnis Navigation legt man nun die einzelnen TypoScript Dateien für die weiteren Bestandteile der Navigation ab. Die Einbindung der Dateien erfolgt nun analog zu der Top Navigation auf der Webseite:

 @import "EXT:ibkprovider/Configuration/TypoScript/Library/Navigation/lib.breadcrumb.ts"
@import "EXT:ibkprovider/Configuration/TypoScript/Library/Navigation/lib.special.ts"

Beispiele für Navigation mit TypoScript

Sehen Sie hier einige Beispiele für eine Navigation mit TypoScript: