2.0| Der Einstieg in FLUID

In diesem Beitrag gebe ich einen kleinen Einstieg in Typo3 6.1.7 FLUID. Wir erstellen uns als erstes eine Ordnerstruktur und erarbeiten uns im Anschluss unsere Template Grundstruktur.

Als erstes legen wir uns einen neuen Ordner im Root Verzeichnis „fileadmin“ an, mit dem Namen des Templates. Wir nennen es in diesem Beispiel einfach „template“.

Als nächstes legen wir in diesem Ordner 2 Unterordner an, um unsere Dateien zu sortieren und Ordnung in das Template zu bringen. Eine gute Struktur zeichnet zudem ein gutes Template aus.
Wir legen einmal einen Ordner „private“ und einmal einen Ordner „public“ an. Die Ordnernamen lassen erahnen, welchen Inhalt in ihnen liegt.
Im private Ordner liegen alle Dateien, die vom Browser nicht direkt aufgerufen werden. Heißt, dort liegen Typoscripte, Templatedateien und auch html Templatedateien.
Im Ordner public hingegen liegen alle Dateien, die der Browser direkt aufruft. Dies wären zum Beispiel CSS Dateien, Bilder und Javascripte.
Diese Aufteilung ist in Typo3 FLUID relativ verbreitet und hat sich bewährt.

Nun gehen wir über zu der eigentlichen Templateprogrammierung in FLUID (Typo3 Flow).

Wir legen uns im Ordner „private“ eine Datei mit dem Namen „einspaltig.html“ an. Diese wird für die ersten Funktionen unseres Templates ausreichen, aber mit der Zeit um einige Dateien erweitert werden.

In die „einspaltig.html“ kommt folgender Inhalt:

<div id="content">
<div id="main">
	{inhalt}
</div>
</div>

Dies ist ein normaler HTML Code mit einem Typo3 Fluid Marker. Er unterscheidet sich von den alten Typo3 Markern. Der Markerinhalt wird über das Root Template im Typo3 Backend übergeben. Der Marker Inhalt wird in unserem Fall durch den Inhalt der mittleren Spalte (Normal) aus dem Typo3 Backend ersetzt.

Im Default Root Template, im Typo3 Backend, müssen folgende Zeilen Code ergänzt werden.
Zuerst erstellen wir eine neue Seite mit xhtml Inhalt.

page = PAGE
page {
config {
doctype = xhtml_trans
}
typeNum=0
}

Als nächstes definieren wir unser Fluid Template und übergeben unsere „inhalt“ Variable. Außerdem sagen wir dem Template, welcher Datei es zugeordnet ist. In unserem Fall „einspaltig.html“.

FluidTemplate = FLUIDTEMPLATE
FluidTemplate {

file = filemadmin/template/private/einspaltig.html

variables {
    inhalt < styles.content.get
}

}

Zeile 1 legt ein Fluidtemplate mit dem Namen FluidTemplate an. Zeile 4 vergibt die Eigenschaft „file“ an dieses Objekt und gibt somit die html Datei des Templates an. Zeile 5 übergibt diverse Variablen aus Typoscript an das Template.

Hier einmal der komplette Code um ein Fluid Template zu erstellen.

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

page = PAGE
page {
config {
doctype = xhtml_trans
}
typeNum=0

10 < FluidTemplate
}

Hier ist „10 < FluidTemplate“ kopiert und ausgegeben. Das sorgt dafür, dass unser Template auch angezeigt wird.

Nun ist unsere Ausgabe aber noch etwas verwirrend. Der Code wird in HTML Quellcode angezeigt und nicht interpretiert. Das liegt daran, dass standartmäßig jeder Textblock durch die PHP Funktion HTML-Entities gejagt wird.
Um dies zu verhindern, muss unsere „einspaltig.html“ durch einen ViewHelper ergänzt werden.

<div id="content">
  <div id="main"
    <f:format.raw>{inhalt}</f:format.raw>
  </div>
</div>

Um nun Änderungen zu sehen, muss der Cache im Backend geleert werden. Dazu klickt man oben rechts auf den Blitz und dann auf „Clear all Caches“. Wenn man nun im Frontend die Seite neulädt, erscheint der zuvor ausgegebene Quellcode nicht im Klartext, sondern interpretiert.

Der ViewHelper Raw sorgt dafür, dass der Code im Rohformat ausgegeben wird und nicht mit HTML-Entities umkonvertiert wird.

Nun fehlt nur noch eine entscheidene Sache in unserem Template: Ein CSS Stylesheet. Um diesen einzufügen, muss folgende Anweisung mit in das Root Template im Typo3 Backend.

includeCSS.style = fileadmin/template/public/css/style.css

Der Name „.style“ kann an dieser Stelle frei vergeben werden. Ich habe „.style“ nur als Beispiel genommen.
Nun noch einmal der komplette Code dieses Beitrages.

FluidTemplate = FLUIDTEMPLATE
FluidTemplate {
file = fileadmin/template/private/einspaltig.html
variables {
inhalt < styles.content.get
}
}page = PAGE
page {
config {
doctype = xhtml_trans
}
typeNum=0
includeCSS.style = fileadmin/template/public/css/style.css10 < FluidTemplate
}

Typo3 CMS 6.1 FLUID Template programmieren:

Marvin Sengera

Hey! Ich bin Marvin Sengera, Inhaber der Internetagentur "Binärfabrik" aus Paderborn. Ich habe mein Bachelorstudium Informatik mit Schwerpunkt Industriespionage an der Hochschule Hamm Lippstadt abgeschlossen und absolviere derzeit meinen Master in Fachrichtung "Technical Entrepreneurship and Innovation". Ich beschäftige mich rund um die Themen Informatik, Innovation & Unternehmensgründung.

Das könnte dich auch interessieren …

Schreibe einen Kommentar