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>
Empfehlenswerte Lektüre:

HTML5 Handbuch

Stefan Münz (Gründer von SELFHTML) geht in der 10. Auflage seines Bestsellers auf die Besonderheiten von HTML5 und CSS3 ein. Dabei wird ebenso die Ausgabe auf Smaptphones und Handys berücksichtigt, wie auch jQuery als Scriptsprache. Damit ist das Buch ein wertvoller Ratgeber für alle die Webseiten entwickeln unabhängig vom eingesetztem CMS System.

Weitere Artikel zu diesem Thema:

Kommentare

keine Kommentare vorhanden


Kommentar verfassen

Die Email Adresse wird nicht veröffentlicht.