TYPO3: Fluid-Template Tutorial
TYPO3-Logo (Quelle: typo3.org)

TYPO3: Fluid-Template Tutorial

Mit Fluid können die Templates von TYPO3-Webseiten individuell angepasst werden. Dieses Tutorial beschreibt die Grundlagen.

Das Layout

Zunächst muss das Hauptlayout für die TYPO3-Webseite erstellt werden. In diesem Beispiel dient die Datei /fileadmin/templates/layout.html als Vorlage und enthält den gesamten HTML-Quelltext, der innerhalb des body-Elements angezeigt wird.

Inhalt der layout.html

1
2
3
4
5
<header id="header"></header>

<section id="content"></section>

<aside id="sidebar"></aside>
Mit einem Doppelklick kann der gesamte Code markiert werden.

Durch folgenden TypoScript-Code wird festgelegt, dass die Frontend-Ausgabe durch die Fluid-Erweiterung übernommen werden soll.

TypoScript-Code

1
2
page.10 = FLUIDTEMPLATE
page.10.file = fileadmin/templates/layout.html
Mit einem Doppelklick kann der gesamte Code markiert werden.

Variablen an das Fluid-Template übergeben

Das momentan statische Template hat noch keinen dynamischen Inhalt. Durch Variablen können Inhalte aus dem Backend an das Template übergeben werden. Um zum Beispiel den Inhalt aus den Backend-Spalten an das Frontend zu übergeben, ist folgender TypoScript-Code nötig:

TypoScript-Code

1
2
3
4
page.10.variables.content < styles.content.get
page.10.variables.left < styles.content.getLeft
page.10.variables.right < styles.content.getRight
page.10.variables.sidebar < styles.content.getBorder
Mit einem Doppelklick kann der gesamte Code markiert werden.

Um die Variable in die Template-Datei einzubinden, werden Marker mit der Schreibweise {variablenname} verwendet. Um zu verhindern, dass statt dem HTML die HTML Entities angezeigt wird, wird der Marker als [lt]f:format.raw>{variablenname}[lt]/f:format.raw> geschrieben. Die Template-Datei sieht jetzt so aus:

Inhalt der layout.html

1
2
3
4
5
6
7
8
9
<header id="header"></header>

<section id="main">
   <f:format.raw>{content}</f:format.raw>
</section>

<aside id="sidebar">
   <f:format.raw>{sidebar}</f:format.raw>
</aside>
Mit einem Doppelklick kann der gesamte Code markiert werden.

Partials anlegen

Partials sind Bestandteile des Layouts, deren Inhalt in separaten Dateien gespeichert werden kann. Verbreitete Anwendungsfälle sind die Einbindung vom Header oder Footer. Zunächst muss dem FLUIDTEMPLATE-Objekt der Ordner mitgeteilt werden, in dem sich die Partial-Dateien befinden:

1
page.10.partialRootPath = fileadmin/templates/partials/
Mit einem Doppelklick kann der gesamte Code markiert werden.

In diesem Beispiel soll der Inhalt des header-Elements aus einem Partial stammen. Dazu muss im Partial-Verzeichnis die Datei header.html angelegt und mit dem gewünschten Inhalt befüllt werden. Danach kann die Partial-Datei im Hauptlayout eingebunden werden:

1
2
3
4
5
6
7
8
9
10
11
<header id="header">
   <f:render partial="header" />
</header>

<section id="main">
   <f:format.raw>{content}</f:format.raw>
</section>

<aside id="sidebar">
   <f:format.raw>{sidebar}</f:format.raw>
</aside>
Mit einem Doppelklick kann der gesamte Code markiert werden.

Geschrieben von: Jens Richter