Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

TYPO3 CMS 6.2 Grundkurs

Templates, Marker, ViewHelper, FLUIDTEMPLATE in TypoScript nutzen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Mit Hilfe einer Vorlage, in TYPO3 als Template bezeichnet, lässt sich auf einfache Weise eine Ausgabe realisieren. Sie bietet den Rahmen, in den anschließend mittels der Template-Sprache FLUID Inhalte eingefügt werden können.

Transkript

Für eine einfache Website ist es bei TYPO3 grundsätzlich möglich, diese komplett per TypoScript-Template aufzubauen. Wesentlich flexibler ist allerdings der Einsatz von Template-Dateien. Sehen wir uns hier das Beispiel an mit einer recht einfach aufgebauten Seite, die dann in diesem Fall aus dem TypoScript verschiedene Elemente ausgibt. Wir haben hier oben ein Menüelement, ein textblock, ein Logo, zwei Blöcke für den unteren Teil, und hier unten dann ein PAGE-Objekt, wo alle diese Elemente untereinander ausgegeben werden. Diesen unteren Teil wollen wir nun in eine Template-Datei auslagern und im Anschluss noch etwas aufhübschen. Die mittlerweile überwiegend bei TYPO3 eingesetzte Template-Sprache heißt FLUID. Wir wollen also eine einfache FLUID-Datei anlegen und wechseln hierzu in unser Document Root. Unterhalb des Verzeichnisses legen wir dort noch ein Verzeichnis Private an, da diese Templates nur für den internen Gebrauch gedacht sind. Bei FLUID gibt es die Unterscheidung in Layouts, Partials, und Templates, wovon wir allerdings als Erstes nur mal Templates verwenden wollen. Wir legen aber an dieser Stelle schonmal ein paar Ordner an, die in späteren Schritten dann Verwendung finden werden. Als Nächstes legen wir unterhalb des Ordners Templates eine HTML-Datei für unseren einspaltigen Inhalt an. Die Dateiendung ist in diesem Fall .html, da wir eine HTML-Datei verwenden wollen. Und öffnen diese Datei in einem Texteditor. Als sehr einfaches Template wollen wir die vier Blöcke aus unserem TypoScript ausgeben. Hier wäre als oberes menu zu nennen. Darunter kam der content. Und dann haben wir hier ein logoBlock1 und ein logoBlock2. Um in FLUID Variablen auszugeben, verwendet man den Variablennamen eingeschlossen von geschweiften Klammern. Speichern wir diese Datei ab und begeben uns zurück ins TypoScript. Hier wollen wir beim PAGE-Objekt nun nicht mehr die Blöcke direkt ausgeben, sondern fügen an dieser Stelle ein, dass unser Inhalt aus einem FLUID-Template kommen soll. Hierfür verwenden wir den Objekttyp FLUIDTEMPLATE und müssen für diesen noch zusätzliche Eigenschaften setzen. Als Erstes wäre hier natürlich der Verweis auf die Template-Datei zu nennen. Diese liegt in unserem Beispiel unter fileadmin/sys/Private, im Verzeichnis Templates und heißt Einspaltig.html. Außerdem wollen wir an dieser Stelle noch die Eigenschaften für Partials und das Layout setzen. Wir setzen hier die Pfadangaben auf fileadmin/sys/Private/Partials und layoutoutRootPath auf fileadmin/sys/Private/Layouts. Partials und Layouts verwenden wir an dieser Stelle noch nicht. Der Vollständigkeit halber seien sie an dieser Stelle aber schonmal für ein FLUID-Templating ergänzt. Als Nächstes müssen wir die Variablen zuweisen. Hierzu gibt es einen Block variables. Und dort verwenden wir dann unsere Variablen. menu, die können wir von hier unten am besten übernehmen. Die Variable menu ist das obj.menu. Dann haben wir die Variable content. Dann haben wir die Variable logoBlock1, und zusätzlich noch den logoBlock2. Sehen wir uns die Ausgabe im Frontend an. Wir begeben uns hier auf das zweite Tab und reloaden einmal. Na, hätten Sie das erwartet? Wir sehen hier direkt einen HTML-Code. Hintergrund hierbei ist, dass FLUID bei der Ausgabe von Variablen die Inhalte automatisch mit HTML-Sonderzeichen ersetzt. Das heißt, wenn Variablennamen, beispielsweise ein Name oder eine Adresse, als Teil einer HTML-Seite angezeigt würde, dann ist eigentlich auch dies das gewünschte Verhalten. In unserem Fall allerdings wollen wir direkt einen HTML-Code ausgeben. Hierzu müssen wir FLUID mitteilen, dass diese Variablen bei der Ausgabe nicht bearbeitet werden sollen. Dies ist im FLUID-Template möglich. Hierzu kommen ViewHelper zum Einsatz. Man verwendet unterhalb von f; das ist ein Name Space, der Namensbereich für FLUID-ViewHelper; Und darunter gibt es dann einen ViewHelper-Bereich für Formatierungen, und einen raw-ViewHelper. Der wird entsprechend geöffnet und geschlossen, ähnlich wie HTML-Tags. Und umschließt so die Variable, die in der rohen Form, das heißt ohne die Ersetzung von HTML-Sonderzeichen, ausgegeben werden soll. Das ist die eine Notation für ViewHelper. Die andere Möglichkeit ist, eine file-Notation zu verwenden, bei der wir dann auch format.raw aufrufen. Dann allerdings in einer ähnlichen Form wie ein Funktionsaufruf. Dann können wir die äußeren ViewHelper an dieser Stelle weglassen. Dies übernehmen wir jetzt auch für die anderen vier Variablen. Speichern ab und rufen unser Template erneut auf. Um die Ansicht zu aktualisieren, müssen wir außerdem im Backend nochmal eben den Cache clearen, die Frontend-Caches. Und aktualisieren dann die Seite im Browser. Das HTML dieser Seite ist allerdings noch recht rudimentär. Wir können nun allerdings in unserer Template-Datei entsprechend noch ein paar Ergänzungen vornehmen. Ich habe hier schonmal ein paar Blöcke vorbereitet. Wir können die ganze Seite mit einem div umschließen, dem wir zum Beispiel die id="page" geben. Dann können wir den Header entsprechend umschließen, beispielsweise mit einem header-div, einem menu-div. Unser Menü entsprechend einrücken. Dann wollen wir zusätzlich noch dieses div wieder schließen, ein Bild einfügen, was wir hier ganz normal als Image-Source angegeben haben. Dann sind wir hier unten auch schon beim Block für unseren Haupt-content, für einen einspaltigen content. Deswegen ist hier nochmal ein zusätzlicher div angegeben. Und haben dann unten unsere beiden logoBlöcke. Außerdem ergänzen wir die Seite noch um ein Footer. Das HTML unsere Seite ist so nun schon recht umfangreich und bietet viele Möglichkeiten, die Inhalte beispielsweise über die Verwendung von CSS zu formatieren. Als Nächstes wollen wir noch eine CSS-Datei hinzufügen. Diese habe ich im Vorfeld schonmal vorbereitet. Wir kopieren die Datei hierzu einfach in einen passenden Ordner. Diesen legen wir dann wieder im öffentlichen Bereich ab. Unterhalb von Public erstellen wir hierzu einen Ordner mit dem Namen StyleSheet zum Beispiel. Und fügen dort unsere CSS-Datei ein. Werfen wir einen kurzen Blick in die Datei selbst hinein. Hier finden sich ein paar Formatierungen, beispielsweise für den Body, für die Seite an sich, für den Footer, für den Header, das Logo, die Menüausgabe, und die verschiedenen Menüebenen, die wir später noch verwenden wollen. Als letzten Schritt ist es notwendig, diese CSS-Datei jetzt in TypoScript einzubinden. Wir wechseln also zurück in das TYPO3-Backend. Dort ergänzen wir für die Seite in unserem PAGE-Objekt die Angabe, dass CSS eingeschlossen werden soll, per includeCSS. Vergeben hier einen beliebigen Namen, zum Beispiel für unsere main-CSS-Datei. Und geben den Pfad an. Wir können hier auf die Konstante publicMedia zurückgreifen, die in unserem TypoScript vorhanden ist. Und die Datei liegt dann unter StyleSheet/main.css. Speichern wir ab und laden die Seite im Frontend neu. Es fehlen nun lediglich noch ein paar weitere Grafiken für Hintergrund, Logo, und ein Header-Bild, die wir ebenfalls im Vorfeld vorbereitet haben. Diese kopieren wir hierzu in den Ordner Images und laden die Seite erneut. Sie sehen, dass nun mit wenigen Handgriffen innerhalb unserer Template-Datei, zunächst mit CSS und ein paar Grafiken eine ansehnliche Seite entstanden ist. Hier oben finden Sie unsere Menüelement, dann eine Header-Grafik, den Inhalt aus unserem Hauptbereich und unten die zwei logoBlöcke. Außerdem wird unten der Footer ausgegeben, den wir entsprechend in unserer Template-Datei definiert haben. Die Einbindung in TypoScript selbst ist relativ einfach und übersichtlich gehalten. Die HTML- und CSS-Logik findet sich entsprechend in separaten Dateien, wie Sie das vom HTML-Design gewohnt sind. Herzlichen Glückwunsch.

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...
 
Hersteller:
Software:
TYPO3 TYPO3 6.2
Exklusiv für Abo-Kunden
Erscheinungsdatum:28.03.2014
Laufzeit:5 Std. 50 min (67 Videos)

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!