Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.
Beide Seiten, vorherige ÜberarbeitungVorherige ÜberarbeitungNächste Überarbeitung | Vorherige Überarbeitung | ||
typo3:templating:fluidtemplate [2015/01/11 12:42] – [Ein erstes Template] admin | typo3:templating:fluidtemplate [2021/03/02 19:54] (aktuell) – Condition für alternatives Fluid-Layout admin | ||
---|---|---|---|
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 ===== | ||
+ | |||
+ | ==== 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 // | Zu den HTML-Templates werden passende BackendLayouts angelegt, welche auf den Seiten im Backend eingebunden werden können. Im zweiten Teil des // | ||
Im Key des // | Im Key des // | ||
Zeile 97: | Zeile 101: | ||
} | } | ||
# Nummerierung = ID des BackendLayouts! | # Nummerierung = ID des BackendLayouts! | ||
- | | + | |
- | | + | |
- | | + | |
- | | + | |
default = TEXT | default = TEXT | ||
- | default.value = fileadmin/ | + | default.value = EXT: |
} | } | ||
} | } | ||
</ | </ | ||
+ | |||
+ | ==== 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:// | ||