TYPO3 Fluid: Die Template-Engine im Überblick

Mit der Template-Engine TYPO3 Fluid passen Sie PHP-basierte Webprojekte individuell an, um eine Ausgabe in HTML, CSS oder JavaScript im Frontend zu erleichtern. Hierzu verwendet TYPO3 Fluid Schleifen, Variablen und ViewHelper, um Inhalte als Templates wiederzuverwenden – ganz ohne Vorkenntnisse in PHP.

Was ist TYPO3 FLUID?

TYPO3 Fluid ist eine leistungsstarke und flexible Template-Engine für das CMS TYPO3. Basierend auf XML wurde sie speziell für TYPO3 entwickelt und ist daher fester Bestandteil des Kernsystems. Sie vereinfacht die Erstellung, Verwaltung und Optimierung dynamischer Webseiten und PHP-Projekte und bietet Nutzerinnen und Nutzer ohne tiefgehende PHP-Kenntnisse viele Vorteile.

Kernaspekt von Fluid sind TYPO3-Templates, bei denen die Darstellung (Präsentation) klar von dem zugrundeliegenden Code und der Geschäftslogik getrennt bleibt. Diese Trennung basiert auf der Verwendung einer MVC-Architektur (Model-View-Controller) und der speziellen TYPO3-Template-Syntax, die auch TYPO3-Fluid-Syntax genannt wird. Die Fluid-Template-Sprache kombiniert die Skriptsprache PHP und die Auszeichnungssprache HTML und erleichtert die Kreation von Webprojekten mit dynamischen Elementen.

Die wichtigsten Grundlagen von TYPO3 Fluid

Wenn Sie eine TYPO3-Website erstellen, kann es hilfreich sein, die Grundsäulen der TYPO3-Fluid-Architektur zu kennen. Die wichtigsten Elemente, Funktionen und Werkzeuge haben wir in den nachfolgenden Abschnitten für Sie zusammengefasst.

Templates

Fluid Templates sorgen durch vordefinierte HTML-Struktur-Vorlagen für eine einfache, strukturierte Inhalts- und Datenausgabe Ihrer Webprojekte. Die Engine verarbeitet diese Templates und erleichtert die Erstellung dynamischer Websites. Mit Fluid-Tags und ViewHelpers können Sie Code-Elemente wiederholen, anpassen und manipulieren, um übersichtliche Ergebnisse und einen sauberen Code zu erhalten.

ViewHelpers

ViewHelpers sind vordefinierte Code-Elemente in Templates, die spezialisierte Aufgaben wie Datenformatierung oder die Erstellung und Einbindung wiederverwendbarer Inhaltsblöcke übernehmen. Sie erleichtern das Einbinden komplexer Aufgaben und Inhalte, sodass Sie zum Beispiel bequem Datumsangaben formatieren oder Produktlisten anzeigen lassen können. Durch TYPO3 ViewHelpers führen Sie Aufgaben wie Formatierungen, logische Operationen oder Schleifen elegant und übersichtlich durch und halten Ihren Code klar, eindeutig und sauber. So müssen Sie Code-Elemente, die sich häufig wiederholen, nicht jedes Mal neu erstellen, sondern können diese stattdessen über ViewHelper integrieren

Partials

Partials sind modulare und wiederverwendbare Bestandteile von Templates, die häufig benötigte Abschnitte wie Header oder Footer kapseln. Auf diese Weise ermöglichen sie eine effiziente und schnelle Wiederverwendung und vereinfachen die Verwaltung 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 strukturieren und je nach Bedarf anschaulicher, einheitlicher oder abwechslungsreicher zu gestalten.

Models

Models sind abstrakte Repräsentationen von Datenbank-Schemata, die als Datenverwaltungseinheiten die Struktur, Eigenschaften und Regeln für Daten definieren. Als „Datenmanager“ steuern sie, wie Informationen gespeichert, bearbeitet und im Template bereitgestellt werden. Zum Beispiel legen Models fest, wie ein Artikel mit Datum, Autor und Textbild strukturiert und angezeigt wird.

Controller

Controller agieren wie das „Gehirn“ Ihrer TYPO3-Anwendung. Sie kontrollieren und steuern den Austausch von Daten zwischen Anzeige und Datenbank. Controller führen einzelne oder mehrere Aufgaben, auch „Actions“ genannt, durch. Hierzu enthalten sie die nötige Logik, um Anfragen und Abrufe zu verarbeiten, erforderliche Daten abzurufen und diese an das Template zur Ausgabe weiterzugeben.

Bedingungen

Durch logische Prüfungen erlauben es Bedingungen, Template-Abschnitte nur unter bestimmten Voraussetzungen anzuzeigen oder auszublenden. Sie sorgen für eine dynamische Anpassung Ihrer Templates und Inhalte basierend auf aktuellen Daten oder erforderlichen Kriterien.

Variablen

Variablen sind separate Elemente, die als Platzhalter für Daten fungieren und in verschiedenen Templates verwendet werden können. Als gemeinsame Elemente haben sie den Vorteil, dass sie durch dynamische Bezeichnungen für mehr Anzeige- und Ausgabemöglichkeiten sorgen. Möglich machen das wiederverwendbare Code-Snippets, die Sie über den Controller flexibel in Ihre Templates einbinden können.

Schleifen

Schleifen ermöglichen als Steuerstrukturen das wiederholte Durchlaufen von Datensätzen oder Listen innerhalb Ihrer Templates. Dazu zählen zum Beispiel Listen von Blogbeiträgen oder von Kommentaren unter einem Artikel. Innerhalb einer Schleife lassen sich Daten zudem nach Bedarf formatieren, um eine wunschgemäße Anzeige und Strukturierung umzusetzen.

Häufige Verwendungszwecke von TYPO3 Fluid

Als wahrer Alleskönner und kostenloses, plattformunabhängiges Open-Source-CMS zählt TYPO3 in Deutschland zu den am meisten genutzten CMS. Da Fluid integraler Bestandteil von TYPO3 ist, kommt TYPO3 Fluid für vielfältige Webprojekte und Branchen zum Einsatz.

Dazu zählen:

• Online-Shops: Mit Fluid lassen sich Elemente von Online-Shops wie Produktseiten, Warenkorbansichten oder Preisangaben dynamisch oder statisch anzeigen. Zudem bleiben Produktinformationen mit Fluid stets aktuell.
• Website-Designs: Durch Tools wie ViewHelpers, Partials und Layouts lassen sich Websites nach individuellen Vorstellungen und ohne umfassende Programmierkenntnisse erstellen. Durch wiederverwendbare Partials, Variablen und Layouts sorgen Sie für einen sauberen Code und eine übersichtliche Dokumentstruktur Ihrer Websites. Zudem lassen sich sowohl abwechslungsreiche als auch konsistente Designs für Websites und Unterseiten erstellen.
• Blogs und Nachrichtenportale: Um Blogs oder Seiten für Nachrichtenartikel übersichtlich und zugleich ansprechend zu gestalten, ermöglicht Fluid eine dynamische Darstellung sowie eine übersichtliche Anzeige durch Beitragslisten und Detailseiten. Zudem sorgen Sie für einheitliche Layouts – von Seitenstrukturen bis hin zur Anzeige von Titel, Autor oder Datum.
• Community-Portale: Mit Fluid gestalten Sie mühelos verschiedene Benutzerprofile, Foren und Unterforen oder Community-Nachrichten und garantieren eine individuelle Benutzererfahrung.
• Firmenintranets: Dank Fluid ist bei der Gestaltung von internen Informationsseiten, Mitarbeiter- und Kontaktverzeichnissen oder Ressourcen für Klarheit und Übersichtlichkeit gesorgt.

Welche Vorteile bietet TYPO3 Fluid?

Zu den wichtigsten Vorteilen von TYPO3 Fluid zählen die folgenden:

• Template-Erstellung und Layoutgestaltung: Fluid trennt Inhalte und Geschäftslogik von Anzeige und Layout, indem HTML-Templates mit Platzhaltern, Variablen und ViewHelpern zum Einsatz kommen.
• Sauberer, klarer und konsistenter Code: Da Sie für wiederkehrende Elemente nicht neuen Code erstellen müssen, sorgen Sie für eine saubere, klare Strukturierung, mehr Konsistenz und einfache Code-Pflege nach den SOLID Principles.
• Dateneinbindung und dynamische Inhalte: Durch Variablen, Schleifen und ViewHelper ermöglicht Fluid die dynamische Einbindung von Daten und aktuellen Inhalten aus der TYPO3-Datenbank in Templates.
• Integration mit TYPO3-Funktionen: Durch Fluid sorgen Sie für eine nahtlose Integration mit TYPO3 und verlassen sich auf eine effiziente Kombination und Verknüpfung von Template und Backend.
• Hohe Sicherheit: Durch hohe Sicherheitsstandards, automatische Escaping-Mechanismen gegen Cross-Site-Scripting, sichere Datenzugriffe per Controller sowie die nahtlose Integration verschiedener Inhalte in Templates beugen Sie häufigen Sicherheitslücken vor.

Wie funktioniert die Installation von TYPO3 Fluid?

TYPO3 Fluid ist ein zentraler und fester Bestandteil von TYPO3, weshalb es genügt, TYPO3 zu installieren. Hierbei ist zu beachten, dass die Kernversion von TYPO3 in der Regel auch die Version von Fluid bestimmt. Eine zusätzliche Installation oder Konfiguration ist nicht erforderlich. Darüber hinaus finden Sie im TYPO3 Extension Repository zahlreiche TYPO3-Fluid-Erweiterungen mit zusätzlichen Funktionen.

Code-Beispiel für TYPO3 Fluid

An einem einfachen Fluid-Code-Snippet in der Backend- und Frontend-Version veranschaulichen wir Ihnen, welche Vorteile Fluid für übersichtliche Code-Erstellung und dynamisches 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>