====== 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.
-> [[typo3:templating:fluidtemplate:viewhelper|Ü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//
{mainMenu}
{content}
{contentRight}
==== Das Layout ====
Beispiel für ein grundlegendes Layout\\
//EXT:templates/Resources/Private/Layouts/DefaultLayout.html//
{header}
----
===== 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:**
do something
----
===== 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:**
Quelle: [[https://docs.typo3.org/c/typo3/cms-core/master/en-us/Changelog/8.6/Feature-79413-AutorenderAssetSectionsInFluidTemplateContentObject.html|TYPO3 Changelog #79413]]
----
===== Einem Fluid Partial zusätzliche Argumente übergeben =====
Quelle: [[https://stackoverflow.com/a/44584209/5157290|Claus Fassing auf StackOverflow]]
----
===== Inhaltsspalte (colPos) in Fluid auf Inhalt prüfen =====
Das folgende Snippet rendert einen Teil des Fluid-Templates nur, wenn die angegebene Inhaltsspalte auch Inhalt besitzt (der nicht deaktiviert ist). Praktisch z.B. für ''