TYPO3 Fluid: Die Template-Engine im Überblick

Mit der Template-Engine TYPO3 Fluid passen Sie PHP-basierte Web­pro­jek­te in­di­vi­du­ell an, um eine Ausgabe in HTML, CSS oder Ja­va­Script im Frontend zu er­leich­tern. Hierzu verwendet TYPO3 Fluid Schleifen, Variablen und View­Hel­per, um Inhalte als Templates wie­der­zu­ver­wen­den – ganz ohne Vor­kennt­nis­se in PHP.

Was ist TYPO3 FLUID?

TYPO3 Fluid ist eine leis­tungs­star­ke und flexible Template-Engine für das CMS TYPO3. Basierend auf XML wurde sie speziell für TYPO3 ent­wi­ckelt und ist daher fester Be­stand­teil des Kern­sys­tems. Sie ver­ein­facht die Er­stel­lung, Ver­wal­tung und Op­ti­mie­rung dy­na­mi­scher Webseiten und PHP-Projekte und bietet Nut­ze­rin­nen und Nutzer ohne tief­ge­hen­de PHP-Kennt­nis­se viele Vorteile.

Kern­aspekt von Fluid sind TYPO3-Templates, bei denen die Dar­stel­lung (Prä­sen­ta­ti­on) klar von dem zu­grun­de­lie­gen­den Code und der Ge­schäfts­lo­gik getrennt bleibt. Diese Trennung basiert auf der Ver­wen­dung einer MVC-Ar­chi­tek­tur (Model-View-Con­trol­ler) und der spe­zi­el­len TYPO3-Template-Syntax, die auch TYPO3-Fluid-Syntax genannt wird. Die Fluid-Template-Sprache kom­bi­niert die Skript­spra­che PHP und die Aus­zeich­nungs­spra­che HTML und er­leich­tert die Kreation von Web­pro­jek­ten mit dy­na­mi­schen Elementen.

Die wich­tigs­ten Grund­la­gen von TYPO3 Fluid

Wenn Sie eine TYPO3-Website erstellen, kann es hilfreich sein, die Grund­säu­len der TYPO3-Fluid-Ar­chi­tek­tur zu kennen. Die wich­tigs­ten Elemente, Funk­tio­nen und Werkzeuge haben wir in den nach­fol­gen­den Ab­schnit­ten für Sie zu­sam­men­ge­fasst.

Templates

Fluid Templates sorgen durch vor­de­fi­nier­te HTML-Struktur-Vorlagen für eine einfache, struk­tu­rier­te Inhalts- und Da­ten­aus­ga­be Ihrer Web­pro­jek­te. Die Engine ver­ar­bei­tet diese Templates und er­leich­tert die Er­stel­lung dy­na­mi­scher Websites. Mit Fluid-Tags und View­Hel­pers können Sie Code-Elemente wie­der­ho­len, anpassen und ma­ni­pu­lie­ren, um über­sicht­li­che Er­geb­nis­se und einen sauberen Code zu erhalten.

View­Hel­pers

View­Hel­pers sind vor­de­fi­nier­te Code-Elemente in Templates, die spe­zia­li­sier­te Aufgaben wie Da­ten­for­ma­tie­rung oder die Er­stel­lung und Ein­bin­dung wie­der­ver­wend­ba­rer In­halts­blö­cke über­neh­men. Sie er­leich­tern das Einbinden komplexer Aufgaben und Inhalte, sodass Sie zum Beispiel bequem Da­tums­an­ga­ben for­ma­tie­ren oder Pro­dukt­lis­ten anzeigen lassen können. Durch TYPO3 View­Hel­pers führen Sie Aufgaben wie For­ma­tie­run­gen, logische Ope­ra­tio­nen oder Schleifen elegant und über­sicht­lich durch und halten Ihren Code klar, eindeutig und sauber. So müssen Sie Code-Elemente, die sich häufig wie­der­ho­len, nicht jedes Mal neu erstellen, sondern können diese statt­des­sen über View­Hel­per in­te­grie­ren

Partials

Partials sind modulare und wie­der­ver­wend­ba­re Be­stand­tei­le von Templates, die häufig benötigte Ab­schnit­te wie Header oder Footer kapseln. Auf diese Weise er­mög­li­chen sie eine ef­fi­zi­en­te und schnelle Wie­der­ver­wen­dung und ver­ein­fa­chen die Ver­wal­tung Ihrer Layouts.

Layouts

Bei Layouts handelt es sich um optionale Dateien, die von Vorlagen gemeinsam genutzt werden, um spezielle Template-Elemente zu rendern. Sie helfen Ihnen, Websites schnell zu struk­tu­rie­ren und je nach Bedarf an­schau­li­cher, ein­heit­li­cher oder ab­wechs­lungs­rei­cher zu gestalten.

Models

Models sind abstrakte Re­prä­sen­ta­tio­nen von Datenbank-Schemata, die als Da­ten­ver­wal­tungs­ein­hei­ten die Struktur, Ei­gen­schaf­ten und Regeln für Daten de­fi­nie­ren. Als „Da­ten­ma­na­ger“ steuern sie, wie In­for­ma­tio­nen ge­spei­chert, be­ar­bei­tet und im Template be­reit­ge­stellt werden. Zum Beispiel legen Models fest, wie ein Artikel mit Datum, Autor und Textbild struk­tu­riert und angezeigt wird.

Con­trol­ler

Con­trol­ler agieren wie das „Gehirn“ Ihrer TYPO3-Anwendung. Sie kon­trol­lie­ren und steuern den Austausch von Daten zwischen Anzeige und Datenbank. Con­trol­ler führen einzelne oder mehrere Aufgaben, auch „Actions“ genannt, durch. Hierzu enthalten sie die nötige Logik, um Anfragen und Abrufe zu ver­ar­bei­ten, er­for­der­li­che Daten abzurufen und diese an das Template zur Ausgabe wei­ter­zu­ge­ben.

Be­din­gun­gen

Durch logische Prüfungen erlauben es Be­din­gun­gen, Template-Ab­schnit­te nur unter be­stimm­ten Vor­aus­set­zun­gen an­zu­zei­gen oder aus­zu­blen­den. Sie sorgen für eine dy­na­mi­sche Anpassung Ihrer Templates und Inhalte basierend auf aktuellen Daten oder er­for­der­li­chen Kriterien.

Variablen

Variablen sind separate Elemente, die als Platz­hal­ter für Daten fungieren und in ver­schie­de­nen Templates verwendet werden können. Als ge­mein­sa­me Elemente haben sie den Vorteil, dass sie durch dy­na­mi­sche Be­zeich­nun­gen für mehr Anzeige- und Aus­ga­be­mög­lich­kei­ten sorgen. Möglich machen das wie­der­ver­wend­ba­re Code-Snippets, die Sie über den Con­trol­ler flexibel in Ihre Templates einbinden können.

Schleifen

Schleifen er­mög­li­chen als Steu­er­struk­tu­ren das wie­der­hol­te Durch­lau­fen von Da­ten­sät­zen oder Listen innerhalb Ihrer Templates. Dazu zählen zum Beispiel Listen von Blog­bei­trä­gen oder von Kom­men­ta­ren unter einem Artikel. Innerhalb einer Schleife lassen sich Daten zudem nach Bedarf for­ma­tie­ren, um eine wunsch­ge­mä­ße Anzeige und Struk­tu­rie­rung um­zu­set­zen.

Häufige Ver­wen­dungs­zwe­cke von TYPO3 Fluid

Als wahrer Al­les­kön­ner und kos­ten­lo­ses, platt­form­un­ab­hän­gi­ges Open-Source-CMS zählt TYPO3 in Deutsch­land zu den am meisten genutzten CMS. Da Fluid in­te­gra­ler Be­stand­teil von TYPO3 ist, kommt TYPO3 Fluid für viel­fäl­ti­ge Web­pro­jek­te und Branchen zum Einsatz.

Dazu zählen:

• Online-Shops: Mit Fluid lassen sich Elemente von Online-Shops wie Pro­dukt­sei­ten, Wa­ren­korb­an­sich­ten oder Preis­an­ga­ben dynamisch oder statisch anzeigen. Zudem bleiben Pro­dukt­in­for­ma­tio­nen mit Fluid stets aktuell.
• Website-Designs: Durch Tools wie View­Hel­pers, Partials und Layouts lassen sich Websites nach in­di­vi­du­el­len Vor­stel­lun­gen und ohne um­fas­sen­de Pro­gram­mier­kennt­nis­se erstellen. Durch wie­der­ver­wend­ba­re Partials, Variablen und Layouts sorgen Sie für einen sauberen Code und eine über­sicht­li­che Do­ku­ment­struk­tur Ihrer Websites. Zudem lassen sich sowohl ab­wechs­lungs­rei­che als auch kon­sis­ten­te Designs für Websites und Un­ter­sei­ten erstellen.
• Blogs und Nach­rich­ten­por­ta­le: Um Blogs oder Seiten für Nach­rich­ten­ar­ti­kel über­sicht­lich und zugleich an­spre­chend zu gestalten, er­mög­licht Fluid eine dy­na­mi­sche Dar­stel­lung sowie eine über­sicht­li­che Anzeige durch Bei­trags­lis­ten und De­tail­sei­ten. Zudem sorgen Sie für ein­heit­li­che Layouts – von Sei­ten­struk­tu­ren bis hin zur Anzeige von Titel, Autor oder Datum.
• Community-Portale: Mit Fluid gestalten Sie mühelos ver­schie­de­ne Be­nut­zer­pro­fi­le, Foren und Un­ter­fo­ren oder Community-Nach­rich­ten und ga­ran­tie­ren eine in­di­vi­du­el­le Be­nut­zer­er­fah­rung.
• Fir­men­in­tra­nets: Dank Fluid ist bei der Ge­stal­tung von internen In­for­ma­ti­ons­sei­ten, Mit­ar­bei­ter- und Kon­takt­ver­zeich­nis­sen oder Res­sour­cen für Klarheit und Über­sicht­lich­keit gesorgt.

Welche Vorteile bietet TYPO3 Fluid?

Zu den wich­tigs­ten Vorteilen von TYPO3 Fluid zählen die folgenden:

• Template-Er­stel­lung und Lay­out­ge­stal­tung: Fluid trennt Inhalte und Ge­schäfts­lo­gik von Anzeige und Layout, indem HTML-Templates mit Platz­hal­tern, Variablen und View­Hel­pern zum Einsatz kommen.
• Sauberer, klarer und kon­sis­ten­ter Code: Da Sie für wie­der­keh­ren­de Elemente nicht neuen Code erstellen müssen, sorgen Sie für eine saubere, klare Struk­tu­rie­rung, mehr Kon­sis­tenz und einfache Code-Pflege nach den SOLID Prin­ci­ples.
• Da­ten­ein­bin­dung und dy­na­mi­sche Inhalte: Durch Variablen, Schleifen und View­Hel­per er­mög­licht Fluid die dy­na­mi­sche Ein­bin­dung von Daten und aktuellen Inhalten aus der TYPO3-Datenbank in Templates.
• In­te­gra­ti­on mit TYPO3-Funk­tio­nen: Durch Fluid sorgen Sie für eine nahtlose In­te­gra­ti­on mit TYPO3 und verlassen sich auf eine ef­fi­zi­en­te Kom­bi­na­ti­on und Ver­knüp­fung von Template und Backend.
• Hohe Si­cher­heit: Durch hohe Si­cher­heits­stan­dards, au­to­ma­ti­sche Escaping-Me­cha­nis­men gegen Cross-Site-Scripting, sichere Da­ten­zu­grif­fe per Con­trol­ler sowie die nahtlose In­te­gra­ti­on ver­schie­de­ner Inhalte in Templates beugen Sie häufigen Si­cher­heits­lü­cken vor.

Wie funk­tio­niert die In­stal­la­ti­on von TYPO3 Fluid?

TYPO3 Fluid ist ein zentraler und fester Be­stand­teil von TYPO3, weshalb es genügt, TYPO3 zu in­stal­lie­ren. Hierbei ist zu beachten, dass die Kern­ver­si­on von TYPO3 in der Regel auch die Version von Fluid bestimmt. Eine zu­sätz­li­che In­stal­la­ti­on oder Kon­fi­gu­ra­ti­on ist nicht er­for­der­lich. Darüber hinaus finden Sie im TYPO3 Extension Re­po­si­to­ry zahl­rei­che TYPO3-Fluid-Er­wei­te­run­gen mit zu­sätz­li­chen Funk­tio­nen.

Code-Beispiel für TYPO3 Fluid

An einem einfachen Fluid-Code-Snippet in der Backend- und Frontend-Version ver­an­schau­li­chen wir Ihnen, welche Vorteile Fluid für über­sicht­li­che Code-Er­stel­lung und dy­na­mi­sches Website-Design bietet.

Backend:

<h4>Dies ist meine Headline</h4>
<p>
    <f:if condition="{inhalt}">
        <f:then>
            {variable1}
        </f:then>
        <f:else>
            {variable2}
        </f:else>
    </f:if>
</p>

Der Code erklärt sich dabei wie folgt:

• Bedingung <f:if>: Das f:if-Tag prüft, ob die Variable {inhalt} gesetzt oder nicht leer ist.
• Then-Block <f:then>: Wenn {inhalt} wahr (gesetzt/nicht leer) ist, wird {variable1} angezeigt.
• Else-Block <f:else>: Wenn {inhalt} falsch (nicht gesetzt/leer) ist, wird {variable2} angezeigt.

Frontend:

<h4>Dies ist meine Headline</h4>
<p>Dies ist der Inhalt meiner Variable "Variable1"</p>