Sie befinden sich hier: start » fluid_layouts

Fluid Layouts

Fluid Layouts

Ein Fluid Layout bildet die Grundlage für die Einbindung von Fluid Templates.
Das bedeutet: Wenn man ein Basis Fluid (HTML) Template über das Setup in die Webseite eingebunden hat, verweist die erste Zeile in diesem Template auf die Layout-Datei. Den Suchpfad dazu gibt man ebenfalls im Setup an.
Die Layout-Datei bildet nun quasi das Inhaltsverzeichnis für die folgenden Schritte. Diese Datei sagt der Rendering Engine von TYPO3, welche weiteren Dateien nun nacheinander abgearbeitet werden sollen.

Layout Datei: Einfaches Beispiel

In diesem Beispiel besteht das Layout der Webseite aus drei Bereichen:

  • Das partial Header stellt den oberen Bereich der Webseite dar
  • Der Inhaltsbereich wird über eine section angesprochen, die sich im Basis Fluid Template wiederfindet
  • Das partial Footer bindet Inhalte wie z. B. wichtige Links und Kontaktadressen ein
<f:render partial="Header" />
<f:render section="main" />
<f:render partial="Footer" />

Beachten Sie die folgenden Konventionen:

  • Die Inhalte des Layout werden in der Reihenfolge von oben nach unten abgearbeitet
  • Die Namen der eingebundenen Partials müssen mit einem Großbuchstaben beginnen und genauso in der Layout-Datei benannt sein
  • Die Dateiendung .html wird bei der Einbindung eines Partials weggelassen

Layout Datei: Übergabe von Variablen

Sie können einem Partial Informationen mitgeben, dies geschieht mit der Variable arguments. So haben Sie die Möglichkeit, von ihrem Basis Template aus z. B. den Titel der Webseite an den Header zu übergeben. In diesem Beispiel wird zusätzlich an den Footer eine Zusammenfassung der Seite übergebe.
Dafür nutzen Sie folgende Syntax:

<f:render partial="Header" arguments="{page_title:page_title}" />
<f:render section="main" />
<f:render partial="Footer" arguments="{page_abstract::page_abstract}" />

Sollen mehrere Parameter übergeben werden, so sind diese arguments mit einem Komma voneinander zu übergeben:

<f:render partial="Header" arguments="{slider_content:slider_content, page_title:page_title}" />