TYPO3-Fluid-Leitfaden: 50+ Best Practices, ViewHelpers, Tipps & fortgeschrittene Beispiele

TYPO3 Fluid ist die Frontend-Template-Engine von TYPO3 CMS, die verwendet wird, um saubere, wartbare und flexible Templates zu erstellen. Fluid zu beherrschen ist essenziell für TYPO3 Integratoren, Frontend-Entwickler und Backend-Entwickler, die ein effizientes Template-Management wünschen.

In diesem Blog finden Sie praktische Tipps, Beispiele und Best Practices für TYPO3 Fluid, einschließlich Variablen, Inline-Notation, Partials, Layouts und mehr. Diese Tipps basieren auf realen TYPO3-Projekten und Erfahrungen aus dem TYPO3-Fluid-Ökosystem.

Wenn Sie neu bei Fluid sind, lesen Sie den Leitfaden „So verwenden Sie TYPO3 Fluid – von Basic bis Advanced“, bevor Sie fortfahren.

Was ist TYPO3 Fluid?

„TYPO3 Fluid ist eine schnelle, sichere und erweiterbare Template-Engine für PHP.“ – typo3.org

TYPO3 Fluid ist die Frontend-Template-Engine des TYPO3 CMS, die entwickelt wurde, um HTML/CSS/JavaScript von PHP-Logik zu trennen. Sie ermöglicht es Entwicklern und Integratoren, saubere, wartbare Templates zu erstellen, ohne tiefgehende PHP-Kenntnisse zu benötigen.

Was ist TYPO3 Fluid?

• TYPO3 Fluid ist eine Template-Engine, die dynamische Inhalte in TYPO3-Websites rendert.
• Sie ermöglicht strukturierte Templates mit Layouts, Partials und wiederverwendbaren Komponenten.
• Unterstützt moderne TYPO3-Versionen (v10–v14) und integriert sich mit Extbase und anderen TYPO3 extensions.

Warum TYPO3 Fluid verwendet

• Trennt Präsentation von Logik, was die Wartung der Templates erleichtert.
• Bietet leistungsstarke ViewHelpers für Rendering, Formatierung und Lokalisierung.
• Ermöglicht skalierbare Template-Entwicklung für kleine Websites und Unternehmensprojekte.

Fluid vs. andere Template-Engines

• Twig / Blade / plain PHP Templates: Fluid ist vollständig in TYPO3 integriert, während andere zusätzliche Einrichtung erfordern.
• Die Syntax von Fluid ist für TYPO3-Workflows ausgelegt, einschließlich Extbase- und TypoScript-Integration.
• Bietet Inline-Notation, Caching und flexible Partials, was es sehr effizient macht.

Wer TYPO3 Fluid lernen sollte

• TYPO3-Integratoren, die Templates und Inhaltsstrukturen verwalten.
• Frontend-Entwickler, die HTML/CSS/JS in TYPO3 implementieren.
• Backend-Entwickler, die dynamische Inhalte sauber rendern müssen, ohne PHP-Logik in Templates zu schreiben.

Warum dieser TYPO3 Fluid Guide anders ist

• Folgt einer Anfänger → Fortgeschrittenen Progression.
• Enthält praxisnahe Beispiele, die in TYPO3-Projekten verwendet werden.
• Fokussiert auf Leistung, Wartbarkeit und Best Practices.
• Deckt TYPO3-Versionen v10–v14 ab und stellt die Kompatibilität mit modernen Websites sicher.

Was Sie lernen werden

• Variablen und dynamische Datenverarbeitung in Fluid
• ViewHelpers und Template-Formatierung
• Rendering mit Partials und Layouts
• Techniken zur Leistungsoptimierung
• Lokalisierung für mehrsprachige Websites
• Debugging-Strategien für Templates
• Erweiterte Fluid-Architektur und wiederverwendbare Komponenten

TYPO3 Fluid Grundlagen

Bevor Sie sich mit fortgeschrittenen Tipps befassen, ist es wichtig, die Grundlagen von TYPO3 Fluid zu verstehen. Dieser Abschnitt behandelt die Template-Architektur, die Dateistruktur und die Syntax, damit Sie saubere, wartbare Templates erstellen können.

TYPO3 Fluid Architektur erklärt

TYPO3 Fluid basiert auf drei Schlüsselkonzepten:

• Templates: Die Haupt-HTML-Struktur Ihrer Seite, die Inhaltsplatzhalter und Layout-Referenzen definiert.
• Layouts: Definieren wiederverwendbare Seitenstrukturen, die von Templates erweitert werden können, um Konsistenz über mehrere Seiten hinweg zu gewährleisten.
• Partials: Kleine, wiederverwendbare Template-Fragmente, die in mehreren Templates für Modularität eingebunden werden können.

Das Verständnis dieser Konzepte ist entscheidend für skalierbare und wartbare TYPO3-Projekte.

Wie Fluid Rendering funktioniert

Wenn TYPO3 eine Seite mit Fluid rendert:

1. Extbase oder TypoScript übergibt Daten an das Template.
2. Die Template-Engine verarbeitet Layouts, Partials und Variablen.
3. HTML-Ausgabe wird dynamisch generiert und an den Browser gesendet.

Fluid Rendering Lebenszyklus

• Datenzuweisung: Variablen werden dem Template zugewiesen.
• Template-Kompilierung: Fluid analysiert das Template und wendet Caching an, falls aktiviert.
• Rendering: Variablen, Schleifen und ViewHelpers werden verarbeitet, um HTML-Ausgabe zu generieren.

TYPO3 Fluid Dateistruktur

Eine saubere Ordnerstruktur hilft, Projekte organisiert und wartbar zu halten.

Empfohlene Ordnerstruktur

Resources/
Private/
  Layouts/
  Partials/
  Templates/
    Default/

Namenskonventionen

• Vorlagen, Layouts und Partials sollten klare, beschreibende Namen haben.
• Beispiel: Templates/Blog/Show.html, Partials/Header.html, Layouts/Main.html

Organisation großer Projekte

• Gruppieren Sie Vorlagen nach Funktion oder Erweiterung.
• Verwenden Sie konsistente Namens- und Ordnerstrukturen in allen TYPO3-Projekten für eine einfachere Wartung.

Ihr erstes TYPO3 Fluid Template

Grundlegende Syntax

<f:layout name="Main" />
<f:section name="Main">
  <h1>{pageTitle}</h1>
  <p>{content}</p>
</f:section>

Variablen rendern

• Variablen werden vom Controller oder TypoScript zugewiesen.
• Greifen Sie mit der Syntax {variableName} auf sie zu..

HTML ausgeben

• Fluid gibt standardmäßig sicheres HTML aus.
• Verwenden Sie <f:format.raw>, wenn Sie vorformatiertes HTML rendern müssen.

Erklärung zum Escaping

• HTML-Zeichen werden automatisch escaped, um XSS-Probleme zu verhindern.
• Deaktivieren Sie das Escaping nur, wenn der Inhalt vertrauenswürdig und bereinigt ist.

TYPO3 Fluid Syntax Grundlagen

Inline-Notation

Ermöglicht kompakte, einzeilige Variablen- und ViewHelper-Aufrufe.

• Beispiel: {sliderElements -> f:count()} zählt Elemente inline.

Tag-basierte Syntax

• Standard-XML-ähnliche Fluid-Tags, z.B. <f:if>, <f:for>, <f:render>.

Wann man welche verwenden sollte

• Inline-Notation: Schnelle Operationen, einfache Transformationen und Berechnungen.
• Tag-basierte Syntax: Komplexe Logik, Schleifen, Bedingungen und Lesbarkeit in großen Vorlagen.

TYPO3 Fluid Variablen & Datenverarbeitung

Variablen sind das Rückgrat von TYPO3 Fluid-Templates. Zu verstehen, wie man sie erstellt, verwendet und manipuliert, ist entscheidend für dynamische, wartbare und effiziente Templates.

Wie man Variablen in TYPO3 Fluid erstellt

Verwendung von <f:variable>

<f:variable name="pageTitle" value="Welcome to TYPO3 Fluid"/>

• Weisen Sie einfache statische Werte Variablen zu, um sie in Templates zu verwenden.

Inline-Variablenzuweisung

{f:variable(name: 'header', value: 'Fluid Tipps')}

• Die Inline-Notation ist nützlich für kurze Zuweisungen und schnelle Berechnungen.

Zuweisung komplexer Ausdrücke

<f:variable name="totalPrice">{quantity * price}</f:variable>

• Fluid erlaubt arithmetische und dynamische Ausdrücke in Variablenzuweisungen.

Wie man Variablen in Fluid-Templates verwendet

Variablen ausgeben

<h1>{pageTitle}</h1>

• Variablen direkt in Ihrem HTML-Ausgabe anzeigen.

Variablen an Partials übergeben

<f:render partial="Header" arguments="{header: pageTitle}" />

• Variablen in Partial-Templates für modularen und wiederverwendbaren Code übergeben.

Gerenderten Inhalt wiederverwenden

<f:variable name="renderedHeader">{f:render(partial: 'Header')}</f:variable>
<div>{renderedHeader -> f:format.raw()}</div>

• Gerenderte Ausgabe in einer Variablen erfassen für mehrfache Verwendungen innerhalb desselben Templates.

Dynamische Variablen in TYPO3 Fluid

Zugriff auf dynamische Schlüssel

{myArray.{dynamicKey}}

• Nützlich für Schleifen oder bedingtes Rendering, wenn Schlüssel im Voraus nicht bekannt sind.

Dynamischer Objektzugriff

• Eigenschaften von Objekten dynamisch zugreifen:

{user.{propertyName}}

Dynamisches Template-Rendering

• Abschnitte oder Partials dynamisch mit Variablennamen aufrufen:

<f:render section="Section{dynamicSection}" />

Standard- & Fallback-Werte

Verwendung <von>

{variable -> f:or(alternative: 'Standardwert')}

• Stellt sicher, dass Vorlagen immer sinnvollen Inhalt anzeigen, selbst wenn die Variable null ist.

Optionale Rendering-Muster

<f:render partial="OptionalPartial" optional="1" default="Content not available"/>

• Fallback-Inhalt rendern, wenn Partials oder Abschnitte fehlen.

Aktuelle Seitendaten

<f:debug>{data}</f:debug>

• Zugriff auf Eigenschaften der aktuellen Seite, die von TYPO3 zugewiesen wurden.

Alle Template-Variablen

<f:debug>{_all}</f:debug>

• Untersuche alle Variablen, die im aktuellen Template-, Layout- oder Partialbereich verfügbar sind.

Debugging-Workflows

• Verwende {_all} und {data} in Kombination mit <f:debug> für effizientes Troubleshooting.
• Hilft, undefinierte Variablen zu identifizieren und die Template-Logik zu optimieren.

TYPO3 Fluid Bedingungen & Logik

Bedingungen ermöglichen es TYPO3 Fluid-Templates, die Ausgabe basierend auf Variablen oder dynamischen Daten anzupassen. Durch effektive Nutzung werden Templates flexibler und wartbarer.

TYPO3 Fluid If/Else Bedingungen

Grundlegende Bedingungen

<f:if condition="{userLoggedIn}">
  <p>Welcome back, {username}!</p>
</f:if>

• Inhalt nur rendern, wenn eine Bedingung wahr ist.

Verschachtelte Bedingungen

<f:if condition="{userLoggedIn}">
  <f:if condition="{isAdmin}">
      <p>Admin Panel Access</p>
  </f:if>
</f:if>

• Verwenden Sie verschachtelte <f:if> für mehrere abhängige Bedingungen.

Else-if Bedingungen

<f:if condition="{score} > 90">
  <p>Excellent</p>
  <f:else if condition="{score} > 75">Good</f:else if>
  <f:else>Needs Improvement</f:else>
</f:if>

• Bietet mehrere Zweige, ohne Templates zu überladen.

TYPO3 Fluid Ternäre Bedingungen

<p>{userLoggedIn ? 'Logout' : 'Login'}</p>

• Kurzsyntax für einfache Bedingungen.
• Reduziert unnötige <f:if> Tags für sauberere Templates.

TYPO3 Fluid Switch Case Beispiele

<f:switch expression="{userRole}">
  <f:case value="admin">Admin Panel</f:case>
  <f:case value="editor">Editor Dashboard</f:case>
  <f:defaultCase>Visitor Page</f:defaultCase>
</f:switch>

• Ideal für Mehrfachauswahl-Szenarien, um Vorlagen lesbar zu halten.

Mathematische Operationen in Fluid

<f:variable name="total">{quantity * price}</f:variable>
<p>Total: {total}</p>

• Führen Sie arithmetische Berechnungen direkt in Vorlagen durch.

TypoScript + Fluid Berechnungen

<f:cObject typoscriptObjectPath="lib.calculateTotal" data="{quantity: 5, price: 20}" />

• Kombinieren Sie TypoScript und Fluid für dynamische Berechnungen, wenn nötig.

TYPO3 Fluid Schleifen & Dateniteration

Schleifen in TYPO3 Fluid ermöglichen es Ihnen, über Arrays, Objekte oder komplexe Datenstrukturen zu iterieren, was eine dynamische Inhaltsdarstellung für Vorlagen ermöglicht. Durch effiziente Nutzung von Schleifen bleiben Vorlagen modular und wartbar.

TYPO3 Fluid For-Schleife erklärt

Grundlegendes Schleifenbeispiel

<ul>
<f:for each="{products}" as="product">
  <li>{product.name} – {product.price}</li>
</f:for>
</ul>

• Iteriert über Arrays oder Objekte, um wiederholte Inhalte anzuzeigen.

Iterationsmetadaten

<f:for each="{products}" as="product" iteration="iter">
<li class="{iter.isOdd ? 'odd' : 'even'}">
  {iter.index + 1}. {product.name}
</li>
</f:for>

• Bietet zusätzliche Informationen über die Schleife, wie Index, Zyklus, erstes, letztes, ungerade/gerade.

Iterations-Eigenschaften in Fluid

• isFirst → wahr für das erste Element in der Schleife.
• isLast → wahr für das letzte Element.
• isOdd / isEven → CSS-Klassen anwenden oder abwechselnde Stile.
• cycle / index / total → nützlich für Nummerierung oder Layout-Logik.

Gruppierte Schleifen mit {group.key}

<f:groupedFor each="{products}" groupBy="category" as="group">
<h2>{group.key}</h2>
<ul>
  <f:for each="{group.items}" as="product">
    <li>{product.name}</li>
  </f:for>
</ul>
</f:groupedFor>

• Gruppiert Elemente nach einer Eigenschaft (z.B. Kategorie) für eine organisierte Anzeige.
• Ideal für reale Szenarien wie Produktlisten oder Blogbeiträge.

Rendering komplexer verschachtelter Datenstrukturen

Arrays

<f:for each="{nestedArray}" as="item">
{item.value}
</f:for>

Objekte

<f:for each="{users}" as="user">
<p>{user.name} – {user.email}</p>
</f:for>

Mehrdimensionale Daten

<f:for each="{departments}" as="dept">
<h3>{dept.name}</h3>
<f:for each="{dept.employees}" as="employee">
  <p>{employee.name}</p>
</f:for>
</f:for>

• Fluid verarbeitet verschachtelte Arrays und Objekte sauber, wodurch Vorlagen lesbar und wartbar bleiben.

TYPO3 Fluid Rendering System

Das Rendering-System in TYPO3 Fluid ermöglicht es Entwicklern, Vorlagen effizient zu strukturieren und Code wiederzuverwenden durch Partials, Sektionen und Layouts. Der richtige Einsatz von Rendering-Funktionen stellt sicher, dass Vorlagen modular, wartbar und skalierbar sind.

TYPO3 Fluid Partials erklärt

Warum Partials wichtig sind

• Partials sind kleine wiederverwendbare Vorlagenfragmente, die in mehreren Vorlagen enthalten sind.
• Sie reduzieren Code-Duplikation und verbessern die Wartbarkeit.
• Beispielanwendungen: Header, Footer, Karten und Inhaltsblöcke.

Wiederverwendbare Vorlagenarchitektur

<f:render partial="Header" arguments="{title: pageTitle}" />

• Inhalte über mehrere Seiten hinweg wiederverwenden, ohne den Code neu zu schreiben.

Dynamische Partials & Sektionen

Dynamisches Sektionen-Rendering

<f:render section="Section{dynamicName}" />

• Sektionen dynamisch basierend auf Variablen aufrufen für flexible Vorlagenlayouts.

Dynamische Partial-Pfade

<f:render partial="{dynamicPartial}" arguments="{data: myData}" />

• Verschiedene Partials dynamisch laden, um unterschiedliche Inhaltstypen zu handhaben.

Optionale Partials

<f:render partial="OptionalPartial" optional="1" />

• Ein Partial nur wenn es existiert rendern, um Fehler und Fallback-Probleme zu vermeiden.

TYPO3-Layouts erklärt

Statische Layouts

• Feste Seitenstrukturvorlagen, die mehrere Vorlagen erweitern können.

Dynamische Layouts

<f:layout name="Custom{layoutType}" />

• Ermöglicht die Vorlagenauswahl basierend auf einer Variablen für dynamische Seitenwiedergabe.

Layout-Vererbung

• Vorlagen erben Layouts, um ein konsistentes Design über Seiten hinweg zu erhalten.
• Reduziert Duplikationen und erzwingt eine einheitliche Vorlagenstruktur.

Inhalte als Variablen rendern

Verwendung von contentAs

<f:render partial="Card" contentAs="cardContent">
<h2>{title}</h2>
<p>{description}</p>
</f:render>

• Erfassen der gerenderten Teilausgabe in einer Variablen zur Wiederverwendung oder weiteren Bearbeitung.

Eingewickelte Rendering-Techniken

• Gerenderte Inhalte in HTML-Elemente oder zusätzliche Markups einwickeln, ohne das ursprüngliche Teil zu ändern.
• Beispiel: Eine Karte in einem Container-Div für Layout-Konsistenz kapseln.

Erweiterte Rendering-Muster

Komponenten-Stil Rendering

• Behandeln Sie Partials und Abschnitte als unabhängige Komponenten mit definierten Eingaben und Ausgaben.
• Verbessert Wiederverwendbarkeit, Lesbarkeit und Wartbarkeit.

Gekapselte Frontend-Architektur

• Trennen Sie Vorlagenlogik von der Datenverarbeitung.
• Unterstützt skalierbare Enterprise-TYPO3-Projekte mit komplexen Inhaltsstrukturen.

TYPO3 Fluid ViewHelpers Deep Dive

ViewHelpers sind die Bausteine der TYPO3 Fluid-Templates. Sie bieten dynamische Funktionalität ohne PHP zu schreiben, sodass Entwickler Inhalte rendern, Daten formatieren und mit TYPO3 Backend-Funktionen interagieren können.

Wichtigste TYPO3 Fluid ViewHelpers

• <f:if> – Bedingtes Rendering.
• <f:for> – Schleife über Arrays oder Objekte.
• <f:render> – Rendern von Partials oder Sektionen.
• <f:translate> – Lokalisierung, Text aus XLIFF-Dateien abrufen. 
• <f:format.*> – Formatierungshilfen für Daten, Text und Zahlen.

TYPO3 Fluid Formatierungs-ViewHelpers

Datumsformatierung

<f:format.date format="d.m.Y">{publishDate}</f:format.date>

• Konvertiert Datumsvariablen in benutzerdefinierte Anzeigeformate.

Währungsformatierung

{price -> f:format.currency(currency: 'EUR')}

• Formatiert Zahlen als Währungen mit korrekten Dezimal- und Tausendertrennzeichen.

stripTags

{content -> f:format.stripTags()}

• Entfernt HTML-Tags aus Zeichenfolgen für saubere Textausgabe.

nl2br

{text -> f:format.nl2br()}

• Konvertiert Zeilenumbrüche in 
  in HTML.

printf

<f:format.printf arguments="{name: 'TYPO3', value: 123}">%2$s - %1$d</f:format.printf>

Formatiert Zeichenfolgen oder Zahlen mit printf-ähnlicher Syntax

TYPO3 Backend ViewHelpers

Backend-Links

<f:be.link route="web_list" parameters="{id: pageUid}">Go to page</f:be.link>

• Erstellen Sie Links zu TYPO3-Backend-Modulen oder -Datensätzen.

Backend-Infoboxen

<f:be.infobox title="Info">This is a custom info box</f:be.infobox>

• Benutzerdefinierte Informationsnachrichten in Backend-Modulen anzeigen.

Backend-Datensatzverwaltung

<be:link.newRecord table="tt_content" />

• Erstellen oder bearbeiten Sie Backend-Datensätze direkt aus Fluid-Templates.

TYPO3 Medien- & Bilddarstellung

Responsive Bilder

<f:media file="{image}" class="responsive" />

• Rendert Bilder mit responsiven Klassen.

srcset Generierung

<f:media file="{image}" additionalAttributes="{srcset: '{f:uri.image(image: file, maxWidth: 768)} 768w'}" />

• Unterstützt mehrere Auflösungen für responsive Layouts.

Lazy Loading

<f:image file="{image}" loading="lazy" />

• Optimiert die Leistung durch bedarfsorientiertes Laden von Bildern.

Moderne TYPO3 Bilddarstellung

• Fluid integriert TYPO3 v10+ responsive Bildfunktionen mit voller HTML5-Unterstützung.

Benutzerdefinierte ViewHelpers in TYPO3

Wann benutzerdefinierte ViewHelpers erstellen

• Verwenden Sie benutzerdefinierte ViewHelpers für wiederverwendbare, projektspezifische Funktionalität, die nicht von den Kern-Fluid-Hilfsprogrammen abgedeckt wird.

Namespace-Registrierung

{namespace my=Vendor\Extension\ViewHelpers}

• Ermöglicht es Fluid, Ihre benutzerdefinierten ViewHelpers global zu erkennen.

Best Practices

• Halten Sie die Logik minimal und vorlagenorientiert.
• Wiederverwenden von ViewHelpers über Vorlagen hinweg für Konsistenz und Wartbarkeit.

TYPO3 Fluid Inline-Notation Masterclass

Die Inline-Notation in TYPO3 Fluid ermöglicht es Ihnen, kompakte, lesbare Ausdrücke in Vorlagen zu schreiben. Das Beherrschen dieser Technik verbessert die Leistung, Wartbarkeit und Lesbarkeit der Vorlagen.

Was ist Inline-Notation?

• Inline-Notation ist eine Ein-Zeilen-Syntax zur Verwendung von Fluid ViewHelpers oder zur Manipulation von Variablen.
• Beispiel:

{sliderElements -> f:count()}

• Bevorzugt für einfache Operationen und Transformationen ohne zusätzliche <f:if> oder <f:for> Tags.

Verschachtelte Inline-Notation

{products -> f:count() -> f:format.number(decimals: 0)}

• Inline-Notation kann verschachtelt werden für mehrere Operationen.
• Verwenden Sie Verschachtelung sorgfältig, um Komplexität zu vermeiden und die Lesbarkeit zu erhalten.

Lesbarkeitsstrategien

• Zerlegen Sie lange Ausdrücke in Variablen mit  <f:variable>, wenn nötig.
• Vermeiden Sie übermäßige Verschachtelung in Vorlagen, die von mehreren Entwicklern verwendet werden.

Richtiges Escapen von Anführungszeichen

{f:translate(key: 'label', arguments: '{0: "{variable}"}')}

• Escapen Sie immer verschachtelte Anführungszeichen, um Parsing-Fehler zu vermeiden.
• Sauberere Alternativen: Werte zuerst Variablen zuweisen, dann an ViewHelpers übergeben.

Best Practices für Inline-Notation

• Leistung: Inline-Ausdrücke werden schneller ausgeführt als mehrere <f:if> oder <f:for> Tags.
• Wartbarkeit: Vermeiden Sie übermäßig komplexe Verschachtelungen; verwenden Sie Zwischenvariablen.

TYPO3 Fluid Leistungsoptimierung

Die Optimierung von TYPO3 Fluid-Templates sorgt für schnelles Seiten-Rendering, reduzierte Serverlast und ein reibungsloses Benutzererlebnis.

TYPO3 Fluid Caching erklärt

Template-Cache: Speichert geparste Fluid-Templates für schnelleres Rendering.

• Seiten-Cache: Cacht die vollständig gerenderte Seiten-Ausgabe.
• Fluid Cache Interna: Handhabt die Kompilierung von Templates und verhindert unnötiges Neu-Rendering.

Wie man den Cache in Fluid deaktiviert

<f:cache.disable>
 <!-- Code here will bypass Fluid caching -->
</f:cache.disable>

• Sparsam verwenden; das Deaktivieren des Caches kann die Leistung reduzieren.
• Am besten für Debugging oder dynamische Inhalte, die sich bei jeder Anfrage ändern.

Fluid-Template-Vorkompilierung

• Cache-Wärmer: Vorabkompilierung von Templates, um Verzögerungen beim ersten Laden zu reduzieren.
• CLI-Vorkompilierer: Befehlszeilen-Tools zum Kompilieren aller Templates in Erweiterungen.
• Schnelleres Rendering: Stellt sicher, dass Templates bereit sind, ohne Laufzeit-Parsing zu dienen.

Leistungs-Best-Practices

• Reduzieren Sie den Rendering-Overhead, indem Sie verschachtelte Schleifen und ViewHelpers minimieren.
• Vermeiden Sie doppelte Renderings desselben Partials mehrfach.
• Optimieren Sie Partials und Layouts für Modularität und Wiederverwendbarkeit.

TYPO3 Fluid Debugging & Fehlersuche

Effizientes Debugging ist entscheidend für die Pflege sauberer, fehlerfreier TYPO3 Fluid-Templates. Dieser Abschnitt behandelt Techniken zur Identifizierung, Behebung und Vermeidung häufiger Probleme.

Debugging von Variablen in TYPO3 Fluid

Verwendung von <f:debug>

<f:debug>{myVariable}</f:debug>

• Gibt den Wert von Variablen direkt im Template zur Überprüfung aus.

Alle Variablen inspizieren {_all}

<f:debug>{_all}</f:debug>

• Zeigt alle verfügbaren Variablen im aktuellen Template, Abschnitt oder Partial an.

Debugging von Arrays/Objekten

• Verwenden <f:debug> Sie , um verschachtelte Arrays oder Objekte zu inspizieren:

<f:debug>{user}</f:debug>

Häufige TYPO3 Fluid Fehler

• Parsing-Fehler: Falsch geschriebene Tags, fehlende Klammern oder falsche Syntax.
• Namespace-Probleme: Nicht definierte oder nicht registrierte ViewHelper-Namespaces.
• Escaping-Probleme: Falsch verschachtelte Anführungszeichen, die zu einem Renderfehler führen.

• Fehlende Partials/Layouts: <f:render> schlägt fehl, wenn das referenzierte Partial nicht existiert.

Wie man Parsing deaktiviert

{parsing off}

• Verhindert, dass Fluid Template-Code innerhalb eines Abschnitts verarbeitet.
• Nützlich für Debugging von Rohdaten oder zur Anzeige von Inhalten, die Fluid-Syntax enthalten.

Echte Anwendungsfälle

• Debuggen der dynamischen Inhaltsdarstellung.
• Untersuchen von _all und {data}, um die Template-Daten zu validieren.

TYPO3 Fluid Debugging Workflow

• Entwicklungs-Setup: Debug-Ausgabe in TypoScript- oder Fluid-Einstellungen aktivieren.

• Effizientes Debugging: Verwenden <f:debug> Sie selektiv; kombinieren Sie es mit {_all} für eine vollständige Variablenübersicht.

Fortgeschrittenes TYPO3 Fluid: Techniken, die die meisten Anleitungen übersehen

Das Beherrschen von TYPO3 Fluid geht über Variablen und Schleifen hinaus. Dieser Abschnitt behandelt weniger bekannte, aber produktionsrelevante Funktionen, Cache-Kontrolle, fortgeschrittene Variablenmuster, übersehene ViewHelpers und Tools, auf die erfahrene Entwickler täglich angewiesen sind.

Cache- & Parsing-Kontrolle

Cache für bestimmte Blöcke deaktivieren

<f:cache.disable>
  <p>Current time: {currentTimestamp}</p>
</f:cache.disable>

• Umgeht das Zwischenspeichern von Daten nur für den umschlossenen Block, nicht für die gesamte Vorlage.
• Verwenden Sie diese Funktion sparsam, da das Deaktivieren des Caches bei großen Abschnitten die Ladezeiten der Seite beeinträchtigt.

Deaktivieren Sie das gesamte Fluid-Parsing

{parsing off}

• Verhindert, dass Fluid jegliche Syntax darunter im aktuellen Bereich verarbeitet.
• Nützlich, um rohe Fluid-Codebeispiele in CMS-verwalteten Vorlagen anzuzeigen.

Deaktivieren der HTML-Entitäten-Escaping

{escaping off}

• Schaltet das automatische HTML-Escaping für die gesamte Datei aus.
• Nur verwenden, wenn XML, reiner Text oder vollständig vorab bereinigte Ausgaben gerendert werden.

Erweiterte Variablenmuster

Dynamische Variablennamen-Konstruktion

<f:variable name="labelDe" value="Hallo" />
<f:variable name="lang" value="De" />
{label{lang}}
<!-- Output: Hallo -→

• Erstellt Variablennamen zur Laufzeit unter Verwendung des Werts einer anderen Variablen.
• Nützlich für die Suche nach mehrsprachigen Bezeichnungen oder die typbasierte Umschaltung von Inhalten.

Aliase mit Gültigkeitsbereich <f:alias>

<f:alias map="{city: user.contact.address.city}">
  <p>{city}</p>
</f:alias>

• Erstellt kurzlebige Verweise für tief verschachtelte Objektpfade.
• Aliase existieren nur innerhalb des Tag-Gültigkeitsbereichs und haben keine Auswirkungen auf übergeordnete Variablen.

Garantierte Standardwerte

{headline -> f:or(alternative: 'Untitled') -> f:variable(name: 'headline')}
{bodyText -> f:or(alternative: 'No content available.') -> f:variable(name: 'bodyText')}

• Legt Fallbacks am Anfang der Vorlage an einer einzigen Stelle fest.
• Vermeidet sich wiederholende <f:if>-Nullprüfungen im gesamten Vorlagentext.

Erweiterte Rendering-Muster

Fluid-Code in einer Variablen rendern

{templateCode -> f:inline()}

• Parst und rendert eine Fluid-Vorlage, die als Zeichenfolgenvariable gespeichert ist.
• Ideal für CMS-editierbare Benachrichtigungsnachrichten oder dynamische Ankündigungsbanner.

Gerenderten Inhalt in ein Partial übergeben

<f:render partial="Card" contentAs="cardBody">
  <h3>{article.title}</h3>
  <p>{article.teaser}</p>
</f:render>

• Erfasst das gerenderte HTML des Tags und übergibt es als {cardBody} an das Partial.
• Ermöglicht saubere Wrapper/Slot-Muster, ohne die Struktur des Partials zu ändern.

Abschnitte vorab in Variablen rendern

{f:render(section: 'Icon', arguments: {iconName: 'twitter'}) -> f:variable(name: 'twitterIcon')}
{twitterIcon -> f:format.raw()}
{twitterIcon -> f:format.raw()}

• Einmal rendern, mehrfach verwenden, vermeidet redundantes Neurendern.
• Am wirkungsvollsten auf inhaltsreichen Seiten mit wiederholten Komponenten wie Icons oder Abzeichen.

Inline-Notation Zitat-Escaping-Referenz

Beim Verschachteln von ViewHelper-Aufrufen in Inline-Notation müssen Anführungszeichen auf jeder Ebene escaped werden:

• Falsches Escaping führt zu stillen Rendering-Fehlern ohne Fehlermeldung.
• Best Practice: Weisen Sie Zwischenergebnisse zuerst Variablen zu und übergeben Sie sie dann als Argumente.

Übersehene, aber wesentliche ViewHelpers

<f:spaceless>

<f:spaceless>
  <ul>
     <li>Item One</li>
     <li>Item Two</li>
  </ul>
</f:spaceless>

• Entfernt Leerzeichen zwischen benachbarten Tags, ohne den Inhalt innerhalb dieser zu berühren.
• Nützlich für Inline-Block-Elemente und Navigationsmenüs, die von Leerzeichenlücken betroffen sind.

<f:be.tableList
  tableName="tx_myext_domain_model_product"
  fieldList="{0: 'uid', 1: 'title', 2: 'price'}"
  storagePid="42"
  recordsPerPage="20"
  sortField="title"
  clickTitleMode="edit"
/>

• Rendert eine sortierbare, paginierte Datensatzliste in benutzerdefinierten Backend-Modulen.
• Erfordert keinen benutzerdefinierten Listenansichtscode, vollständig vom ViewHelper gehandhabt.

<f:flashMessages>

<f:flashMessages as="messages">
  <f:for each="{messages}" as="msg">
     <div class="alert alert--{msg.severity}">{msg.message}</div>
  </f:for>
</f:flashMessages>

• Zeigt Controller-Feedback nach Backend-Aktionen an.
• Unterstützt sowohl das Standard-Bootstrap-Markup als auch vollständig benutzerdefinierte Darstellungen.

<f:format.printf> mit Positionsargumenten

<f:format.printf arguments="{0: 3, 1: 'TYPO3'}">
  %2$s version %1$d — production ready.
</f:format.printf>

• Unterstützt die Wiederverwendung und Umordnung von Argumenten über die %2$s Positionssyntax.
• Wesentlich für die Lokalisierung, bei der übersetzte Zeichenfolgen Platzhalter umordnen.

Vorabkompilierung von Vorlagen für die Produktion

composer require namelesscoder/typo3-cms-fluid-precompiler
./vendor/bin/fluid-precompile
./vendor/bin/fluid-precompile --extension my_extension

• Kompiliert alle Fluid-Vorlagen, ohne sie zu rendern.
• Fügen Sie es Ihrer Bereitstellungspipeline hinzu, um Kaltstartverzögerungen bei der ersten Anfrage nach der Veröffentlichung zu vermeiden.
• Die TYPO3-Backend-Modulversion zeigt zusätzlich Effizienzbewertungen pro Vorlage und eine Ein-Klick-Neukompilierung aus dem Cache-Menü an.

TYPO3 Fluid Lokalisierung & Mehrsprachige Entwicklung

TYPO3 Fluid unterstützt mehrsprachige Websites und stellt sicher, dass Vorlagen zugänglich und SEO-freundlich über Sprachen hinweg sind.

Grundlagen der TYPO3 Fluid Lokalisierung

• Verwenden Sie XLIFF-Dateien, um Übersetzungen zu speichern.

• <f:translate> ruft dynamisch lokalisierten Text ab:

<f:translate key="page.title" />

Mehrsprachige TYPO3 Vorlagen

• Dynamische Sprachwiedergabe: Inhalte basierend auf der aktuellen Sprache der Website rendern.
• Beste Praktiken für Übersetzungen:
  • Halten Sie Schlüssel konsistent.
  • Vermeiden Sie fest codierten Text in Vorlagen.
  • Verwenden Sie Partials, um mehrsprachige Inhaltsblöcke zu teilen.

TYPO3 Fluid Barrierefreiheit Beste Praktiken

• Semantisches HTML: Verwenden Sie richtige Überschriftenebenen, Listen und Landmarken.
• Alt/Title Handhabung: Geben Sie beschreibende Attribute für Bilder und Links an.
• Barrierefreies Vorlagen-Rendering: Stellen Sie sicher, dass die Reihenfolge der Inhalte und der Fokus folgen 

SEO Best Practices in TYPO3 Fluid

• Strukturiertes HTML: Saubere Vorlagen verbessern die Indexierung und Benutzererfahrung.
• Metadaten-Rendering: Titel, Beschreibungen und Open Graph-Tags dynamisch rendern.
• SEO-freundliche Vorlagenstruktur: Verwenden Sie Layouts und Partials, um eine konsistente HTML-Struktur über Seiten hinweg beizubehalten.

TYPO3 Fluid + TypoScript Integration

Die Integration von TypoScript mit Fluid-Vorlagen ermöglicht es Entwicklern, die Leistungsfähigkeit des TYPO3-Konfigurationssystems mit dynamischem Vorlagen-Rendering zu kombinieren, um Flexibilität und Wartbarkeit zu gewährleisten.

TypoScript in Fluid aufrufen

<f:cObject typoscriptObjectPath="lib.myTextObject" />

• Ruft ein TypoScript-Objekt auf und rendert dessen Ausgabe in Fluid.
• Unterstützt das Übergeben von dynamischen Daten von der Vorlage an TypoScript:

<f:cObject typoscriptObjectPath="lib.calculatePrice" data="{quantity: 5, price: 20}" />

Kombination von TypoScript & Fluid effizient

• Trennung von Anliegen: Halten Sie die Vorlagenlogik in Fluid, die Konfiguration in TypoScript.
• Saubere Architektur: Vermeiden Sie das Mischen von PHP-Logik in Vorlagen; verwenden Sie TypoScript für wiederverwendbare Konfigurationen.
• Wartbare Projekte: Einfaches Aktualisieren der Inhaltsdarstellung, ohne mehrere Vorlagen bearbeiten zu müssen.

TYPO3 Fluid + Extbase Integration

• Controller → Template-Fluss: Variablen direkt von Extbase-Controllern an Fluid-Vorlagen übergeben.
• Variablen aus PHP übergeben: Arrays, Objekte oder einfache Werte für dynamische Darstellung an Vorlagen zuweisen.
• Beispiel:

$this->view->assign('products', $productRepository->findAll());
<f:for each="{products}" as="product">
<p>{product.name}</p>
</f:for>

Erweiterte TYPO3 Fluid-Entwicklung

Erweiterte Fluid-Techniken helfen Entwicklern,  skalierbare, wartbare und unternehmensbereite TYPO3 templates zu erstellen.

RenderingContextInterface erklärt

• Bietet Niedrigebene-Kontrolle darüber, wie Fluid Inhalte rendert.
• Ermöglicht benutzerdefinierte Rendering-Logik, PHP-Integration oder spezialisierte Datenmanipulation.

Dynamische Namespace-Registrierung

$GLOBALS['TYPO3_CONF_VARS']['SYS']['fluid']['namespaces']['my'] = ['Vendor\\Extension\\ViewHelpers'];

• Ermöglicht die globale Erkennung benutzerdefinierter ViewHelpers über Vorlagen hinweg.
• Unterstützt extension architektur und modulares Vorlagendesign.

Datenattribute in ViewHelpers

<v:h data-foo="bar" data-baz="baz">Content</v:h>

• Fügt data-*-Attribute zu HTML-Elementen hinzu.
• Nützlich für JavaScript-Integrationen und Frontend-Interaktivität.

TYPO3 Komponentengetriebene Entwicklung

• Verwenden Sie Fluid-Komponenten, um wiederverwendbare Frontend-Blöcke zu erstellen.
• Integrieren Sie Designsysteme und atomare Designprinzipien für konsistente Benutzeroberflächen.
• Komponenten kapseln HTML, CSS und Fluid-Logik für skalierbare Projekte.

Erstellung von Enterprise TYPO3 Frontends

• Skalierbarkeitsstrategien: Modulare Vorlagen, Partials und Komponenten.
• Wartbare Architektur: Klare Trennung zwischen Layouts, Partials und Vorlagen.
• Unterstützt große TYPO3-Websites mit mehreren Inhaltstypen und komplexen Rendering-Anforderungen.

TYPO3 Fluid-Ökosystem & Nützliche Erweiterungen

Das TYPO3 Fluid-Ökosystem bietet Erweiterungen, Werkzeuge und Ressourcen, um die Vorlagenentwicklung und Frontend-Flexibilität zu verbessern.

EXT:fluid_styled_content erklärt

• Kern-TYPO3 Extension zum Rendern von Inhaltselementen mit Fluid.
• Ermöglicht es Entwicklern, das Standardausgabe zu überschreiben, während die templates wartbar bleiben.

FluidTYPO3-Ökosystem

• Sammlung von Erweiterungen und Helfern für schnellere Entwicklung.
• Beispiele: Flux, VHS – wiederverwendbare ViewHelpers, Templating-Muster und Komponenten.

EXT:fluid_components

• Kapselt Frontend-Komponenten in wiederverwendbare Fluid-Blöcke ein.
• Ideal für modulare, skalierbare Designs.

EXT:fluid_fpdf

• Integriert die FPDF-Bibliothek mit Fluid, um PDFs zu generieren.
• Unterstützt dynamische PDF-Inhalte aus TYPO3-Templates und Partials.

Pattern Lab + TYPO3 Fluid

• Exportiert Designmuster als Fluid-Templates für konsistente, wiederverwendbare UI-Komponenten.

Nützliche TYPO3 Fluid-Tools & Konverter

• Online-Tools für Inline-Notation-Konvertierung, Syntaxprüfung und Template-Vorkompilierung.

Beste IDEs & Entwicklerwerkzeuge für TYPO3 Fluid

Effiziente Entwicklung ist einfacher mit IDE-Unterstützung und Produktivitätswerkzeugen.

PHPStorm TYPO3 Fluid Unterstützung

• Syntaxhervorhebung, Codevervollständigung und Fluid-Snippet-Integration.

VS Code TYPO3 Fluid Erweiterungen

• Erweiterungen für Fluid-Syntax, VHS-Unterstützung und Flux-Snippets.

Snippets & Produktivitätswerkzeuge

• Wiederverwendbare Vorlagen und Code-Snippets zur Beschleunigung der Entwicklung.

Empfohlener Entwickler-Workflow

• Kombinieren Sie IDE-Erweiterungen, Precompiler und Debug-Tools für effizientes Vorlagenmanagement.

Praktische TYPO3 Fluid Beispiele

Praktische Beispiele helfen Entwicklern, Fluid-Konzepte in realen TYPO3-Projekten anzuwenden.

• Dynamische Inhalts-Element-Renderung: Inhaltelemente basierend auf TypoScript und Datenobjekten rendern.
• Wiederverwendbare Kartenkomponenten: Modulares Kartendesign mit Partials und dynamischem Rendering.
• TYPO3 Fluid Navigationsmenü: Dynamische Menüs mit verschachtelten <f:for> und <f:if> Schleifen erstellen.
• Responsive Bildkomponente: <f:image> mit srcset und Lazy Loading rendern.
• Mehrsprachige TYPO3 Template: und XLIFF für lokalisierte Inhalte verwenden.
• SEO-optimierte TYPO3 Seitenschablone:  Dynamische <title>, <meta>-Tags sowie strukturiertes HTML.
• TYPO3-Layoutarchitektur für Unternehmen: Komponentenbasierte Layouts für skalierbare Projekte.

TYPO3 Fluid Best Practices

Die Umsetzung von Best Practices stellt wartbare, sichere und performante TYPO3-Templates sicher.

• Saubere Template-Architektur: Trennen Sie Logik, Layouts und Partials.
• Vermeidung von Geschäftslogik in Templates: Halten Sie PHP-Logik aus Fluid heraus.
• Strategien für wiederverwendbare Komponenten: Erstellen Sie Partials und Sections für Modularität.
• Performance- und Wartbarkeitsregeln: Minimieren Sie Schleifen, verwenden Sie Partials wieder, optimieren Sie Caching.
• Sicherheits-Best Practices: Escapen Sie Ausgaben, validieren Sie Variablen, vermeiden Sie unsicheres HTML.
• Barrierefreiheit- & SEO-Checkliste: Semantisches HTML, alt/title für Bilder, strukturierte Metadaten.
• Anfängerfehler, die Sie vermeiden sollten: Falsch verwendete Variablen, fehlende Partials, unsachgemäßes Escaping.

TYPO3 Fluid Spickzettel (Featured Snippet Ziel)

Schnellreferenz für Entwickler, um die Entwicklung zu beschleunigen und Fehler zu reduzieren.

• Am häufigsten verwendete ViewHelpers: <f:if>, <f:for>, <f:render>, <f:translate>, <f:format.*>
• Am häufigsten verwendete Inline-Notationen: {variable -> f:count()}, {value -> f:format.currency()}
• Gängige Debugging-Befehle: <f:debug>{_all}</f:debug>, <f:debug>{data}</f:debug>
• Nützlichste Rendering-Muster: Dynamische Partials, contentAs, komponentenbasierte Darstellung
• Schnelle Syntax-Beispiele: Inline-Zuweisung, ternäre Bedingungen, groupedFor-Schleifen

Fazit

TYPO3 Fluid ist eine flexible und wartbare Template-Engine für TYPO3 CMS. Das Beherrschen von Variablen, Schleifen, Bedingungen, Partials und Layouts sorgt für saubere Templates. Fortgeschrittene Techniken wie Inline-Notation, Caching und komponentenbasierte Darstellung verbessern die Leistung.

Richtige Debugging-, Lokalisierungs- und SEO-Praktiken machen Templates produktionsreif. Verwenden Sie praxisnahe Beispiele, um Best Practices in Ihren Projekten anzuwenden. Beginnen Sie mit den Grundlagen und gehen Sie zu fortgeschrittenen Fluid-Mustern über, um skalierbare TYPO3-Websites zu erstellen.