Einfache Template-Entwicklung mit TYPO3 – Step by Step zum eigenen Sitepackage Teil 4
Struktur
Im letzten Teil haben wir uns mit CSS oder besser gesagt mit SCSS beschäftigt, heute kümmern wir uns um das HTML, dem Grundgerüst unserer Templates. Generell finden wir die Fluid-Templates, die das HTML für die Auslieferung der Webseite benötigt in den Ordnern Resources/Private unseres angelegten Sitepackages. Dort sind alle HTML-Dateien auf die Ordner Layouts, Partials und Templates verteilt.
Im Folgenden gehe ich auf die Aufgaben der einzelnen Ordner etwas genauer ein.
Layouts
HTML-Dateien, die das Gesamtlayout der Website bilden, werden im Ordner Layouts gespeichert. In der Regel ist dies nur ein Konstrukt für alle Seiten der gesamten Website.
Partials
Das Verzeichnis Partials/ kann kleine Ausschnitte von HTML-Dateien enthalten. „Partials“ ähneln Templates, dienen jedoch der Darstellung kleiner Einheiten, die sich perfekt für wiederkehrende Aufgaben eignen. Hier sind z.B. der Header und die Navigation beheimatet.
Templates
Der Ordner Templates enthält die grundlegende Struktur der Webseite wie z.B. die Backend-Layouts, die man im Backend für jede Seite auswählen kann. Oder auch die Content-Elemente, in denen der eigentliche Inhalt im Backend platziert wird.
Sitepackage
Kommen wir nun zu unserem Sitepackage, das wir im zweiten Teil der Serie erstellt haben. Dort sind erst einmal keine Fluid-Dateien enthalten. Die Ausgabe erfolgt über das Bootstrap Package, das die Dateien für unser Sitepackage vererbt.
Um einen guten Überblick über die vorhandenen Dateien zu bekommen, lade ich mir die in meiner Installation verwendete Extension "bootstrap_package“ in meine IDE, um schnell zu sehen, welche Datei ich verändern kann. Da unser erstelltes Sitepackage auf dem Bootstrap Package basiert, können jegliche Dateien überschrieben werden, die im Package vorhanden sind.
Dabei erstellt man sich die gleiche Ordnerstruktur wie im eigentlichen Package und legt die Datei genauso an wie im Original. Als erste wird die Datei verwendet, die in unserem Sitepackage liegt. Sollte sie da nicht sein, wird das Template aus dem Bootstrap Package genommen.
Möchten wir nun z.B. ein Icon hinter die Navigation einbauen, schauen wir uns zuerst die Struktur dafür im Bootstrap Package an und gehen in den Ordner Resources/Private/Partials.
Dort finden wir dann folgende Struktur wieder:
Im Ordner Page finden wir das grundlegende Layout der Webseite, allerdings nur kleine Teile davon, weil wir uns in den Partials befinden.
Wenn man sich die Ordnerstruktur anschaut, müssten wir jetzt in die Navigation und dort die Datei Main.html in unser Sitepackage übertragen und verändern. Allerdings hat der Entwickler des Bootstrap Packages hier vorgesorgt und sogenannte DropIns implementiert, diese findet man unter Resources/Private/Partials/Page/DropIn.
Im Ordner Navigation gibt es zwei Dateien. Wir nutzen die Datei MainAfter.html und kopieren diese nun in unser Sitepackage an die StelleResources/Private/Partials/Page/DropIn/Navigation.
Nun öffnen wir die Datei und fügen z.B. ein SVG Icon ein, das bereits im Bootstrap Package integriert ist.
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32" height="32" viewBox="0 0 512 512"><path d="M450.5 350.3c-37.4-27.6-63.4-46.3-75.7-40-15.4 7.7-23.6 25.1-39.3 55.7-5.6 11.1-18.3 32.1-28 28.3-12.3-4.9-48-24.4-95.6-68.6-4.3-4-8.8-8.2-13.3-12.7-53.1-54.1-75.8-95.3-81.1-108.7-3.8-9.6 17.3-22.3 28.3-27.9 30.6-15.7 48-23.9 55.7-39.3 6.2-12.3-12.4-38.3-40-75.7C133.9 24 116.8 4.9 100.3 1.2c-19-4.2-26.9 7.2-64.4 40C-.9 73.4 0 102.4 0 125.1c0 22.6 18 68.4 54.2 127.9 13.6 22.3 33.5 48.9 54.1 74.1 8.4 10.3 19.9 22.7 32.1 35.2 17.3 17.8 36.4 35.9 51.1 48 25.2 20.7 51.8 40.5 74.1 54.1 59.5 36.2 98.6 47.5 121.2 47.5 22.7 0 51.7 1 83.9-36 32.8-37.5 44.2-45.4 40-64.4-3.7-16.5-22.7-33.6-60.2-61.2zM417 94.9c30.7 30.7 48.7 71.1 52 113.1h42.7C504.7 96 416 7.2 304 .1v42.7c42.2 3.4 82.3 21.4 113 52.1zm-113-4.5v44.4c34 11.8 61.2 39.2 73 73.2h44.4C407.2 151 361 104.7 304 90.4z"></path></svg> Laden wir nun diese Datei auf unseren Server an die entsprechende Stelle und leeren den kompletten Cache im Backend wird uns im Frontend hinter der Navigation ein Telefonhörer angezeigt.
Die Anpassung war wirklich einfach und schnell gemacht, auf diese Art und Weise lässt sich das eigene Sitepackage an die Bedürfnisse des Packages anpassen. In die Struktur des Bootstrap Package findet man schnell hinein und bekommt einen guten Überblick, wo welches Template versteckt ist. Wichtig ist, dass man keine Änderungen an dem Bootstrap Package selbst vornimmt, da diese bei einem Update der Extension verloren gehen.
Ich hoffe, ich konnte euch mit dieser kleinen Reihe einen guten Überblick und Einblick in das Boostrap Package und das eigene Sitepackage geben und wünsche euch viel Spaß beim Ausprobieren. Solltet ihr Fragen haben, schreibt gern in die Kommentare oder fragt im TYPO3 Slack im Channel #bootstrap-package nach, hier wird euch geholfen!
