6.2. Woraus ein Drupal 8 Theme besteht. Überblick über das Stark-Theme.

In Drupal 7 konnte man schnell und einfach ein Subtheme auf Zen-Basis erstellen und mit dem Aufbau der Website beginnen. Seit Drupal 8 gibt es ebenfalls mehrere Theme-Builder zur Erstellung eigener Themes. Bevor man jedoch ein Subtheme darauf erstellt, muss man sich ein wenig darüber informieren, wo was liegt.

Die Drupal-Entwickler schlagen vor, das Beispielthema Stark zu betrachten. Dieses Thema wurde zu Drupal hinzugefügt, um sich mit der Anordnung eines Themes vertraut zu machen. Schauen wir, was sich in diesem Theme befindet:

Stark.info.yml Datei

Wir beginnen die Betrachtung mit der Datei stark.info.yml. Früher, in Drupal 7, wurden Theme-Daten in .info-Dateien gespeichert, in Drupal 8 wird überall YML verwendet, daher heißt die .info-Datei jetzt info.yml im YML-Format. Im YML-Format werden Schlüssel und Werte durch einen Doppelpunkt getrennt.

Name des Themes:

name: Stark

Der Projekttyp kann Theme oder Modul sein. Wir haben hier ein Theme.

type: theme

Beschreibung, die auf der Seite mit dem Theme angezeigt wird:

description: 'Ein bewusst schlichtes Theme ohne Styling, um das Standard-HTML und CSS von Drupal zu demonstrieren. Lernen Sie, wie Sie ein eigenes Theme basierend auf Stark im Theming Guide erstellen.'

Gruppierung von Drupal-Projekten zur besseren Übersicht, z.B. wenn Module eingebunden sind, werden diese in Tabs gruppiert:

package: Core

Die Version für Contrib-Module wird automatisch gesetzt, daher ist hier die VERSION-Variable auskommentiert. Tatsächlich wird die Version weiter unten aufgeführt:

# version: VERSION

Die Core-Version von Drupal ist ebenfalls auskommentiert und wird automatisch von drupal.org eingefügt:

Für Drupal 8.8 und höher:

core: 8.x
core_version_requirement: ^8 || ^9

Für Drupal 8.8 und darunter:

# core: 8.x

Ob ein Basistheme verwendet wird oder nicht, false bedeutet, dass kein Basistheme genutzt wird:

base theme: false

Der Block mit der Theme-Version und Core wird automatisch von drupal.org eingefügt:

# Information added by Drupal.org packaging script on 2016-02-03
version: '8.0.3'
core: '8.x'
project: 'drupal'
datestamp: 1454490380

Datei stark.libraries.yml

Hier binden wir die CSS- und JS-Dateien des Themes ein:

global-styling:
  version: VERSION
  css:
    base:      
      css/layout.css: {}

Wir können auch Javascript-Dateien einbinden:

global-styling:
  version: VERSION
  css:
    base:      
      css/layout.css: {}
  js:
    js/custom.js: {}

Es ist außerdem zu beachten, dass jQuery inzwischen optional ist und möglicherweise nicht auf der Seite geladen wird. Wenn Sie jQuery in Ihrem eigenen Skript verwenden möchten, müssen Sie es im Theme einbinden:

global-styling:
  version: VERSION
  css:
    base:      
      css/layout.css: {}
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery

Außerdem kann man für CSS-Dateien angeben, welche Dateien immer und welche nur in der Druckversion angezeigt werden sollen:

global-styling:
  version: VERSION
  css:
    base:      
      css/layout.css: {}
      css/style.css: {}
      css/colors.css: {}
      css/print.css: { media: print }
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery

Beschreibung Dateien README.txt, screenshot.png

Diese Dateien zeigen, wie das Theme aussieht und wie es installiert wird, falls es Besonderheiten bei Installation oder Nutzung gibt.

Logo.svg Datei

Die Logodatei wird automatisch im Design des Themes eingebunden, wenn sie im Root-Verzeichnis der Seite liegt. Alternativ kann das Logo auch über die Theme-Einstellungen eingebunden werden.

Config-Ordner und stark.schema.yml Datei

Eine weitere YML-Theme-Datei, in der Theme-Einstellungen gespeichert werden. Für das Stark-Theme ist hier nur der Titel für die Einstellungsseite des Themes enthalten.

Ordner css, js

In diesen Ordnern werden eigene CSS- und Javascript-Dateien abgelegt. Beachten Sie, dass es nicht reicht, Dateien nur in die Ordner zu legen – jede Datei muss separat über stark.libraries.yml eingebunden werden.

Datei stark.breakpoints.yml

Diese Datei definiert die Bildschirmgrößen für die mobile Version der Website. Dies ist eine neue Funktion in Drupal, die wir in einem der nächsten Artikel detailliert behandeln werden.

stark.mobile:
   label: mobile
   mediaQuery: '(min-width: 0px)'
   weight: 0
   multipliers:
    - 1x
stark.narrow:
   label: narrow
   mediaQuery: 'all and (min-width: 480px) and (max-width: 959px)'
   weight: 1
   multipliers:
     - 1x
stark.wide:
   label: wide
   mediaQuery: 'all and (min-width: 960px)'
   weight: 2
   multipliers:
     - 1x

Hier ist ein Theme, um sich mit Stark vertraut zu machen. Im nächsten Artikel werden wir anschauen, wie man ein eigenes Theme basierend auf dem Stable-Theme erstellt.