Einfache Template Entwicklung mit TYPO3 – Step by Step zum eigenen Sitepackage Teil 2

|
Was das Bootstrap Package ist, habe ich dir in meinem ersten Artikel aus dieser Reihe vorgestellt. Jetzt gehts ans Werk! Heute möchte ich dir gerne eine geniale Möglichkeit vorstellen, wie du dein eigenes Sitepackage erstellst.

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“.

Startseite 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. 

Ähnliche Artikel:

Webentwicklung

Einfache Template Entwicklung mit TYPO3 – Step by Step zum eigenen Sitepackage Teil 1

TYPO3 Pro Philipp zeigt dir, wie du dein eigenes Sitepackage mit dem Bootstrap Package erstellst. In Teil 1 erfährst du alle Basics zum Bootstrap Package.

Webentwicklung

TOP 20 der TYPO3 10 Extensions

Mit TYPO3 10.4.x sind schon viele Extensions kompatibel. Welche die beliebtesten Erweiterungen unserer Hosting-Kunden sind, erfährst du hier.

Webentwicklung

Ein optimiertes Frontend für noch mehr Performance: Lazy Loading in TYPO3 10 LTS – Teil 1

Mit Lazy Loading machst du deine Website in TYPO3 10 LTS um einiges schneller. Wie? Erfahre es hier von unserem TYPO3 Experten Hannes.

Webentwicklung

Für noch mehr Website-Performance: INT-Objekte im Admin-Panel von TYPO3 10 analysieren

Mit dem Admin-Panel unter TYPO3 10 bekommt man seine Website noch schneller. Wie genau? Das zeigt euch TYPO3 Experte Hannes hier im Blog.