6.3. Erstellen Sie Ihr eigenes Drupal-Theme basierend auf dem Stable-Theme.

Ab diesem Artikel beschäftigen wir uns mit unserem eigenen Theme in Drupal. In diesem Abschnitt des Tutorials analysieren wir die Grundlagen eines Themes in Drupal: Wo was liegt, wie man CSS und JavaScript einbindet und nutzt. Unser Theme wird auf dem Core-Theme Stable als Basis aufbauen. Wenn Sie Drupal lernen möchten, ist Stable ein großartiger Startpunkt. Beginnen Sie nicht mit Bootstrap, da Sie sonst ständig auf Fragen und Fehler stoßen werden. Im nächsten Abschnitt des Tutorials, mit unserem Wissen über die Erstellung von Themes für Drupal, werden wir mit Bootstrap arbeiten.

Hier ist die offizielle Dokumentation

https://www.drupal.org/theme-guide/8

Erstellen Sie einen Ordner für unser Theme

Wir legen alle neuen Themes im Ordner /themes ab. Sie können die Ordnerstruktur wie in Drupal 7 (sites/all/themes) verwenden, aber es ist besser, die neue Drupal-Dateistruktur zu verwenden und den /themes-Ordner zu benutzen.

Ich werde den Ordner /themes/drupalbook erstellen, Sie können Ihr Theme beliebig benennen:

Erstellen Sie eine Datei mit Basisinformationen namens drupalbook.info.yml

Erstellen Sie in unserem Theme-Ordner die Datei theme_name.info.yml:

Dieser Artikel liefert ausführliche Informationen zum YAML-Format:

https://en.wikipedia.org/wiki/YAML

Achten Sie auf zwei Dinge:

1) Verwenden Sie keine Tabs zur Einrückung, nur Leerzeichen.

2) Die Einrückungen müssen aus einem oder mehreren Leerzeichen bestehen (z.B. name: value, aber nicht name: value).

Fügen Sie folgendes in die Datei drupalbook.info.yml ein:

name: Drupalbook
type: theme
base theme: stable
description: My first Drupal theme.
core: 8.x
core_version_requirement: ^8 || ^9
libraries:
  - drupalbook/global-styling
regions:
  header: Header
  content: Content  # Diese Region ist Pflicht
  sidebar_first: 'Sidebar first' # Nicht vergessen, Anführungszeichen zu setzen
  footer: Footer

Sehen wir uns an, was jede Zeile bedeutet.

name – Der Name unseres Themes. Der Maschinenname entspricht dem Ordnernamen und der Datei drupalbook.info.yml – also „drupalbook“.

type – Der Projekttyp, hier „theme“ für ein Theme.

base theme – Wir erben vom Stable-Theme; wenn es ein komplett neues Theme ist, schreiben Sie „false“.

description – Eine Beschreibung des Themes, die im Admin-Panel angezeigt wird.

core – Die Drupal-Core-Version, für die dieses Theme gedacht ist.

libraries – Hier binden wir Libraries für unser Theme ein. Dies erfolgt über die Datei drupalbook.libraries.yml, die wir als Nächstes erstellen. Beachten Sie „global-styling“, das wir in drupalbook.libraries.yml definieren.

regions – Die Regionen unseres Themes. Die Region „content“ ist Pflicht, da der Drupal-Inhalt darüber ausgegeben wird. Wenn der Name einer Region aus zwei oder mehr Wörtern besteht, setzen Sie ihn in Anführungszeichen. Maschinenname für Regionen werden mit Unterstrichen geschrieben.

Erstellen wir nun eine Library für unser Theme.

Datei drupalbook.libraries.yml

Fügen Sie Folgendes in drupalbook.libraries.yml ein:

global-styling:
  version: 1.x
  css:
    theme:
      css/style.css: {}
      css/print.css: { media: print }
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery

Jetzt gehen wir Zeile für Zeile durch:

global-styling – genau der Name, den wir in drupalbook.info.yml verwendet haben.

css – Hier binden wir CSS-Dateien ein, beachten Sie media: print für die Druckversion.

js – Hier binden wir JavaScript-Dateien ein. jQuery ist optional in Drupal, falls Sie jQuery in Ihrem eigenen JS-Code nutzen wollen, fügen Sie die Abhängigkeit hinzu:

dependencies:
  - core/jquery

Erstellen Sie die Ordner css und js und legen Sie die Dateien dort ab:

css/style.css

css/print.css

js/custom.js

Da wir vom Stable-Theme erben, erben wir auch dessen Templates. Gehen Sie nun in den Bereich Erscheinungsbild Ihrer Website:

/admin/appearance

Leeren Sie den Cache und aktivieren Sie unser Theme:

Jetzt haben wir unser neues Drupalbook-Theme auf der Seite: