Fluid Templating

Fluid wurde ursprünglich als Template-Sprache für FLOW und Extbase entwickelt, ist aber auch zum Rendern der Frontend-Ausgabe geeignet. In Fluid kann direkt auf zur Verfügung stehende Variablen und Objekte zugegriffen werden. Zusätzlich stellen sogenannte ViewHelper verschiedene Funktionen zur Verfügung, von Datumsformatierungen bis zu Schleifen und Bedingungen.

Bei Fluid Templates wird die HTML-Vorlage in mehrere Teile zerlegt:

Layout: Enthält die Elemente, die auf allen Webseiten einheitlich bleiben (z.B. Header und Footer).
Template: Der Hauptteil der Website. Mehrere Templates z.B. für zwei- und dreispaltige Webseiten sind möglich.
Partial: Für kleinere, sich wiederholende Elemente. Nicht immer notwendig.

→ Übersicht der ViewHelper

Beispiel für ein simples Fluidtemplate

Typoscript

lib.mainMenu = HMENU
lib.mainMenu {
  [...]
}
 
page = PAGE
page {
  # Einfügen von CSS, Javascript, Metadaten etc. wie üblich
 
  10 = FLUIDTEMPLATE
  10 {
    file = fileadmin/fluid/Resources/Private/Templates/2-columns.html
    layoutRootPath = fileadmin/fluid/Resources/Private/Layouts/
    partialRootPath = fileadmin/fluid/Resources/Private/Partials/
 
    variables {
      content < styles.content.get
      contentRight < styles.content.getRight
      header = IMAGE
      header {
       [...]
      }
      mainMenu < lib.mainMenu
      footer = TEXT
      footer {
        [...]
      }
  }
}

Ein erstes Template

Beispiel für ein zweispaltiges Template
fileadmin/fluid/Resources/Private/Templates/2columns.html

<!-- Einfügen des Layouts (Dateiname ohne Endung) -->
<f:layout name="defaultLayout" />
 
<f:section name="body">
  <div id="main">
    <div id="main-menu">
      <f:format.raw>{mainMenu}</f:format.raw>
    </div>
    <div id="content">
      <f:format.raw>{content}</f:format.raw>
    </div>
    <div id="right">
      <f:format.raw>{contentRight}</f:format.raw>
    </div>
  </div>
</f:section>

Das Layout

Beispiel für ein grundlegendes Layout
fileadmin/fluid/Resources/Private/Layouts/defaultLayout.html

<div id="wrapper">
  <div id="header">
    <f:format.raw>{header}</f:format.raw>
  </div>
 
  <!-- Einfügen des Templates (Name der Sektion) -->
  <f:render section="body" />
 
  <div id="footer">
    <f:format.raw>{footer}</f:format.raw>
  </div>
</div>

Einbindung eines HTML-Templates abhängig vom BackendLayout

Verknüpfung der HTML-Templates (z.B. zwei- und dreispaltig) mit den (zuvor angelegten) BackendLayouts. Wenn in der aktuellen Seite kein Template/BackendLayout eingebunden ist, nutze das Template der darüber liegenden Seite. Falls bis zum root kein Template zu finden ist, nutze den default-Wert.

page.10 = FLUIDTEMPLATE
page.10 {
  file.cObject = CASE
  file.cObject {
    key {
    # -1 = aktuelle Seite | backend_etc = Feld in der Datenbank | slide = am rootPath entlang nach oben suchen
      data = levelfield:-1, backend_layout_next_level, slide
      override {
      data = TSFE:page|backend_layout
    }
  }
  # Nummerierung = ID des BackendLayouts!
  4 = TEXT
  4.value = fileadmin/fluid/Resources/Private/Templates/3columns.html
  3 = TEXT
  3.value = fileadmin/fluid/Resources/Private/Templates/2columns.html
  default = TEXT
  default.value = fileadmin/fluid/Resources/Private/Templates/3columns.html
}

Snippets + Wiki

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Inhaltsverzeichnis