Articles

Ein Theme ist eine Sammlung von Dateien, die die Darstellungsebene definieren. Sie können auch ein oder mehrere „Subthemes“ oder Varianten eines Themes erstellen. Es wird nur die Datei .info.yml benötigt, aber die meisten Themes und Subthemes verwenden weitere Dateien. Auf dieser Seite sind die Dateien und Ordner aufgeführt, die in einem typischen Theme oder Subtheme enthalten sind.


Das Hinzufügen von Regionen zum Theme erfordert:
- Das Hinzufügen von Regionsmetadaten zur Datei THEMENAME.info.yml.
- Die Bearbeitung der Datei page.html.twig und das Ausgeben der neuen Regionen.
Hinweis: Wenn Sie in Ihrem Theme eine oder mehrere Regionen deklarieren, werden alle Standardregionen nicht mehr angewendet, und Sie sind dafür verantwortlich, alle gewünschten Regionen zu deklarieren.


Diese Dokumentation richtet sich an Themes. Informationen zu Modulen finden Sie im Abschnitt „Hinzufügen von Stylesheets (CSS) und JavaScript (JS) zu einem Drupal 8 Modul“.
In Drupal 8 werden Stylesheets (CSS) und JavaScript (JS) über dasselbe System für Module (Code) und Themes geladen: die Asset-Bibliotheken.
Zur Klarstellung sind diese Anweisungen nur für Themes gedacht und gelten nicht für Module.


Twig ist eine Template-Engine für PHP und Teil des Symfony2 Frameworks.
In Drupal 8 ersetzt Twig PHPTemplate als Standard-Template-Engine. Eine Folge dieser Änderung ist, dass alle theme_* Funktionen und *.tpl.php Dateien auf PHPTemplate-Basis durch *.html.twig Template-Dateien ersetzt wurden.


Drupal ermöglicht es Ihnen, alle Templates zu überschreiben, die für die Erstellung des HTML-Markups verwendet werden, sodass Sie die vollständige Kontrolle über das Markup haben, das in Ihrem benutzerdefinierten Theme ausgegeben wird. Es gibt Templates für jedes Seitenelement, von hochrangigem HTML bis zu kleinen Feldern.
Templates überschreiben
Sie können die Haupttemplates von Drupal überschreiben, indem Sie Templates in den Theme-Ordner hinzufügen, die einer bestimmten Namenskonvention entsprechen.


Drupal lädt Templates basierend auf bestimmten Namenskonventionen. Dies ermöglicht es Ihnen, Templates zu überschreiben, indem Sie sie in Ihrem Theme hinzufügen und ihnen spezifische Namen geben.
Nachdem Sie ein Template hinzugefügt haben, müssen Sie den Cache leeren, damit Drupal Ihr neues Template erkennt.


Über Twig
Twig ist eine kompilierte Template-Sprache auf PHP-Basis. Wenn Ihre Webseite gerendert wird, nimmt die Twig-Engine das Template und wandelt es in ein „kompiliertes“ PHP-Template um, das in einem geschützten Verzeichnis unter sites/default/files/php/twig gespeichert wird. Die Kompilierung erfolgt einmalig, Template-Dateien werden für die Wiederverwendung zwischengespeichert und bei Leerung des Twig-Caches neu kompiliert.


Beim Arbeiten mit einer Twig-Template-Datei sind die meisten Variablen in den Kommentaren der Template-Datei dokumentiert. Wenn dies jedoch nicht der Fall ist oder wenn Themes oder Module neue Variablen einführen, benötigen wir eine Möglichkeit, alle im Template verfügbaren Variablen zu erkennen. Twig stellt hierfür die Funktion dump() zur Verfügung, um Variablen in Template-Dateien zu erkennen und zu überprüfen.


Die Template-Engine Twig bietet ein Debugging-Werkzeug.
Die Drupal-8-Implementierung fügt zudem ein weiteres Werkzeug hinzu, mit dem Sie das Template finden können, das das Markup ausgibt.
Warnung: Das Aktivieren des Twig-Debuggings kann einige Teile der Seite, insbesondere Views, beeinträchtigen. Siehe dieses Issue.
Debugging aktivieren
Sie aktivieren Twig-Debugging in sites/default/services.yml.


Wie Twig normalerweise funktioniert
Standardmäßig kompiliert die Twig-Theme-Engine Templates in PHP-Code und speichert den kompilierten Code im Speicher. Der kompilierte Code ist für die Entwicklung ungeeignet, da Änderungen an Twig-Templates nicht sofort auf Ihrer Drupal-Seite sichtbar werden.
Nachdem Twig ein Markup erzeugt hat, gibt es im Render-API eine weitere Caching-Ebene. Diese nimmt das von Twig erstellte Markup und cached es so, dass Twig bei folgenden Seitenaufrufen gar nicht mehr beteiligt ist. Daher werden Twig-Debug-Optionen letztlich ignoriert.
