Subthemes

Subthemes unterscheiden sich von anderen Themes nur dadurch, dass sie die Ressourcen des Basisthemas erben. Es gibt keine Einschränkungen hinsichtlich der Kettenbildung, die Subthemes mit ihren Eltern verbinden. Ein Subtheme kann ein Kind eines anderen Subthemes sein und es kann verzweigt und organisiert werden, wie Sie es für richtig halten. Dies verleiht Subthemes großes Potenzial.

Um ein Subtheme zu erstellen, definieren Sie es wie jedes andere Theme und geben Sie das Basisthema mit dem Schlüssel „base theme“ an. (Beachten Sie, dass dieser Schlüssel kein Unterstrich enthält.)

Beispiel für ein Subtheme: Fluffiness

Fluffiness ist ein Beispiel für ein Subtheme, das Classy als Basisthema verwendet.

Dies ist die Ordnerstruktur, in der Sie die folgenden Dateien erhalten:

themes/
└──  fluffiness/
     ├── fluffiness.info.yml
     └── fluffiness.libraries.yml

Die Info-Datei heißt fluffiness.info.yml:

name: Fluffiness
type: theme
description: This is a fluffy sub theme of Classy
core: 8.x
# Defines the base theme
base theme: classy
# Defines libraries group in which we can add css/js.
libraries:
  - fluffiness/global-styling
# Regions
regions:
  header: Header
  featured: Featured
  content: Content
  sidebar_first: First sidebar
  sidebar_second: Second sidebar
  footer: Footer

Fügen Sie die Datei fluffiness.libraries.yml hinzu, um CSS / JS zur global-styling-Gruppe hinzuzufügen, die oben unter dem Schlüssel library: definiert ist.

global-styling:
  css:
    component:
      css/style.css: {}

Erfahren Sie mehr über das Hinzufügen von CSS-Stylesheets und JavaScript zu einem Drupal 8 Theme.

Wenn Sie anstelle von „fluffiness“ einen anderen Namen verwenden möchten, ersetzen Sie einfach alle Vorkommen von „fluffiness“ durch Ihren Namen („alle Vorkommen“ umfasst auch den Ordnernamen). Zum Beispiel:

themes/
└──  my_custom_theme/
     ├── my_custom_theme.info.yml
     └── my_custom_theme.libraries.yml

Der Text, den Sie in die Zeile „name:“ der info.yml-Datei eingeben, ist frei wählbar und muss nicht genau dem Dateinamen Ihres Subthemes entsprechen. Zum Beispiel könnte es so aussehen:

name: My Custom Theme
# (alle anderen Zeilen weggelassen)

Subtheme eines Subthemes

Beim Erstellen eines Subthemes eines Subthemes müssen Sie als Basisthema das Subtheme angeben.

• Fluffiness: erstes Subtheme von Classy

name: Fluffiness
type: theme
description: This is a fluffy sub theme of Classy
core: 8.x
# Defines the base theme
base theme: classy

• Shaved: Subtheme von Fluffiness (Subtheme von einem Subtheme von Classy)

name: Shaved
type: theme
description: This is a reduced fluff sub theme of Fluffiness
core: 8.x
# Defines the base theme
base theme: fluffiness

Beachten Sie, dass der Parameter base theme der Maschinenname des Basisthemas ist, während name der beschreibende Name ist.

Vererbung der Themenregionen

Themenregionen werden nicht vom angegebenen Basisthema geerbt. Wenn der Parameter regions: in der info.yml-Datei Ihres Subthemes leer bleibt oder nicht alle Regionen des Basisthemas enthält, können Standardregionen von Drupal als Ausweichoptionen für die Blockplatzierung in Ihrem Subtheme verwendet werden. Wir empfehlen dringend, alle Regionen, die in Ihrem Basisthema definiert sind, in die info.yml-Datei Ihres Subthemes zu kopieren.

# Because regions are not inherited, any region including standard
# Drupal regions as well as base theme regions must be defined in
# the sub-theme. This example demonstrates a sub-theme that leverages
# a subset of the standard Drupal regions (1), plus some custom
# regions defined in the base theme (2), and finally three
# "colophon"-related regions defined in this sub-theme.  
regions:
  # 1. Standard Drupal regions (also defined and used by base theme).
  # 2. Regions copied from base theme.
  # 3. Additional custom sub-theme regions.
  header:             'Header'                    # 1
  primary_menu:       'Main menu'                 # 1
  secondary_menu:     'Secondary menu'            # 1
  highlighted:        'Highlighted'               # 1
  help:               'Help'                      # 1
  section_nav:        'Section Nav'               # 2
  breadcrumb:         'Breadcrumb'                # 1
  page_title:         'Page Title'                # 2
  local_tasks:        'Local Tasks'               # 2
  content:            'Content (Constrained)'     # 1
  content_fullwidth:  'Content (Edge-to-edge)'    # 2
  colophon_first:     'Colophon First Col'        # 3
  colophon_second:    'Colophon Second Col'       # 3
  colophon_third:     'Colophon Third Col'        # 3
  footer:             'Footer'                    # 1

Vererbung der Blockplatzierungen

In Drupal 8 können Themes mit einem Ordner config/install/ geliefert werden, in dem vorinstallierte Blockkonfigurationen, einschließlich Platzierungen in Themenregionen, beim Aktivieren des Themes importiert werden. Drupal kann diese Blockkonfigurationen und Regionplatzierungen vom Basisthema erben, aber wenn die Themenregionen, die in der info.yml-Datei Ihres Subthemes definiert sind, nicht mit denen im Basisthema übereinstimmen, kann es zu unvorhersehbaren Platzierungen in zufälligen Regionen kommen.

Vererbung von Block-Templates

Wenn ein erweitertes Theme benutzerdefinierte Block-Templates hat, werden diese nicht sofort vererbt, da das Subtheme Kopien aller Blöcke im Basisthema erzeugt und diese mit dem Subthemennamen als Präfix umbenennt. Twig-Block-Templates werden aus dem Blocknamen abgeleitet, was die Verbindung zwischen diesen Templates und ihrem Block stört. Die Behebung dieses Problems erfordert derzeit einen Workaround im Subtheme. Folgendes Hook wird in einer Datei shaved.theme im Subtheme-Verzeichnis eingefügt:

/**
 * Implements hook_theme_suggestions_HOOK_alter for blocks.
 */
function shaved_theme_suggestions_block_alter(&$suggestions, $variables) {

  // Load theme suggestions for blocks from parent theme.
  foreach ($suggestions as &$suggestion) {
    $suggestion = str_replace('shaved_', 'fluffiness_', $suggestion);
  }
}

Ersetzen Sie für Ihre eigenen Subthemes „shaved“ durch den Namen Ihres Subthemes und „fluffiness“ durch den Namen Ihres Basisthemas.

Unterschiede zu Drupal 7

Der auffälligste Unterschied zu Drupal 7 besteht darin, dass .info Dateien zu .info.yml Dateien wurden, die YAML-Syntax verwenden.