2.1| Layouts, Templates und Partials – Typo3 FLUID Template

In diesem Beitrag erkläre ich die 3 Grundcontainer in Typo3 FLUID. In der Templateprogrammierung von Typo3 FLUID gibt es 3 große Bereiche.
Zum ersten, die höchste Ebene, die Layoutebene. Hier gibt es eine zentrale Datei, die das Grundgerüst des Templates steuert. Zum zweiten die Template Ebene. In dieser befinden sich verschiedene Templates. In unserem Beispiel ist es die Datei „einspaltig.html“. Und zum dritten, die tiefste Ebene, die Partials. Diese sind kleine Teilstücke im Layout, die auch wiederkehrend eingebunden werden können. Dies wäre zum Beispiel der Footer oder der Header.

Wir erstellen uns für unsere Übung eine Datei namens „wrapper.html“ im Ordner Layout. Dies ist die Datei, mit dem Grundgerüst unseres Templates und somit die Layout-Ebene.
In die Datei „wrapper.html“ packen wir folgende HTML Elemente. Diese sind natürlich nur beispielhaft, können aber als Anhaltspunkte für Templates dienen.

<div id="header">
  <h1>Hello World!</h1>
</div>
<div id="content">
  <f:render section="inhalte" />
</div>
<div id="footer">
  <p>Footer. Eine weitere Fußzeile</p>
</div>

Unser Beispiel gibt zum einen den Header mit der Überschrift „Hallo Welt!“ aus, zum anderen aber auch den Footer mit entsprechendem Inhalt. Des weiteren gibt das Template mit dem ViewHelper „f:render“ die Sektion „inhalte“ aus. Diese Sektion legen wir im folgenden Schritt in der „einspaltig.html“ an. Dazu ergänzen wir die Datei „einspaltig.html“ um folgenden Zeilen Code:

<f:layout name="rahmen" />
<f:section name="inhalte">
<div id="content">
  <div id="main"
    <f:format.raw>{inhalt}</f:format.raw>
  </div>
</div>
</f:section>

Als nächstes gehen wir in das Typo3 6 Backend und bearbeiten das Default Root Template. Wir fügen folgende Zeile in das Root Template ein.

layoutRootPath = fileadmin/template/private/layout/

Diese Anweisung legt den Pfad für das Layout Verzeichnis fest.
Einmal der ganze Code der momentanen Root Template Datei:

FluidTemplate = FLUIDTEMPLATE
FluidTemplate {
file = fileadmin/template/private/einspaltig.html
layoutRootPath = fileadmin/template/private/layout
variables {
inhalt < styles.content.get
}
}

page = PAGE
page {
config {
doctype = xhtml_trans
}
typeNum=0
includeCSS.style = fileadmin/template/public/css/style.css

10 < FluidTemplate
}

Wir haben nun den Content Bereich in die Layout Datei ausgelagert. Aber wir können mit dem eigentlichen Layout Teil noch eine Ebene tiefer gehen. Wir lagern nun den inneren Content Bereich in einen Partial aus.

Dazu ersetzen wir in der „einspaltig.html“ den ViewHelper „format.raw“ durch:

<f:render partial="inhalte" arguments="{content:inhalt}" />

Es wird hiermit der Partial „inhalte“ aufgerufen. Mit der „arguments“ Anweisung geben wir dem Partial die Variable „content“ weiter. Diese Variable ist innerhalb des Partials unter dem Namen „content“ aufrufbar. Wir sprechen also nun die Variable „inhalt“ unter dem Namen „content“ an. (Im Template: {content} )

Als nächstes legen wir uns unser Partials Verzeichnis an. Wir erstellen also einen neuen Ordner namens „partials“ im Ordner „private“. Dort erstellen wir eine neue Datei mit dem Namen „inhalte.html“.
Die Partial Datei muss immer genau so heißen, wie im f:render ViewHelper angegeben. In unserem Beispiel „inhalte“. Hier wird in Groß- und Kleinschreibung unterschieden.

Als nächstes müssen wir im Root Template unseren Partials Ordner angeben. Dazu erweitern wir das Default Root Template im Typo3 Backend um folgenden Zeilen Code:

partialRootPath = fileadmin/template/private/partials

Dies setzt unseren Partials Odner als Standart Partials Ordner.
Einmal das ganze Typoscript des Root Templates:

FluidTemplate = FLUIDTEMPLATE
FluidTemplate {
file = fileadmin/template/private/einspaltig.html
layoutRootPath = fileadmin/template/private/layout
partialRootPath = fileadmin/template/private/partials
variables {
inhalt < styles.content.get
}
}

page = PAGE
page {
config {
doctype = xhtml_trans
}
typeNum=0
includeCSS.style = fileadmin/template/public/css/style.css

10 < FluidTemplate
}

Zusammengefasst lässt sich sagen:

• Die Layout Datei ist die grobe Grundstruktur bzw. das Grundgerüst des Templates/Webseite
• Templates sind verschiedene Anordnungen. Zum Beispiel einspaltig, zweispaltig usw.
• Partials sind kleine Teilschnipsel des Templates. Zum Beispiel der Header, Footer oder der innere Content Bereich

Typo3 CMS 6.1 FLUID Template programmieren:

• 4.11| Typo3 CMS 6 Backend auf deutsch umsetellen
• 4.10| Logo mit Link zur Startseite einfügen – Typo3 Fluid
• 4.9| Ein Kontaktformular in Typo3 anlegen – Typo3 Fluid
• 4.8| News System für Typo3 – tx_news einrichten
• 4.7| RealUrl – Suchmaschinenfreundliche Links für Typo3 – SEO
• 4.6| Eine erweiterte Suchfunktion auf MySQL Basis für Typo3
• 4.5| Typo3 Updaten – Wie Update ich Typo3 richtig?
• 4.4| Inhaltsblöcke vererben – Typo3 Template mit FLUID
• 4.3| Objekt: TEXT – Textblöcke in Typoscript Typo3 FLUID
• 4.2| Menüs, Untermenüs und Navigation erstellen – Typo3 Fluid
• 4.1| Rechte, Linke Spalte und Rand ausgeben – Mehrspaltiges Layout
• 3.7| ViewHelper: Inline Notation – If Abfragen in einer Zeile – Typo3 Fluid
• 3.6| ViewHelper: Comment – Kommentieren von Code
• 3.5| ViewHelper: if – If Abfragen im Tempalte
• 3.4| ViewHelper: Hyperlinks – Externe und Interne Links einbauen
• 3.3| ViewHelper: cObject – Typoscript Objekte im Template anzeigen
• 3.2| ViewHelper: Format – Daten für das Frontend aufbereiten
• 3.1| ViewHelper: Image – Bilder einfügen
• 2.1| Layouts, Templates und Partials – Typo3 FLUID Template
• 2.0| Der Einstieg in FLUID
• 1.2| FLUID Template aufteilen – Struktur erstellen
• 1.1| TypoScript Basics – Typo3 Template mit FLUID programmieren