Benutzer-Werkzeuge

Webseiten-Werkzeuge


typo3:templating:fluidtemplate

Dies ist eine alte Version des Dokuments!


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 = EXT:templates/Resources/Private/Templates/2-columns.html
    layoutRootPath = EXT:templates/Resources/Private/Layouts/
    partialRootPath = EXT:templates/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
EXT:templates/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
EXT:templates/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

TYPO3 4.5 bis TYPO3 7.4

Zu den HTML-Templates werden passende BackendLayouts angelegt, welche auf den Seiten im Backend eingebunden werden können. Im zweiten Teil des cObjects CASE werden sie einander zugeordnet.
Im Key des cObjects CASE wird ausgelesen, welches BackendLayout einer Seite zugewiesen wurde. Falls der aktuellen Seite kein BackendLayout zugewiesen wurde, soll das Template der darüber liegenden Seite genutzt werden. Falls bis zum root kein BackendLayout zu finden ist, wird der default-Wert genutzt.

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!
    1 = TEXT
    1.value = EXT:templates/Resources/Private/Templates/Template-9-3.html
    2 = TEXT
    2.value = EXT:templates/Resources/Private/Templates/Template-6-6.html
    default = TEXT
    default.value = EXT:templates/Resources/Private/Templates/DefaultTemplate.html
  }
}

ab TYPO3 7.5

In dieser Version wurde die Option pagelayout eingeführt, um die Zuweisung von Templates mit Backend-Layouts zu vereinfachen:

page.10 = FLUIDTEMPLATE
page.10 {
  file.stdWrap.cObject = CASE
  file.stdWrap.cObject {
    key.data = pagelayout
    # Nummerierung = ID des BackendLayouts!
    1 = TEXT
    1.value = EXT:templates/Resources/Private/Templates/Template-9-3.html
    2 = TEXT
    2.value = EXT:templates/Resources/Private/Templates/Template-6-6.html
    default = TEXT
    default.value = EXT:templates/Resources/Private/Templates/DefaultTemplate.html
  }
}

BackendLayouts über Page TSconfig

mod.web_layout.BackendLayouts {
  1 {
    title = Layout 3-1 (Standard)
    config {
      backend_layout {
        colCount = 3
        rowCount = 1
        rows {
          1 {
            columns {
              1 {
                name = Hauptspalte
                colspan = 2
                colPos = 0
              }
              2 {
                name = rechte Spalte
                colPos = 2
              }
            }
          }
        }
      }
    }
    icon = EXT:templates/Resources/Public/Images/BackendLayouts/BELayout_9-3.png
  }
}

Zu beachten ist, dass BackendLayouts aus der TSconfig das Präfix pagets__ erhalten, um nicht mit manuell erstellten Layouts zu kollidieren.

page.10 = FLUIDTEMPLATE
page.10 {
  file.stdWrap.cObject = CASE
  file.stdWrap.cObject {
    key.data = pagelayout
    // Nummerierung = ID des BackendLayouts!
    pagets__1 = TEXT
    pagets__1.value = EXT:templates/Resources/Private/Templates/Template-9-3.html
    pagets__2 = TEXT
    pagets__2.value = EXT:templates/Resources/Private/Templates/Template-6-6.html
    default = TEXT
    default.value = EXT:templates/Resources/Private/Templates/DefaultTemplate.html
  }
}

Eigene Fluid-Settings

TypoScript:

page.10 = FLUIDTEMPLATE
page.10 {
    settings {
        mySetting = 0
    }
 
    # etc.
}
 
 
[globalVar = TSFE:id=17]
page.10.settings.mySetting = 1
[global]

Fluid-Template:

<f:if condition="settings.mySetting">do something</f:if>

Assets (Stylesheets, JavaScripts) mit Fluid einbinden

Ab TYPO3 8.6 kann man Fluid verwenden, um benötigte Assets z.B. über eine Extension in der Seite zu ergänzen. Es sind praktische Alternativen zum TypoScript-Setup includeJSFooter etc.

Fluid-Template:

<f:section name="HeaderAssets">
    <!-- zusätzliche Inhalte im <head> -->
</f:section>
 
<f:section name="FooterAssets">
    <!-- zusätzliche Inhalte vor </body> -->
</f:section>

Quelle: TYPO3 Changelog #79413


Einem Fluid Partial zusätzliche Argumente übergeben

<f:alias map="{footerClassList: 'c-site-footer  c-site-footer--dark'}">
    <f:render partial="Site/Footer" arguments="{_all}"/>
</f:alias>

Quelle: StackOverflow

typo3/templating/fluidtemplate.1591469808.txt.gz · Zuletzt geändert: 2020/06/06 20:56 von admin