Benutzerdefinierte Themes in Drupal 8 erstellen | Teil 1

Was ist ein Theme?

Themes bilden das Design Ihrer Website, angefangen beim Layout bis hin zur Typografie. Sie sind die finale Präsentation Ihrer Website, das Erscheinungsbild, wie Ihre Besucher die Website wahrnehmen – all die CSS-Codes und SASS-Shortcuts. 

Themes sind verantwortlich für:

1. Verschiedene Layout-Stile
2. Position und Darstellung der Inhalte – sowohl Text als auch Nicht-Text
3. Die Anpassung von Typografie und Designelementen
4. Die Responsivität der Website

Mit anderen Worten: Themes sind eine Aggregation von Dateien, die Ihrer Website ihr spezifisches Aussehen und Gefühl verleihen und für die Präsentation und Anpassung des Codes verantwortlich sind.

Ein benutzerdefiniertes Theme in Drupal 8 erstellen

In Drupal 8 ist das Erstellen und Anpassen eines Themes einfacher und flexibler durch die Verwendung von Twig (einer modernen Template-Engine für PHP). Twig trägt dazu bei, Websites schnell, flexibel und sicher zu gestalten, und das Wichtigste ist, dass der Code für die weitere Wartung sauber bleibt.

Themes-Ordner in Drupal 8

Themes in Drupal 8 werden im Themes-Ordner innerhalb des Root-Verzeichnisses gespeichert. Hier können Sie Unterordner in `custom` und `contrib` (oder beigesteuerte Themes, die Sie von Drupal.org herunterladen können) unterteilen. In Drupal können Sie jedes Theme als Basis-Theme verwenden. Wir werden dies im späteren Verlauf genauer erläutern. Beginnen wir nun mit der Erstellung eines benutzerdefinierten Themes von Grund auf. 

Erstellen Sie Ordner und Unterordner mit präzisen Namen. Beachten Sie, dass die Namen für Drupal Groß- und Kleinschreibung beachten, um die genaue Datei zu identifizieren. 

Innerhalb des Themes-Ordners erstellen Sie einen Unterordner namens `custom`. Hier können Sie alle Ihre erstellten benutzerdefinierten Themes ablegen.

Beginnen wir mit der Erstellung eines Themes namens Magazine. Erstellen Sie einen Ordner für Ihr Theme (Groß- und Kleinschreibung beachten), und dieser wird der Maschinenname Ihres Themes sein. 

Mindestdateien für ein Theme

Info.yml-Datei in einem Theme

In Drupal 8 verwenden wir das .info.yml-Format. Es ist ein Format, das vom Symfony PHP-Framework verwendet wird, um Informationen zu speichern, die leicht verständlich und anpassbar sind. Dieses Format wird in ganz Drupal 8 verwendet. Die YAML-Datei besteht aus einem Schlüssel-Wert-Paar, das durch einen Doppelpunkt getrennt ist.

Beispiel 

Name: Magazine

Diese Schlüssel-Wert-Paare werden in Drupal 8 als Mappings bezeichnet. Lassen Sie uns nun eine `info.yml`-Datei erstellen.

Für unser Theme muss eine Info-Datei vier Felder enthalten: Name, Typ, Beschreibung, Core. Wir benennen diese Datei mit dem Namen unseres Themes. Wir werden dieser Datei weitere Informationen hinzufügen, und diese vier Mappings reichen aus, damit Drupal Ihr Theme erkennt.

 Theme in Drupal 8 installieren

Wenn Sie diese Datei erfolgreich erstellt haben, finden Sie Ihr neues Theme unter Admin > Erscheinungsbild, und Sie werden Ihr Theme im Abschnitt der nicht installierten Themes sehen.

Installieren und legen Sie das Magazine-Theme als Ihr Standard-Theme fest, und lassen Sie uns Regionen und Bibliotheken erstellen.

Regionen in einem Theme

Beginnen wir mit der Erstellung von Regionen.

Das Konzept der Regionen: Neben dem Hauptinhalt müssen andere Inhalte wie Header, Navigation, linke Seitenleiste, Hauptinhalt und Footer für verschiedene Regionen für jeden Inhaltstyp separat erstellt werden. Diese werden in der `info.yml`-Datei zur Erstellung von Regionen definiert. Wir beginnen mit dem Schlüssel, der hier in Drupal `region` sein wird. Es gibt zwei versteckte Regionen (`page top` und `page bottom`), die immer in der `info.yml`-Datei vorhanden sein sollten, wenn Regionen angegeben werden.

Nachdem Sie die erforderlichen Regionen in der `info.yml` festgelegt haben, können Sie diese unter der Registerkarte „Struktur“ Ihrer Drupal 8-Sites im Layout „Blockstruktur demonstrieren“ überprüfen.

Libraries.yml-Datei

Fügen wir nun Bibliotheken hinzu, die unsere Cascading Style Sheets (CSS) und JavaScript-Dateien (JS) enthalten. Dafür erstellen wir eine `libraries.yml`-Datei; der Name dieser Datei ist derselbe wie der der Info-Datei, daher wird die Datei hier `magazine.libraries.yml` genannt. Sie können verschiedene Bibliotheken entsprechend Ihren Designanforderungen definieren. Nehmen wir `global` als Bibliothek, in der wir ein Cascading Style Sheet und eine JavaScript-Datei einbinden werden.

 

Abhängigkeiten für Ihr Theme festlegen

Diese Dateien werden jeweils aus ihren entsprechenden Ordnern bereitgestellt; Sie können dies über den Quelltext Ihrer Website überprüfen. Im Libraries-Ordner können Sie auch Abhängigkeiten wie jQuery definieren.

Bis zu diesem Schritt haben Sie erfolgreich ein Theme mit Ihrem benutzerdefinierten CSS und JavaScript erstellt. Werfen wir nun einen Blick auf die Templates. In Drupal 8 verwenden wir `html.twig` für unsere Templates, die wirklich schnell, sicher und flexibel sind. 

Twig-Debugging

Um besser zu verstehen, welches Twig eine Ausgabe liefert, können wir den Twig-Debugging-Modus aktivieren.
Um Twig-Debugging zu aktivieren, müssen Sie lediglich die Datei `services.yml` bearbeiten. Diese Datei befindet sich unter 
Sites > Default > (hier finden Sie die Datei `default.services.yml`; kopieren Sie diese einfach und benennen Sie Ihre neue Datei in `services.yml` um). Sie finden das Schlüssel-Wert-Paar 
Debug: false
Ändern Sie einfach `false` in `true` und speichern Sie die Datei.

Leeren Sie nun den Cache der Website.

Templates für Ihr Theme

Erstellen wir einen `templates`-Ordner, in dem wir alle unsere `HTML.twig`-Dateien ablegen werden.
Wir beginnen mit einer grundlegenden Seite, die auf der gesamten Website verwendet wird. Erstellen Sie also eine Datei `page.html.twig` und legen Sie diese im `templates`-Ordner ab.

So sieht eine `page.html.twig` aus; zum besseren Verständnis der Regionen wird das Bootstrap-Grid-System verwendet. Platzieren Sie einfach Blöcke in den Regionen, die Sie auf Ihrer Drupal-Site erstellt haben, und passen Sie den Code an.

Um zu überprüfen, ob die Ausgabe von Ihrem Theme stammt, klicken Sie einfach auf „Seitenquelltext anzeigen“, und Sie werden sehen:
<!-- BEGIN OUTPUT from ‘themes/custom/magazine/templates/page.html.twig →

Ihr Code wird hier sein.
<!-- END OUTPUT from ‘themes/custom/magazine/templates/page.html.twig →

 

So können wir ein grundlegendes benutzerdefiniertes Theme erstellen. Im nächsten Teil werden wir das fortgeschrittene Theming mit Drupal lernen.

Für weitere Einblicke und Tutorials kontaktieren Sie uns unter [email protected]!