Eigene Themes in Drupal erstellen Teil 1 Im Folgenden möchte ich zeigen, wie man ein eigenes Theme in Drupal 8 erstellt. Dabei gehen wir nicht von einem bestehenden aus, sondern beginnen ganz am Anfang. Alles was benötigt wird: Eine laufende Drupal 8 Installation und ein Text-Editor. Ich verwende hier die Freeware Sublime Text 3. Notepad++ tut s aber beispielsweise auch. Drupal vorbereiten Als ersten Schritt schalten wir einige Performance-Tricks aus, was uns das Arbeiten ein bisschen leichter macht. Diese würden nämlich den Quellcode so optimieren, dass er nicht oder nur mehr sehr schwer lesbar ist. Die nötigen Einstellungen finden sich in Configuration > Performance. Hier die beiden Punkte bei Bandwidth Optimization deaktivieren: Zu beachten ist hier auch der Punkt Clear all caches. Diesen werden wir noch öfter benötigen. Theme anlegen Wenn man in Drupal auf Appearance klickt, gibt es einige Themes zur Auswahl. Man unterscheidet dabei zwischen Themes für die eigentliche Homepage (Default Theme) und für den Admin-Bereich (Admin Theme). Wir kümmern uns um das Layout unserer Homepage, daher lassen wir Admin Themes einmal aus. Ziel ist, dass unser eigenes Theme in dieser Liste auftaucht. Dazu sind einige Schritte notwendig:
Ordner und Info-Datei anlegen Damit Drupal ein Theme als solches erkennt, gibt es einige Mindestanforderungen. Für die benötigte Ordnerstruktur legen wir einen Ordner custom im Drupal- Themes -Ordner an. Anschließend einen Unterordner in custom mit dem Namen unseres Themes hier theme1 : Jedes Theme wird durch mehrere YAML-Dateien beschrieben. Die wichtigste ist jene mit dem Namen themename.info.yml. Daher als ersten Schritt in unserem Fall theme1.info.yml im Ordner erstellen und folgendes eintragen: name: Theme1 description: Drupal 8 Starter Theme type: theme core: 8.x Nun sollte das Theme in der Auswahl von Drupal 8 bereits unter Uninstalled zur Verfügung stehen wenn auch noch ohne Formatierungen. Mit Install and set as default können wir es testen.
Theme bereinigen Obwohl wir noch keine CSS- und JavaScript-Files eingeschlossen haben, sieht man beim Betrachten des Quellcodes im Browser (bitte vorher ausloggen, sonst sieht man die CSS der Menüleiste), dass unzählige CSS-Dateien inkludiert sind. Wir wollen beispielsweise views.module.css und align.module.css nicht verwenden. Dazu einfach die theme1.info.yml ergänzen: stylesheets-remove: - core/themes/stable/css/views/views.module.css - core/themes/stable/css/system/components/align.module.css Cache leeren nicht vergessen, da andernfalls (wie man im Quellcode im Browser leicht sehen kann) die Änderungen nicht übernommen werden. CSS und JavaScript einfügen Welche Abhängigkeiten ein Theme hat, wird über eine Datei namens themename.libraries.yml gesteuert. Daher legeben wir ein neues YAML-File theme1.libraries.yml an. Dies beinhaltet alle Infos, welche CSS- und JavaScript- Dateien inkludiert sind. global-css: css: theme: css/style.css: {} Nun in theme1.info.yml vor stylesheets-remove folgendes ergänzen: libraries:
- theme1/global-css Wir rufen den Abschnitt global-css in unserer Library-Datei also aus der Info- Datei auf. Dieser Ascbhnitt bezieht sich auf eine CSS-Datei, die wir noch anzulegen haben. Genauso funktioniert es mit JavaScript. In der theme1.libraries.yml ergänzen wir folgendes (Unter dependencies werden Abhängigkeiten angegeben; da jquery zum Core gehört, kann einfach auf diesen referenziert werden): global-js: js: js/main.js: {} dependencies: - core/jquery In der theme1.info.yml beziehen wir uns wieder darauf und ergänzen libraries : libraries: - theme1/global-css - theme1/global-js Nachdem man nun wieder den Cache leert, sollten die neuen CSS-Einträge (eher oben) und die jquery-referenz mit dem Einschluss der main.js (eher unten) zu sehen sein. Start mit HTML Vielleicht hat sich schon jemand gewundert aber wie schafft es Drupal, bereits Inhalt auszugeben, obwohl wir nur zwei YAML-Dateien kreiert haben und noch gar keine HTML-Struktur hinterlegt haben? Ganz einfach: Wenn kein HTML- Grundgerüst zur Verfügung steht, greift Drupal auf das im Core mitgelieferte zurück, zu finden unter: core/modules/system/templates. In unserem Fall wird die Datei page.html.twig verwendet. Wenn wir die Datei verwenden wollen, editieren wir sie natürlich nicht dort, sondern kopieren sie einfach in unseren Theme-Ordner, in dem wir bereits die beiden YAML-Dateien liegen haben. Dort können wir sie anschließend ändern. Dabei können wir übrigens gleich Drupal so einstellen, dass es Änderungen gleich übernimmt (Caching ausschalten) und uns hilfreiche Kommentare zur Theme- Entwicklung einblendet (Twig-Debugging einschalten). Eine genaue Anleitung
findet sich hier: Caching deaktivieren und Debugging aktivieren in Drupal 8 Das war der erste Teil. Weitere folgen in Kürze.