Einfache Template Entwicklung mit TYPO3 – Step by Step zum eigenen Sitepackage Teil 2
So fängst du an
Der Entwickler Benjamin Kott hat zum einen das Bootstrap Package kreiert und zum anderen eine sehr gute Möglichkeit geschaffen, wie du dein eigenes Sitepackage dazu erstellst. Mit seiner Methode hast du die Möglichkeit, das Theme zu verändern, ohne dass du Änderungen am Bootstrap Package vornehmen musst.
Du möchtest sofort loslegen? Dann besuche die Seite sitepackagebuilder.com und klicke auf den Button: „Create Sitepackage“.
Im Anschluss wirst du nach ein paar Konfigurationsmöglichkeiten gefragt. Als Basis wählst du das Bootstrap Package. Mit welcher TYPO3 Version du arbeiten möchtest, bleibt natürlich dir überlassen. Empfehlen würde ich dir aber, in einem neuen Projekt immer das aktuellste Release zu verwenden. So kannst du sicher sein, dass die verwendete Version noch lange weiterentwickelt wird.
Das nächste wichtige Feld ist das „Title“-Feld, da so später die Extension heißen wird, die du im Anschluss erstellst. Alle andere Felder solltest du zwar ausfüllen, sind aber nicht unbedingt relevant.
Nachdem du auf den Button „Create Sitepackage“ geklickt hast, erhältst du ein ZIP-Archiv zum Download, das eine zur Installation fertige Extension enthält. Mit dieser arbeitest du nun weiter und kannst sie an deine Bedürfnisse anpassen.
Ein Blick in die Ordner
Im ersten Schritt entpackst du den Ordner und schaust dir die enthalten Dateien und deren Struktur in einer IDE deiner Wahl an. Ich nutze dafür PHPStorm. Neben der ext_emconf.php oder ext_localconf.php sind für dich die Ordner Configuration und Resources die wichtigen Dateien.
Configurations-Ordner
Hier findest du das ganze TypoScript, TCA oder TsConfig Setup – verändere oder erweitere es, wie du es brauchst. Der Vorteil: Du musst es nicht im Backend pflegen und du kannst die Extension später einfach für andere Projekten übernehmen.
Resources Ordner
Der in meinen Augen wichtigste Ordner ist der Resources Ordner – unterteilt in Private und Public. Im Private Ordner befinden sich alle Fluid-Dateien des Themes. Dort findest du eine weitere Unterteilung in Language, Layouts, Partial und Templates. Du willst mehr dazu wissen? Dafür empfehle ich dir die TYPO3 Docs die genaue Erklärung in englischer Sprache. Im Public Ordner findest du viele öffentlich erreichbare Dateien wie CSS, JavaScript, SCSS, Schriftarten, Icons oder Bilder.
Individualisierung starten
Nun kannst du mit der ersten Anpassung an deinem Sitepackage starten. Am besten fängst du beim Logo an. Aktuell befinden sich zwei Beispiel-Logos im Ordner Resources/Public/Images. Dort findest du die Dateien logo.svg und logo-inverted.svg. Das Logo gibt es zusätzlich noch in einer invertierten Variante. Sollten sich Farben oder Ähnliches anders darstellen, kannst du das Logo auch verändern. Dein eigenes Logo legst du einfach als SVG, PNG oder JPEG im Ordner ab. Am besten wählst du als Dateinamen auch „logo“, ansonsten hast du nachher etwas Arbeit beim Umbenennen.
Jedes Logo hat andere Maße, daher solltest du mindestens die Abmessungen anpassen. Das machst du in der folgenden Datei: Configuration/TypoScrip/constants.typoscript. Der für dich relevante Bereich beginnt ab Zeile 11 und sieht wie folgt aus:
logo {
file = EXT:mittwald_theme/Resources/Public/Images/logo.svg
fileInverted = EXT:mittwald_theme/Resources/Public/Images/logo-inverted.svg
height = 52
width = 192
alt = Mittwald Theme
linktitle = Mittwald Theme
} Die Abmessung des Logos änderst du jeweils mit der Option height und width. Solltest du dich für einen anderen Dateinamen als logo entschieden haben, änderst du diesen unter file und fileInverted. Nutzt du kein Inverted Logo solltest du dort den Pfad zum normalen Logo angeben. Zusätzlich lassen sich dort noch Alt-Tag und Link-Titel des Logos pflegen, da dieses automatisch mit der Startseite verlinkt ist.
Und damit hast du schon die ersten kleinen Individualisierungen des Themes abgeschlossen.
Teil 3
Im dritten Teil demonstriere ich dir anhand von Beispielen, wie du mit wenig Aufwand neue Funktionen einfügst, z. B. die Änderung der Farben oder auch die Vererbung der Fluid Files, um Änderungen am HTML-Output der Seite vorzunehmen.
