Fluid Templates: HTML-Vorlagen als Grundgerüst der Webseite

Um die Inhalte einer Webseite generieren zu können, braucht TYPO3 mindestens eine HTML-Vorlage, die das Grundgerüst des Quellcodes einer Webseite bereitstellt. Es ist zweckmäßig, nicht nur eine einzige Datei als ein solches Gerüst zu definieren, sondern dieses in mehrere einzelne Dateien zu zerlegen, die dann unterschiedliche Bestandteile der Webseite aufbauen. So kann man den Header- und Footer-Bereich einer Webseiter, der ja meist aus dem System generiert wird, z. B. mit der Navigation, vom redaktionell gepflegten Inhalt trennen. Dies geschieht durch die Trennung der Inhalte in 

  • Template
  • Layouts
  • Partials

Hierarchie der Fluid Templates in TYPO3

Beim Aufbau der Verzeichnisstruktur Ihres Systems ist es zweckmäßig, sich an die Standards der Entwicklung von Extensions für TYPO3 zu halten. Dort ist eine klare Hierarchie vorgegeben, in welchen Verzeichnissen Fluid Templates als HTML-Vorlagen für die Darstellung von Inhalten abzulegen sind. Eine Übernahme dieser Verzeichnisstruktur erlaubt eine einfachere Pflege des gesamten Systems.

Hinweis: Die Namen der im Folgenden beschriebenen Dateien und Verzeichnisse sollten jeweils mit einem großen Buchstaben anfangen! Unterschiedliche Behandlungen des Dateisystems zwischen Plattformen wie Windows und Linux können sonst dazu führen, dass die HTML-Vorlage nicht gefunden wird.

Hier ein Beispiel für die Hierarchie im Dateisystem:

Resources
        └── Private
                  ├── Layouts
                  ├── Partials
                  └── Templates

Template als HTML-Vorlage für Inhalt

Im Abschnitt zum TypoScript Template einer TYPO3 Webseite haben wir die Einbindung der Vorlage Page.html erwähnt. Diese Datei bildet die Vorlage zur Generierung der Inhalte in HTML für alle Seiten. Der Name dieser Datei ist frei wählbar, er sollte auf jeden Fall mit einem großen Buchstaben beginnen und aussagekräftig sein. Diese Datei wird als erste aufgerufen, wenn TYPO3 den Inhalt einer Seite generieren will. In dieser Seite finden sich die redaktionellen Inhalte der Seite wieder, die man im Backend Layout definiert und im TypoScript Setup angebunden hat.

Hier ein Beispiel für eine HTML Vorlage: 

 <f:layout name="Default" />
  
<f:section name="main">
    [...Hier die Variablen aus dem Backend Layout...]
</f:section>

TYPO3 geht nun mehrere Dateien nacheinander durch, was weiter unten genauer beschrieben wird. Der erste Verweis führt zu einer Layout-Datei. Der redaktionell gepflegte Inhalt wird in dem Bereich wiedergegeben, der durch die Fluid-Viewhelper <f:section> und </f:section> markiert ist.

Beachten Sie:

  • Die Namen der referenzierten Dateien werden immer ohne die Dateiendung .html geschrieben
  • Die Dateinamen beginnen immer mit einem Großbuchstaben

Layout-Datei: Fluid Template als Vorlage

Die Layout-Datei erfüllt zwei Funktionen:

  • Zum einen dient sie als Grundgerüst zum Aufbau des HTML-Quellcodes der gesamten Webseite
  • Zum anderen ist sie das Inhaltsverzeichnis für die Templates: Diese Datei legt fest, in welcher Reihenfolge welche Dateien aufgerufen und abgearbeitet werden.

Dabei greift die Layout-Datei auf die Suchpfade zu, die man im TypoScript Setup definiert hat.

Beispiel für den Aufbau einer Layout-Datei:

 <f:render partial="Header" />
<f:render section="main" />
<f:render partial="Footer" />

Partials: Fluid-Templates für Teilbereiche der Webseite

Partials bilden die Vorlage für Teilbereiche der Webseite. Nicht alle Inhalte sind redaktionell gepflegt: Der Kopfbereich einer Webseite enthält z. B. ein Logo und eine Navigation. Der Fussbereich einer Seite beispielsweise hat die Adresse des Unternehmens, die auf jeder Webseite gleich dargestellt wird. Um diese Inhalte in eigene Dateien auszugliedern, legt man sie in Partials ab. Bei diesen Datei handelt es sich um Fluid-Templates, die über die Layout-Datei eingebunden werden.

Hier ein Beispiel für einen Header, der eine Navigation einbindet:

 <div class="row">
    <div class="col-md-12 col-sm-12">
        <f:cObject typoscriptObjectPath="lib.navigation" />
    </div>
</div>

Reihenfolge von Template, Layout und Partials

Nun spielt sich folgendes Verhalten des Webservers mit TYPO3 ab:

  1. Im ersten Schritt wird ein Fluid Template als Vorlage für eine Layout-Datei gesucht. Dabei greift die HTML-Vorlagen auf die Suchpfade zu, die man im TypoScript Setup definiert hat, in diesem Fall auf den Suchpfad Templates. In unserem Beispiel heißt die Datei Page.html.
  2. In der Template Datei findet sich der Verweis auf eine Layout-Datei, in unserem Beispiel heißt diese Default.html. TYPO3 sucht nun nach dieser Datei im Suchpfad Layouts.
  3. Die Layout Datei arbeitet nun von oben nach unten ihre Befehle ab. In diesem Fall wird das Partial Header.html aufgerufen. Dazu nutzt TYPO3 wieder den im TypoScript Setup angegebenen Suchpfad, in diesem Fall den Pfad Partials.
  4. Die Inhalte des Partials werden ausgeführt. Ist dies abgeschlossen, springt TYPO3 in die Layout-Datei zurück.
  5. In der Layout-Datei findet sich nun ein Verweis auf eine section. Dieser Teilbereich muss sich in der HTML-Vorlage befinden. So springt TYPO3 nun in das Fluid Template, in unserem Fall die Datei Page.html.
  6. In der Datei findet TYPO3 nun eine section mit dem Namen, der in der Layout-Datei hinterlegt ist. Alles zwischen dem öffnenden und schließenden Viewhelper für die section wird nun ausgeführt.
  7. TYPO3 spingt nun zurück in die Layout-Datei und führt die weiteren Anweisungen aus. 

CSS und JavaScript Dateien per Asset Viewhelper einbinden

In den letzten Jahren hat sich der Umfang der Möglichkeiten von Fluid in TYPO3 ständig erweitert. Viele Funktionen, die man zuvor per TypoScript konfigurieren musste, sind in Prozessoren gewandert und können nun per Fluid geschrieben werden, so z. B. eine Navigation. Aber auch Konfigurationen sind nun per Fluid möglich, so die Einbindung von CSS und JavaScript Dateien. Dazu kann man den Asset Viewhelper nutzen.

Die Arbeit mit Fluid bietet einige Vorteile, darunter z. B. die Nutzung von Conditions. So kann man als Beispiel ein zusätzliches JavaScript Framework per Bedingung anschließen, wenn sich in der Seite mit der ID der Bildergalerie befindet. Zudem hat man die Möglichkeit, mit der Content Security Policy (CSP) zu arbeiten.

Einbindung von CSS Datei:

 

<f:asset.css
identifier="mein_css"
href="EXT:vendor/Resources/Public/css/meinstyle.css"
rel="stylesheet"
media="all"
useNonce="true">
</f:asset.css>

 

Einbindung einer JavaScript Datei:

 

<f:asset.script
identifier="mein_js"
src="EXT:vendor/Resources/Public/js/meinjs.js"
defer="true"
useNonce="true">
</f:asset.script>

 

Die Angaben für Quelle und den Identifier sind notwendig. Über den Parameter useNonce kann man die CSP aktivieren.