Fluid Templates 

01.01.1970 29

Fluid Templates

Fluid ist eine leistungsstarke TYPO3 eigene Template Engine die erstmalig in der TYPO3 Version 4.3 eingeführt wurde. Sie kann sowohl für Seitentemplates (stand-alone Templates) wie auch für die Ausgabe innerhalb Extbase Extensions genutzt werden. Zunächst müssen wir unserem Page Object mitteilen, das wir ein Fluidtemplate benutzen wollen - das geschieht mit der Zeile: 
page.10 = FLUIDTEMPLATE
Danach definieren wir den Pfad zum Template und können direkt einige Variabeln und Konstanten an das Template übergeben: 
page = PAGE
 page {
     typeNum = 0
     10 = FLUIDTEMPLATE
     10 {
         template = FILE
         template.file = fileadmin/Templates/MyTemplate.html
         partialRootPath = fileadmin/templates/Partial/
         layoutRootPath = fileadmin/templates/Layouts/

         variables {
             mylabel = TEXT
            mylabel.value = Label coming from TypoScript!
         }

         settings {
            # Get the copyright year from a TypoScript constant.
            copyrightYear = {$year}
        }
    }
}
Die Angabe des Partial- und Layout root path sind optional, sofern man allerdings in seinem Template mit Layouts und Partials arbeitet, müssen die Pfade hier definiert werden. Im Template können wir mit {mylabel} und {settings.copyrightYear} auf unsere Variabeln zugreifen.

Verknüpfung von Backend- und Frontend Templates

Benötigt man unterschiedliche Templates (z.B. 2- und 3-spaltige Seitenausgaben), so kann man diese direkt mit entsprechenden Backend-Templates verknüpfen: 
page {
     10 = FLUIDTEMPLATE 
     10 {
         file.stdWrap.cObject = CASE
         file.stdWrap.cObject {
             key.data = levelfield:-1, backend_layout_next_level, slide
              key.override.field = backend_layout

             2 = TEXT
             2.value = fileadmin/templates/MyTemplate-3-cols.html
             2.insertData = 1

             1 = TEXT
             1.value = fileadmin/templates/MyTemplate-1-cols.html
             1.insertData = 1

             default = TEXT
             default.value = fileadmin/templates/MyTemplate-2-cols.html
             default.insertData = 1
         }

         partialRootPath = fileadmin/templates/Partial/
         layoutRootPath = fileadmin/templates/Layout/

         variables {
             ....
         }
     }
 }
Bei diesem Beispielsetup benötigen wir auf der Rootseite ein Backendtemplate mit der uid = 1 für ein 1-spaltiges und mit der uid = 2 ein 3-spaltiges Layout.

Inhalte mit Fluid Templates ausgeben

In den meisten Fällen wird man seinen Content mit hilfe der csc_styled_content parsen. Diese Systemextension muss zunächst im Template unter "include static from extensions" hinzugefügt werden. Für jede im Backendlayout angelegte Spaltennummer holen wir uns jetzt den Content: 
lib.content0 < styles.content.get

lib.content1 < styles.content.get
lib.content1.select.where = colPos = 1

lib.content2 < styles.content.get
lib.content2.select.where = colPos = 2
...
Innerhalb unseres Fluid Templates können wir jetzt die Inhalte mit 
<f:cObject typoscriptObjectPath="lib.content0 />
ausgeben.

Das Fluid Template

Unterhalb des Pfades den wir im Setup angelegt haben können wir jetzt unser Fluid Template anlegen. Das Fluidtemplate ist eine normale html Datei ohne header und body Tag. Beispiel für eine 2-spaltige Ansicht im html5 markup: 
<div class="wrapper">
     <article>
         <f:cobject typoscriptobjectpath="lib.content0 / >
    </article>
    <aside>
        <f:cObject typoscriptObjectPath="lib.content1 / >
    </aside>
    <footer>
        My footer content here.
    </footer>
</div>