Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

TYPO3 CMS 6.2 Grundkurs

Template-Teile in Rahmen und Inhaltsbereiche auslagern

Testen Sie unsere 2019 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Hauptbestandteil einer FLUID-Ausgabe ist ein Template. Durch Auslagern von Teilen in einen umgebenden Rahmen (das “Layout”) sowie Blöcke für einzelne Inhaltsbereiche (“Partials”) lässt sich das Template flexibel und übersichtlich aufbauen.

Transkript

Ausgangspunkt für eine Ausgabe bei FLUID-Templating ist eine Template-Datei. Allerdings macht es Sinn, bei wiederkehrenden Elementen, die über mehrere Templates verteilt sind, beispielsweise den äußeren Rahmen, das könnte hier etwa das Menü sein oder dann weiter unten der Footer, diese Bereiche in ein separates Layout auszulagern, sodass dieses Layout als Rahmen für mehrere Templates verwendet werden kann. Außerdem gibt es die Möglichkeit, einzelne Blöcke, die verschiedentlich verwendet werden, in sogenannten Partials auszulagern. Das wollen wir hier in unserem FLUID-Template einmal durchführen. Die Template-Datei selbst finden Sie in unserem Templates-Verzeichnis. Das ist hier ein einspaltiges Template. Und wir wollen den Bereich, der beispielsweise für das Menü, für das Logo zuständig ist, bis inklusive diesen content-Bereich hier auslagern, und zwar in unser Layout. Wir schneiden diesen Beispiel einmal aus, begeben uns in das bereits vorbereitete Verzeichnis Layouts, und legen dort eine neue Datei für unseren Rahmen an. Diese Datei öffnen wir dann ebenfalls im Editor und fügen den gerade ausgeschnittenen Teil hier ein. Innerhalb unseres Layouts geben wir dann an, dass an dieser Stelle innerhalb des div-Blocks aus dem Template der Bereich für den content gerendert werden soll. Wir verwenden hierzu einen FLUID-ViewHelper. f:render. Und geben an, dass die section zum Beispiel den Namen content tragen soll. Danach folgt dann dieser Inhalt. Das heißt, wir müssen den jetzt mit einer entsprechenden section umschließen. In unserer Template-Datei fügen wir hier eine Markierung ein, f:section, und geben ihr den Namen content. Die section beginnt hier und endet unterhalb unseres einspaltigen Template. Darunter folgt dann ein Teil, den wir ebenfalls wieder ins Layout verlagern möchten. Wir schneiden diesen Bereich aus, fügen ihn hier ein und sagen, an dieser Stelle soll dann unser Bereich gerendert werden, der die section="logobloecke" enthält. Auch hier fügen wir eine entsprechende section-Markierung ein. Darunter noch das section-Ende. Und diesen unteren Teil lagern wir jetzt ebenfalls ins Layout aus. Bedenken Sie an dieser Stelle, dass zwar unser Rahmen, das Layout, der umgebende Teil ist, allerdings Ausgangspunkt für das Darstellen des Inhalts immer noch unser eigentliches Template, in diesem Fall einspaltig. Werfen wir einen kurzen Blick auf das TypoScript-Template. Sie finden hier unten die Angabe, dass die Template-Datei einspaltig verwendet werden soll. Und ansonsten für Partials und Layouts nur Angaben, unterhalb welchen Pfades die entsprechenden Dateien zu suchen sind. Wir müssen FLUID also an dieser Stelle noch sagen, ausgehend von unserem Template, welches Layout hier zu verwenden ist. Hierzu schreiben wir oberhalb der section-Bereiche f:layout Das ist auch ein ViewHelper. Und wir definieren hier, dass das Rahmen-Layout verwendet werden soll. Wir speichern ab, beide Dateien sind gespeichert. Clearen den Cache, und sehen uns die Seite im Frontend an. Wie zu erwarten war, hat sich die Ausgabe im Frontend nicht verändert. Jedoch haben wir die Strukturierung unserer Dateien umgestellt. Wir haben hier nun ein Template, welches wir beispielsweise für ein ein- oder zweispaltiges Template verwenden können, und ein Layout, welches dem Ganzen den Rahmen gibt. Außerdem können wir in diesem Template noch die Funktionalität von Partials üben. Wir haben hier zwei None, logoBlock1, logoBlock2, die jeweils aus einem logo bestehen. Und das logo ist ein textblock und darin dann zunächst nochmal ein Bild. Wir können dann hier zum Beispiel das äußere div mit der Klasse infoLeft und darunter mit der Klasse infoRight für den zweiten Block entsprechend auslagern. Wir wollen jetzt hier also einfach mal nur den Block bestehend aus Text und Logo definieren. In unserem zweiten Block wird dann entsprechend eine andere Grafik verwendet. Und die eigentliche Ausgabe lagern wir jetzt in ein Partial aus. Wir speichern dieses geänderte TypoScript mal ab und begeben uns nochmal zurück ins Template. An dieser Stelle gibt es ein umschließendes div und darin unsere beiden logoBlöcke. Wollen wir nun also ein Partial für einen exemplarischen logoBlock anlegen. Hierzu begeben wir uns in das Verzeichnis Partials und legen dort eine Datei für den Logoblockan. In dieser Datei können wir entsprechend definieren, dass der Logoblock von einem div umschlossen wird. Und dann den inneren Teil ausgeben. Für den inneren Teil verwenden wir hier zum Beispiel einen Variablenamen inhalt und müssen hier einen format.raw-ViewHelper verwenden, da wir reinen HTML-Code ausgeben wollen. Außerdem wird sich hier oben noch die Klasse ändern. Da wir sowohl einen linken als auch einen rechten Inhaltsbereich ausgeben wollen, verwenden wir hier zum Beispiel die Variable class. Wir speichern dieses Partial ab. Und im Template können wir es dann jetzt verwenden. Zur Ausgabe des Partials verwenden wir ebenfalls den f:render-ViewHelper. Wir wollen ein Partial ausgeben mit dem Namen Logoblock. Außerdem müssen wir noch Parameter hinzufügen, die sogenannten arguments. Diese werden von Anführungsstrichen eingeschlossen und enthalten zum Beispiel den Inhalt, das ist hier unser logoBlock1, sowie unsere Klasse, in unserem Fall infoLeft. Am Ende müssen wir das Tag noch schließen. Diese Zeile wollen wir jetzt für den zweiten Logoblock verdoppeln. Hier handelt es sich jetzt um logoBlock2 und die Klasse infoRight. Die Zeilen darunter können wir entfernen. Nun noch im Backend den Cache clearen und die Ausgabe im Frontend betrachten. Unsere Seite wird angezeigt. Und wenn Sie etwas runterscrollen, finden Sie hier den linken und den rechten Logoblock. Der Inhalt dieser Variablen wird in unserem Template entsprechend an die Variable inhalt übergeben, eine Klasse gesetzt, und innerhalb dieses Logoblocks stehen Sie dann in diesen beiden benannten Variablen zur Verfügung. Sie haben in diesem Video den Dreiklang aus einem Layout außenrum, dem Template im Hauptbereich und auch als steuerndes Element, sowie Partials für einzelne Blöcke kennengelernt.

TYPO3 CMS 6.2 Grundkurs

Erfahren Sie alles Wichtige für den Einstieg in das Content-Management-System TYPO3 CMS sowie zu Themen wie Mehrsprachigkeit und Multidomainfähigkeit bis hin zur News-Verwaltung.

Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!