Ordnerstruktur von Drupal 8 Themes

Ein Theme ist eine Sammlung von Dateien, die die Darstellungsebene definieren. Sie können auch ein oder mehrere „Subthemes“ oder Varianten eines Themes erstellen. Es wird nur die Datei .info.yml benötigt, aber die meisten Themes und Subthemes verwenden weitere Dateien. Auf dieser Seite sind die Dateien und Ordner aufgeführt, die in einem typischen Theme oder Subtheme enthalten sind.

Theme-Standort

Sie sollten Themes im Ordner „themes“ Ihrer Drupal-Installation ablegen. Beachten Sie, dass Kern-Themes wie Bartik und Seven im Ordner core/themes Ihrer Installation liegen.

Es wird empfohlen, contrib-Themes in einem Unterordner „contrib“ und eigene Themes im Ordner „custom“ abzulegen.

Jedes einzelne Theme befindet sich in einem Verzeichnis, das nach dem Theme benannt ist. Zum Beispiel fluffiness. Der Name muss kleingeschrieben sein, mit einem Buchstaben beginnen und Unterstriche (_) anstelle von Leerzeichen verwenden.

Die (teilweise) Struktur Ihrer Drupal-Installation könnte wie folgt aussehen:

  |-core
  |  |-modules
  |  |-themes
  |  |  |-bartik
  |  |  |-seven
  ..
  |-modules
  |-themes
  |  |-contrib
  |  |  |-zen
  |  |  |-basic
  |  |  |-bluemarine
  |  |-custom
  |  |  |-fluffiness

Struktur des Theme-Ordners

Hier ein Beispiel für Dateien und Ordner, die sich in der typischen Ordnerstruktur eines Themes befinden:

  |-fluffiness.breakpoints.yml
  |-fluffiness.info.yml
  |-fluffiness.libraries.yml
  |-fluffiness.theme
  |-config
  |  |-install
  |  |  |-fluffiness.settings.yml
  |  |-schema
  |  |  |-fluffiness.schema.yml
  |-css
  |  |-style.css
  |-js
  |  |-fluffiness.js
  |-images
  |  |-buttons.png
  |-logo.svg
  |-screenshot.png
  |-templates
  |  |-maintenance-page.html.twig
  |  |-node.html.twig

Nachfolgend eine Beschreibung der am häufigsten vorkommenden Dateien, die Sie in einem Theme finden können.

*.info.yml
Ein Theme muss eine .info.yml-Datei enthalten, um das Theme zu definieren. Unter anderem definieren .info.yml-Dateien Metadaten, Bibliotheken und Blockregionen. Dies ist die einzige verpflichtende Datei in einem Theme.

*.libraries.yml
Die Datei .libraries.yml wird verwendet, um JavaScript- und CSS-Bibliotheken zu definieren, die vom Theme geladen werden können.

*.breakpoints.yml
Breakpoints definieren, wann sich das responsive Design an verschiedene Geräte anpassen soll. Breakpoints werden in der .breakpoints.yml-Datei definiert.

*.theme
Die .theme-Datei ist eine PHP-Datei, die jegliche bedingte Logik und Preprocessing-Daten enthält. Sie kann auch die Basiseinstellungen des Themes erweitern. Erstellen von erweiterten Theme-Einstellungen.

CSS/
Es wird empfohlen, CSS-Dateien im Unterordner 'css' zu speichern. Die Kern-Themes von Drupal 8 organisieren CSS-Dateien gemäß dem SMACSS Styleguide. Damit ein Theme CSS-Dateien lädt, müssen diese in der .libraries.yml-Datei definiert und können in der .info.yml-Datei überschrieben oder entfernt werden.

JS/
Theme-spezifische JavaScript-Dateien werden im Ordner 'js' gespeichert. Um JavaScript-Dateien zu laden, müssen diese in der .libraries.yml-Datei definiert sein.

images/
Es wird empfohlen, Bilder im Unterordner „images“ zu speichern.

screenshot.png
Wenn sich eine screenshot.png-Datei im Theme-Ordner befindet, wird sie auf der Seite „Aussehen“ verwendet. Alternativ kann ein Screenshot auch in der .info.yml-Datei definiert werden.

logo.svg
Wenn sich eine SVG-Logo-Datei im Theme-Ordner befindet, kann sie im Kopfbereich der Seite als Logo verwendet werden. Logos können auch unter „Aussehen“ > „Einstellungen“ hochgeladen werden.

templates/
Templates definieren HTML-Markup und etwas Darstellung-Logik. Im Unterschied zu Drupal 7 müssen Drupal 8 Template-Dateien (*.html.twig) im Unterordner 'templates' liegen. Folgen Sie bestimmten Namenskonventionen, damit Drupal Ihre Templates anstelle der Standardtemplates lädt. So können Sie das Standard-Markup überschreiben. Sie können Ihre Templates auch in Unterordnern organisieren, z. B. alle Block-Templates im Ordner templates/blocks und alle Views-Templates im Ordner templates/views.

Beispiel: Bartik Theme Ordnerstruktur

Als Beispiel sehen Sie hier die Ordnerstruktur von Bartik, die sich in core/themes/bartik befindet:

  |-bartik.breakpoints.yml
  |-bartik.info.yml
  |-bartik.libraries.yml
  |-bartik.theme
  |-color
  |  |-color.inc
  |  |-preview.css
  |  |-preview.html
  |  |-preview.js
  |-config
  |  |-schema
  |  |  |-bartik.schema.yml
  |-css
  |  |-colors.css
  |  |-layout.css
  |  |-maintenance-page.css
  |  |-print.css
  |-images
  |  |-add.png
  |  |-required.svg
  |  |-tabs-border.png
  |-logo.svg
  |-screenshot.png
  |-templates
  |  |-block--search-form-block.html.twig
  |  |-block--system-branding-block.html.twig
  |  |-block--system-menu-block.html.twig
  |  |-block.html.twig
  |  |-comment.html.twig
  |  |-field--taxonomy-term-reference.html.twig
  |  |-maintenance-page.html.twig
  |  |-node.html.twig
  |  |-page.html.twig
  |  |-status-messages.html.twig

Weitere Informationen

Coding Standards: Organisation von CSS-Dateien