Subthema’s

Subthema’s, net als elk ander thema, hebben één verschil: ze erven de resources van hun parent-thema. Er zijn geen beperkingen aan de ketenmogelijkheden die subthema’s met hun parent verbinden. Een subthema kan een child zijn van een ander subthema, en het kan vertakt en georganiseerd worden zoals jij dat nodig acht. Dit is wat subthema’s zoveel potentieel geeft.

Om een subthema te maken, definieer je het zoals elk ander thema en verklaar je het basisthema met behulp van de sleutel «base theme». (Let op: deze sleutel heeft geen underscore.)

Voorbeeld van een subthema: Fluffiness

Fluffiness is een voorbeeldsubthema dat Classy gebruikt als basisthema.

Dit is de mapstructuur waarin je de volgende bestanden krijgt:

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

Het info-bestand heet 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

Voeg het bestand fluffiness.libraries.yml toe om CSS/JS in te laden in de groep globale stijlen die hierboven in de library-sleutel is gedefinieerd.

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

Lees meer over het toevoegen van stylesheets (CSS) en JavaScript (JS) aan een Drupal 8-thema.

Als je een andere naam wilt gebruiken in plaats van «fluffiness», vervang dan simpelweg alle vermeldingen van «fluffiness» door je eigen naam («alle vermeldingen» omvatten ook de mapnaam). Bijvoorbeeld:

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

De tekst die je invoert in de regel «name:» van het info.yml-bestand is vrij te kiezen en hoeft niet exact overeen te komen met de bestandsnaam van je subthema. Bijvoorbeeld:

name: My Custom Theme
# (all the other lines omitted for brevity)

Subthema van een subthema

Bij het maken van een subthema van een subthema moet je het subthema als basisthema aangeven.

• Fluffiness: het eerste subthema van 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: subthema van Fluffiness (een subthema van het subthema van 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

Let op dat de parameter base theme: de machine name is van het basisthema, terwijl de parameter name: een beschrijvende naam is.

Overerving van thematische regio’s

Regio’s van een thema worden niet geërfd van het opgegeven basisthema. Als de parameter region: leeg blijft in het info.yml-bestand van je subthema of niet alle regio’s van het basisthema bevat, dan kunnen de standaardregio’s van Drupal gebruikt worden als fallback voor het plaatsen van blokken in je subthema. We raden sterk aan om alle regio’s die in je basisthema zijn gedefinieerd te kopiëren naar het info.yml-bestand van je subthema.

# Omdat regio’s niet worden geërfd, moet elke regio, inclusief standaard
# Drupal-regio’s en basisthema-regio’s, worden gedefinieerd in
# het subthema. Dit voorbeeld toont een subthema dat gebruik maakt
# van een subset van de standaard Drupal-regio’s (1), plus enkele custom
# regio’s gedefinieerd in het basisthema (2), en tenslotte drie
# "colophon"-gerelateerde regio’s die in dit subthema zijn gedefinieerd.
regions:
  # 1. Standaard Drupal-regio’s (ook gedefinieerd en gebruikt door basisthema).
  # 2. Regio’s gekopieerd van basisthema.
  # 3. Extra custom subthema-regio’s.
  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

Overerving van blockplaatsingen

In Drupal 8 kunnen thema’s geleverd worden met een map config/install/, waar vooraf ingestelde blockconfiguraties, inclusief plaatsing in thematische regio’s, worden geïmporteerd bij het inschakelen van het thema. Drupal kan deze blockconfiguraties en regio-indelingen van het basisthema erven, maar als de regio’s die in het info.yml-bestand van je subthema zijn gedefinieerd niet overeenkomen met die van het basisthema, kunnen onvoorspelbare plaatsingen in willekeurige regio’s optreden.

Overerving van block-sjablonen

Als het uit te breiden thema aangepaste block-sjablonen heeft, worden deze niet automatisch geërfd, omdat het subthema kopieën maakt van alle blocks in het parent-thema en deze hernoemt met de subthemanaam als prefix. De Twig-blocksjablonen zijn gebaseerd op de blocknaam, waardoor de koppeling tussen die sjablonen en hun block verloren gaat. De oplossing hiervoor vereist momenteel een hook in het subthema. Volgens de voorbeelden hierboven maken we een bestand met de naam shaved.theme in de map van het subthema. In dat bestand voegen we deze hook in:

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

  // Laad theme-suggesties voor blocks uit het parent-thema.
  foreach ($suggestions as &$suggestion) {
    $suggestion = str_replace('shaved_', 'fluffiness_', $suggestion);
  }
}

Voor je eigen subthema’s vervang je «shaved» door de naam van je eigen subthema, en «fluffiness» door de naam van je basisthema.

Verschillen met Drupal 7

Het meest opvallende verschil met Drupal 7 is dat .info-bestanden .info.yml-bestanden zijn geworden, die de YAML-syntaxis gebruiken.