Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.
Beide Seiten, vorherige ÜberarbeitungVorherige ÜberarbeitungNächste Überarbeitung | Vorherige Überarbeitung | ||
typo3:templating:fluidtemplate [2013/12/28 19:25] – [Fluid Templating] admin | typo3:templating:fluidtemplate [2021/03/02 19:54] (aktuell) – Condition für alternatives Fluid-Layout admin | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
====== Fluid Templating ====== | ====== 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. | + | 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 |
Bei Fluid Templates wird die HTML-Vorlage in mehrere Teile zerlegt: | Bei Fluid Templates wird die HTML-Vorlage in mehrere Teile zerlegt: | ||
Zeile 10: | Zeile 10: | ||
===== Beispiel für ein simples Fluidtemplate ===== | ===== Beispiel für ein simples Fluidtemplate ===== | ||
- | ==== Typoscript | + | ==== TypoScript |
<code typoscript> | <code typoscript> | ||
lib.mainMenu = HMENU | lib.mainMenu = HMENU | ||
Zeile 23: | Zeile 23: | ||
10 = FLUIDTEMPLATE | 10 = FLUIDTEMPLATE | ||
10 { | 10 { | ||
- | file = fileadmin/ | + | file = EXT: |
- | layoutRootPath = fileadmin/ | + | layoutRootPath = EXT: |
- | partialRootPath = fileadmin/ | + | partialRootPath = EXT: |
| | ||
variables { | variables { | ||
Zeile 39: | Zeile 39: | ||
[...] | [...] | ||
} | } | ||
+ | } | ||
} | } | ||
} | } | ||
Zeile 44: | Zeile 45: | ||
==== Ein erstes Template ==== | ==== Ein erstes Template ==== | ||
Beispiel für ein zweispaltiges Template\\ | Beispiel für ein zweispaltiges Template\\ | ||
- | //fileadmin/ | + | //EXT: |
<code html> | <code html> | ||
<!-- Einfügen des Layouts (Dateiname ohne Endung) --> | <!-- Einfügen des Layouts (Dateiname ohne Endung) --> | ||
- | < | + | < |
< | < | ||
Zeile 65: | Zeile 66: | ||
==== Das Layout ==== | ==== Das Layout ==== | ||
Beispiel für ein grundlegendes Layout\\ | Beispiel für ein grundlegendes Layout\\ | ||
- | //fileadmin/ | + | //EXT: |
<code html> | <code html> | ||
<div id=" | <div id=" | ||
Zeile 82: | Zeile 83: | ||
---- | ---- | ||
===== Einbindung eines HTML-Templates abhängig vom BackendLayout ===== | ===== Einbindung eines HTML-Templates abhängig vom BackendLayout ===== | ||
- | Verknüpfung der HTML-Templates | + | |
+ | ==== TYPO3 4.5 bis TYPO3 7.4 ==== | ||
+ | |||
+ | Zu den HTML-Templates | ||
+ | Im Key des // | ||
<code typoscript> | <code typoscript> | ||
page.10 = FLUIDTEMPLATE | page.10 = FLUIDTEMPLATE | ||
Zeile 89: | Zeile 94: | ||
file.cObject { | file.cObject { | ||
key { | key { | ||
- | | + | |
data = levelfield: | data = levelfield: | ||
override { | override { | ||
- | | + | |
+ | } | ||
} | } | ||
+ | # Nummerierung = ID des BackendLayouts! | ||
+ | 1 = TEXT | ||
+ | 1.value = EXT: | ||
+ | 2 = TEXT | ||
+ | 2.value = EXT: | ||
+ | default = TEXT | ||
+ | default.value = EXT: | ||
} | } | ||
- | # Nummerierung = ID des BackendLayouts! | ||
- | 4 = TEXT | ||
- | 4.value = fileadmin/ | ||
- | 3 = TEXT | ||
- | 3.value = fileadmin/ | ||
- | default = TEXT | ||
- | default.value = fileadmin/ | ||
} | } | ||
</ | </ | ||
+ | |||
+ | ==== ab TYPO3 7.5 ==== | ||
+ | |||
+ | In dieser Version wurde die Option '' | ||
+ | |||
+ | <code typoscript> | ||
+ | page.10 = FLUIDTEMPLATE | ||
+ | page.10 { | ||
+ | file.stdWrap.cObject = CASE | ||
+ | file.stdWrap.cObject { | ||
+ | key.data = pagelayout | ||
+ | # Nummerierung = ID des BackendLayouts! | ||
+ | 1 = TEXT | ||
+ | 1.value = EXT: | ||
+ | 2 = TEXT | ||
+ | 2.value = EXT: | ||
+ | default = TEXT | ||
+ | default.value = EXT: | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ---- | ||
+ | |||
+ | ===== BackendLayouts über Page TSconfig ===== | ||
+ | |||
+ | <code typoscript> | ||
+ | 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: | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Zu beachten ist, dass BackendLayouts aus der TSconfig das Präfix '' | ||
+ | |||
+ | <code typoscript> | ||
+ | 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: | ||
+ | pagets__2 = TEXT | ||
+ | pagets__2.value = EXT: | ||
+ | default = TEXT | ||
+ | default.value = EXT: | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ---- | ||
+ | |||
+ | ===== Eigene Fluid-Settings ===== | ||
+ | |||
+ | **TypoScript: | ||
+ | <code typoscript> | ||
+ | page.10 = FLUIDTEMPLATE | ||
+ | page.10 { | ||
+ | settings { | ||
+ | mySetting = 0 | ||
+ | } | ||
+ | |||
+ | # etc. | ||
+ | } | ||
+ | |||
+ | |||
+ | [globalVar = TSFE:id=17] | ||
+ | page.10.settings.mySetting = 1 | ||
+ | [global] | ||
+ | </ | ||
+ | |||
+ | **Fluid-Template: | ||
+ | <code html> | ||
+ | <f:if condition=" | ||
+ | </ | ||
+ | |||
+ | ---- | ||
+ | |||
+ | ===== Assets (Stylesheets, | ||
+ | |||
+ | 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 '' | ||
+ | |||
+ | **Fluid-Template: | ||
+ | <code html> | ||
+ | < | ||
+ | <!-- zusätzliche Inhalte im < | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | <!-- zusätzliche Inhalte vor </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Quelle: [[https:// | ||
+ | |||
+ | ---- | ||
+ | |||
+ | ===== Einem Fluid Partial zusätzliche Argumente übergeben ===== | ||
+ | |||
+ | <code html> | ||
+ | <f:alias map=" | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Quelle: [[https:// | ||
+ | |||
+ | ---- | ||
+ | |||
+ | ===== 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 ''< | ||
+ | |||
+ | **Voraussetzung: | ||
+ | |||
+ | Die Vorgehensweise mit '' | ||
+ | |||
+ | <code html> | ||
+ | {f: | ||
+ | <f:if condition=" | ||
+ | <aside class=" | ||
+ | // Render stuff | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Quelle: [[https:// | ||
+ | |||
+ | ---- | ||
+ | |||
+ | ===== Condition für alternatives Fluid-Layout ===== | ||
+ | |||
+ | Eine '' | ||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | Quelle: [[https:// | ||