Benutzer-Werkzeuge

Webseiten-Werkzeuge


typo3:templating:fluidtemplate

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

Link zu der Vergleichsansicht

Beide Seiten, vorherige ÜberarbeitungVorherige Überarbeitung
Nächste Überarbeitung
Vorherige Überarbeitung
typo3:templating:fluidtemplate [2013/12/28 16:50] – [Typoscript] admintypo3: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.
 +
 Bei Fluid Templates wird die HTML-Vorlage in mehrere Teile zerlegt: 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).   * **Layout:** Enthält die Elemente, die auf allen Webseiten einheitlich bleiben (z.B. Header und Footer).
Zeile 8: 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 21: Zeile 23:
   10 = FLUIDTEMPLATE   10 = FLUIDTEMPLATE
   10 {   10 {
-    file = fileadmin/fluid/Resources/Private/Templates/2-columns.html +    file = EXT:templates/Resources/Private/Templates/2-columns.html 
-    layoutRootPath = fileadmin/fluid/Resources/Private/Layouts/ +    layoutRootPath = EXT:templates/Resources/Private/Layouts/ 
-    partialRootPath = fileadmin/fluid/Resources/Private/Partials/+    partialRootPath = EXT:templates/Resources/Private/Partials/
          
     variables {     variables {
Zeile 37: Zeile 39:
         [...]         [...]
       }       }
 +    }
   }   }
 } }
 </code> </code>
-==== Ein Template ====+==== Ein erstes Template ====
 Beispiel für ein zweispaltiges Template\\ Beispiel für ein zweispaltiges Template\\
-//fileadmin/fluid/Resources/Private/Templates/2columns.html//+//EXT:templates/Resources/Private/Templates/2columns.html//
 <code html> <code html>
 <!-- Einfügen des Layouts (Dateiname ohne Endung) --> <!-- Einfügen des Layouts (Dateiname ohne Endung) -->
-<f:layout name="defaultLayout" />+<f:layout name="DefaultLayout" />
  
 <f:section name="body"> <f:section name="body">
Zeile 63: Zeile 66:
 ==== Das Layout ==== ==== Das Layout ====
 Beispiel für ein grundlegendes Layout\\ Beispiel für ein grundlegendes Layout\\
-//fileadmin/fluid/Resources/Private/Layouts/defaultLayout.html//+//EXT:templates/Resources/Private/Layouts/DefaultLayout.html//
 <code html> <code html>
 <div id="wrapper"> <div id="wrapper">
Zeile 80: Zeile 83:
 ---- ----
 ===== Einbindung eines HTML-Templates abhängig vom BackendLayout ===== ===== Einbindung eines HTML-Templates abhängig vom BackendLayout =====
-Verknüpfung der HTML-Templates (z.Bzwei- und dreispaltig) mit den (zuvor angelegten) BackendLayoutsWenn in der aktuellen Seite kein Template/BackendLayout eingebunden istnutze das Template der darüber liegenden Seite. Falls bis zum root kein Template zu finden ist, nutze den default-Wert.+ 
 +==== TYPO3 4.5 bis TYPO3 7.4 ==== 
 + 
 +Zu den HTML-Templates werden passende BackendLayouts angelegt, welche auf den Seiten im Backend eingebunden werden könnenIm zweiten Teil des //cObjects// ''CASE'' werden sie einander zugeordnet.\\ 
 +Im Key des //cObjects// ''CASE'' wird ausgelesen, welches BackendLayout einer Seite zugewiesen wurdeFalls der aktuellen Seite kein BackendLayout zugewiesen wurdesoll das Template der darüber liegenden Seite genutzt werden. Falls bis zum root kein BackendLayout zu finden ist, wird der default-Wert genutzt.
 <code typoscript> <code typoscript>
 page.10 = FLUIDTEMPLATE page.10 = FLUIDTEMPLATE
Zeile 87: Zeile 94:
   file.cObject {   file.cObject {
     key {     key {
-    # -1 = aktuelle Seite | backend_etc = Feld in der Datenbank | slide = am rootPath entlang nach oben suchen+      # -1 = aktuelle Seite | backend_etc = Feld in der Datenbank | slide = am rootPath entlang nach oben suchen
       data = levelfield:-1, backend_layout_next_level, slide       data = levelfield:-1, backend_layout_next_level, slide
       override {       override {
-      data = TSFE:page|backend_layout+        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
   }   }
-  # 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 
 } }
 </code> </code>
 +
 +==== ab TYPO3 7.5 ====
 +
 +In dieser Version wurde die Option ''pagelayout'' eingeführt, um die Zuweisung von Templates mit Backend-Layouts zu vereinfachen:
 +
 +<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: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
 +  }
 +}
 +</code>
 +
 +----
 +
 +===== 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:templates/Resources/Public/Images/BackendLayouts/BELayout_9-3.png
 +  }
 +}
 +</code>
 +
 +Zu beachten ist, dass BackendLayouts aus der TSconfig das Präfix ''%%pagets__%%'' erhalten, um nicht mit manuell erstellten Layouts zu kollidieren.
 +
 +<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: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
 +  }
 +}
 +</code>
 +
 +----
 +
 +===== 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]
 +</code>
 +
 +**Fluid-Template:**
 +<code html>
 +<f:if condition="settings.mySetting">do something</f:if>
 +</code>
 +
 +----
 +
 +===== 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:**
 +<code html>
 +<f:section name="HeaderAssets">
 +    <!-- zusätzliche Inhalte im <head> -->
 +</f:section>
 +
 +<f:section name="FooterAssets">
 +    <!-- zusätzliche Inhalte vor </body> -->
 +</f:section>
 +</code>
 +
 +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 =====
 +
 +<code html>
 +<f:alias map="{footerClassList: 'c-site-footer  c-site-footer--dark'}">
 +    <f:render partial="Site/Footer" arguments="{_all}"/>
 +</f:alias>
 +</code>
 +
 +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 ''<aside>'' Bereiche, die nicht auf jeder Unterseite enthalten sind.
 +
 +**Voraussetzung:** das TypoScript-Objekt [[https://docs.typo3.org/c/typo3/cms-fluid-styled-content/master/en-us/Installation/InsertingContentPageTemplate/Index.html|lib.dynamicContent]] muss vorhanden sein! Dies ist kein Teil des TYPO3-Kerns und muss selbst ergänzt werden.
 +
 +Die Vorgehensweise mit ''cObject'' und Variablenzuweisung hat zudem den Vorteil, dass nur eine Datenbankabfrage erfolgen muss.
 +
 +<code html>
 +{f:cObject(typoscriptObjectPath: 'lib.dynamicContent', data: {colPos: 0}) -> f:variable(name: 'content')}
 +<f:if condition="{content}">
 +    <aside class="optional-stuff">
 +        // Render stuff
 +    </aside>
 +</f:if>
 +</code>
 +
 +Quelle: [[https://stackoverflow.com/a/53652375/|Claus Due auf StackOverflow]]
 +
 +----
 +
 +===== Condition für alternatives Fluid-Layout =====
 +
 +Eine ''f:if''-Condition kann problemlos innerhalb des ''name''-Arguments verwendet werden. Eine Condition um den ''f:layout''-Viewhelper herum würde aber nicht funktionieren.
 +
 +<code html>
 +<f:layout name="{f:if(condition: '{data.someData} == 123', then: 'SpecialLayout', else: 'Default')}" />
 +</code>
 +
 +Quelle: [[https://stackoverflow.com/a/53300737/|Rudy Gnodde auf StackOverflow]]
  
typo3/templating/fluidtemplate.1388245835.txt.gz · Zuletzt geändert: 2015/12/03 19:30 (Externe Bearbeitung)