Sweet child o' mine... Ein vertiefter Einblick in Joomla Child Templates

Hast du jemals Änderungen an deiner Template-Dateien vorgenommen, nur um dann festzustellen, dass alles, was du geändert hast, mit dem nächsten Update verschwunden ist? Dann haben wir gute Nachrichten für dich: Ab Joomla 4.1 ist dies Geschichte!

Mit der zum Core hinzugefügten Option, Child Templates zu erstellen, kannst du Änderungen vornehmen, die von Dauer sind. In diesem Artikel geht es darum, wie das funktioniert.

Damals, im August 2020, hoffte man, dass Child Templates in Joomla 4.0 Einzug halten würden.

Die Diskussion und Entwicklung lässt sich am besten auf Github verfolgen.

Der Thread ist faszinierend, da er die vorherige Idee und die Entwicklung des Konzepts zeigt.

Das Konzept stand, aber die Benutzeroberfläche (UI) fehlte, so dass eine Überarbeitung von Dimitris Grammatikogiannis vorgenommen wurde und der überarbeitete Versuch schaffte es vollständig in 4.1 als Child Templates.

Dies ist eine Übersetzung des Artikels «Sweet child o' mine... A deep dive into Joomla Child Templates» von Philip Walton aus dem Joomla! Community Magazine 05/22 (Link zum Original). Der Titel ist eine Anspielung auf den Song von Guns N' Roses (1987).

 Joomla Template-Engine

Ein Überblick darüber, wie eine Template-Engine funktioniert, könnte angebracht sein.

Bitte beachte, dass diese Darstellung stark vereinfacht ist.

Der Prozess beginnt mit der Anfrage an eine Website-Seite. Sobald die Anfragen den Server über die URL durch den aufgelösten DNS erreichen, muss der Server feststellen, ob statische Dateien vorhanden sind oder nicht, dann tritt das PHP auf dem Server in Aktion und weist das Joomla CMS an, die Anfrage zu erfüllen

Joomla macht das Schritt für Schritt, und während es Teile des Codes ausführt, kommt es schliesslich zum Router. Am Router wird Joomla alle Komponenten fragen, ob sie über das verfügen, was erforderlich ist, um die Anfrage zu erfüllen. Wenn eine Komponente sich meldet und sagt, dass sie es kann, dann arbeitet sich die Anfrage durch die Model-View-Controller-Schichten der Komponente (MVC)

Zuerst tritt der Controller in Aktion und lädt das Modell, das die Daten aus den Datenbanken abruft, dann wird es an die View (Ansicht) weitergeleitet, die den Template-Bereich der Komponente darstellt.Er fügt alle vom Modell gelieferten Datenstrukturen zu einer HTML-Struktur zusammen.

Als Nächstes wird das Template der Website geweckt, und das Template ersetzt alle jdoc:include-Tags.

An dieser Stelle werden die Module und andere Teile der Seite aufgebaut. Während die jdoc:include-Tags gelesen werden, booten sie die Module, auf die sie stossen, wie z. B. mod_menu, und die einzelnen Module, werten dann aus, was sie sollen, und fügen es den Informationen hinzu, die das Template zusammenstellt.

Wenn das alles erledigt ist, wird der resultierende HTML-Code an den Browser übermittelt, der die Seite dann für Sie anzeigt.

Das alles klingt doch ganz einfach!

Schritt vorwärts: Child Templates

Das Konzept der Child-Templates besteht darin, eine einzige XML-Datei zu verwenden, um das Problem zu lösen, das bei der Bearbeitung aktueller Templates auftritt: dass jede Bearbeitung eines Templates verloren geht, wenn das Template aktualisiert wird.

Eine Child Template ist ein Template mit nur einer Datei, der templateDetails.xml. Child Templates müssen ein übergeordnetes Template; sie können nicht ohne ein verweisendes übergeordnetes Template existieren.

Es wurden einige Änderungen in den Hauptdateien der Templates vorgenommen, um dies zu ermöglichen. In der Cassiopeia-Vorlage finden sich in der XML-Datei einige neue Elemente.

Einer der auffälligsten ist:

<inheritable>1</inheritable>
Dies ist wichtig, denn an dieser Stelle gibt das übergeordnete Template an, dass es Kinder haben kann.

Ach, wenn das Leben doch nur so einfach wäre!

Eine weitere wichtige Änderung ist das Medienziel.

<media destination = "templates/site/cassiopeia" folder="media">
Hier wird festgelegt, wo sich der Medienordner für die Vorlage befinden soll.

Warum diese Änderung der XML-Definition des Templates für den Medienordner?

Bis zu einem gewissen Grad ist es, um historische Unstimmigkeiten zu beseitigen.

Alle anderen Pakete in Joomla speichern ihre statischen Anlagen im Medienordner.

Templates waren die einzige Ausnahme von dieser Regel.

Mehrere Template-Clubs und Template-Builder haben bereits erklärt, dass sie ihre Template-Assets nicht mehr im Template oder an einem anderen Zielort speichern, sondern im Standard-Joomla-Ordner, nämlich in /media.

Von nun an ist also der Standard: /media/templates/[Administrator oder Website]/yourtemplate

Im Child kannst du angeben, wo du die Dateien in der XML-Datei ablegst.

Lass uns dies anhand eines Beispiels veranschaulichen.

<media folder="media" destination="templates/site/cassiopeia_phils">
<folder>css</folder>
<folder>js</folder>
<folder>Bilder</folder>
</media>
<inheritable>0</inheritable>
<parent>cassiopeia</parent>
</extension>

So werden Child Templates verwendet

 Den Ort, an dem untergeordnete Templates erstellt werden können, findet man im Template-Bereich: Administrator ->system->templates->site templates.

Wähle das übergeordnete Template aus, von dem du das Child Template erstellen möchtest.

Jetzt können wir mit den Änderungen beginnen.

Nehmen wir zum Beispiel an, du möchtest einen Override für die Datei user.css erstellen.

Dazu mussten früher so vorgegangen werden: Alle Dateien des Templates forken, eine Kopie des Haupt-Templates erstellen und dieses dann zum Standard-Template machen. Dann würde die eine Datei bearbeitet, die wir bearbeiten wollten.

Das sind eine Menge Dateien, die dupliziert werden, nur um eine einzige Änderung vorzunehmen.

Wenn wir ein Child-Template verwenden, besteht das Child-Template aus einer einzigen Datei, und wir fügen dann die spezielle Datei hinzu, die wir bearbeiten wollen.

Wir könnten zum Beispiel eine neue Indexdatei des Cassiopeia-Templates erstellen und diese dann einfach bearbeiten, um die Reihenfolge der Ausgabe zu ändern, neue Bereiche hinzuzufügen und so das Template wirklich verändern.

Der Unterschied? Anstatt alle Template-Ordner und -Dateien zu duplizieren, brauchst du nur die eine Datei zu duplizieren, die du bearbeiten möchtest.

So einfach ist das!

Wenn du eine neue Modulposition hinzufügen möchtest, ist es wieder sehr einfach, du kopierst einfach die Datei templateDetails.xml und fügst die neue Position hinzu.

<position>Meine neue Position</position>

Dann kannst du diese Position sofort mit Modulen verwenden, was eine schnelle und einfache Möglichkeit darstellt, die Modulpositionen des Templates zu erweitern.

Wir können zusätzliche Felder in die Datei templateDetails.xml einfügen und beim Speichern der Datei werden die zusätzlichen Felder verfügbar.

Ein Ort für alle Assets

Wir haben bereits über die Änderung bei der Speicherung statischer Dateien im übergeordneten Template gesprochen.

/media

Bei Child-Templates befinden sich alle Assets im Ordner media. Was verstehen wir unter Assets?

Assets sind Dinge, mit denen man das Aussehen des Templates verändern kann:

• css
• Javascript
• Bilder
• Schriftarten
• Icons

Assets am Beispiel von Akeeba Backup

Indem du deine Assets ins Child-Template einbindest, kannst du ganz einfach verschiedene Javascript, CSS, Bilder, Schriftarten und Icons im Child-Template anbieten, ohne die Parent-Dateien zu überschreiben!

Ist es möglich, Child Templates zu exportieren?

Ja, das kann man. Es gibt aber noch keine Exportfunktion, aber alles, was du brauchst, ist eine Zip-Datei mit den Dateien deines Templates, die du dann dann in eine andere Website importieren kannst.

Die benötigten Dateien und Ordner sind:

Dateien:
templateDetails.xml
index.php

Ordner:
media

Im Ordner media findest du die spezifischen Mediendateien für dieses Child-Template.

Wenn du das Child Template in dieselbe Website importieren möchtest, um schnell eine neue zu erstellen, musst du den Namen des Child Templates und das Medienziel in der xml-Datei ändern.

Wie weist du die verschiedenen Child Templates deiner Website zu?

Genauso wie bei der Verwendung mehrerer Templates: Gehe einfach auf die Registerkarte für die Menüzuweisung in Ihrem Child-Template.

Im Administratorbereich gehst du zu

Administrator -> System -> Templates -> Site Template Stile
Wähle die Stil, die du zuweisen möchtest, und wähle dann die dritte Registerkarte "Menüzugehörigkeit". Dort kannst du auswählen, welche Menüpunkte dein Child Template verwenden sollen.

Overrides vs. Child Templates

Eine gute Frage ist, wann ein Override am besten ist und wann ein Child Template?

Zunächst einmal, was ist ein Override?

Ein Override ist eine Datei, die du erstellst und im HTML-Ordner deines Templates speichern kannst und die es ermöglicht, dein eigenes Layout für eine Komponente oder ein Modul zu erstellen.

So weit so gut, aber oft wird ein Template mit Überschreibungen von Core Joomla-Komponenten innerhalb des Templates ausgeliefert, so dass das Template ein anderes Layout als das Standard-Joomla-Template erstellen kann. Wenn du dann das Aussehen des Template-Override ändern willst, musst du die Template-Dateien direkt bearbeiten, und das ist keine gute Idee. Bei einem Update könnte deine Arbeit überschrieben werden.

Das ist das Schöne an Child-Templates: Egal, ob es in deinem Template benutzerdefinierte Overrides gibt oder du das Layout einer Komponente nach deinen Vorstellungen gestalten möchtest, du kannst Child-Templates verwenden und sicher sein, dass du die Kontrolle hast, wenn die Komponente und das Template aktualisiert werden.

Eine Demonstration von Child Templates

Bei einem kürzlichen Treffen der Joomla London User Group hat Dimitris Grammatikogiannis einen hervorragenden Vortrag über Child Templates gehalten. Wenn du das Konzept ausprobieren willst, solltest du dir dieses Video auf Youtube ansehen, bevor du ernsthaft in die faszinierende Welt von Child Templates einsteigst.