Fluid Templating

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.

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 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