Drupal 8

Eigene Themes in Drupal erstellen – Teil 1

18. 07. 2016

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:

Drupal Bandwith Optimization

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„:

Drupal Theme Basics 01

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

Drupal Theme Basics 02

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.

Drupal Themes Install

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.

image_pdfimage_print
0 likes

Author

Manuel

Comments (1)