6.2. Waaruit een Drupal 8-thema bestaat. Overzicht van het Stark-thema.

In Drupal 7 kon je snel en eenvoudig een subthema maken op basis van Zen en beginnen met het bouwen van je website. Sinds Drupal 8 zijn er ook verschillende basisthema’s waarmee je je eigen thema kunt maken. Maar voordat je een subthema op basis daarvan aanmaakt, is het belangrijk om eerst te begrijpen waar alles zich bevindt.

De Drupal-ontwikkelaars raden aan om als voorbeeld het Stark-thema te bekijken. Dit thema is toegevoegd aan Drupal om te laten zien hoe een thema is opgebouwd. Laten we eens kijken wat er binnen dit thema zit:

Bestand stark.info.yml

We beginnen met het bestand stark.info.yml. In Drupal 7 werden de themagegevens opgeslagen in .info-bestanden, maar in Drupal 8 wordt overal het YML-formaat gebruikt. Het bestand .info is dus nu info.yml en gebruikt de YML-syntaxis, waarbij sleutels en waarden worden gescheiden door een dubbele punt.

Naam van het thema:

name: Stark

Het type project kan een thema of een module zijn. In dit geval is het een thema:

type: theme

Beschrijving die wordt weergegeven op de themapagina:

description: 'Een bewust eenvoudig thema zonder opmaak om de standaard HTML en CSS van Drupal te tonen. Leer hoe je een eigen thema kunt maken vanuit Stark in de Theming Guide.'

Groepering van Drupal-projecten voor overzicht — bijvoorbeeld, wanneer modules worden ingeschakeld, worden ze gegroepeerd in tabbladen:

package: Core

De versie voor bijgedragen modules wordt automatisch ingesteld, dus hier wordt de variabele VERSION vermeld en de regel is becommentarieerd. In feite wordt de versie hieronder weergegeven:

# version: VERSION

De Drupal-coreversie is ook becommentarieerd en wordt automatisch toegevoegd door drupal.org:

Voor Drupal 8.8 en hoger:

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

Voor Drupal 8.8 en lager:

# core: 8.x

Als het thema geen basisthema gebruikt, wordt dat aangegeven met false:

base theme: false

Het blok met de versie-informatie en core-gegevens wordt automatisch toegevoegd door drupal.org:

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

Bestand stark.libraries.yml

Hier worden de CSS- en JS-bestanden van het thema toegevoegd:

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

We kunnen ook JavaScript-bestanden toevoegen:

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

Merk ook op dat jQuery nu optioneel is in Drupal en mogelijk niet standaard op de pagina wordt geladen. Als je jQuery gebruikt in je eigen script, moet je het toevoegen aan je thema:

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

Bovendien kun je instellen welke CSS-bestanden altijd moeten worden weergegeven en welke alleen in de printversie:

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

Beschrijving en hulpbestanden: README.txt, screenshot.png

Deze bestanden tonen hoe het thema eruitziet en geven uitleg over installatie en bijzonderheden bij gebruik.

Bestand logo.svg

Het logobestand wordt automatisch toegevoegd aan het ontwerp van het thema als het zich in de hoofdmap bevindt. Je kunt ook je eigen logo uploaden via de thema-instellingen in de beheerinterface.

Map config en bestand stark.schema.yml

Nog een YML-bestand waarin de instellingen van het thema worden opgeslagen. Voor het Stark-thema bevat dit alleen de titel voor de instellingenpagina van het thema.

Mappen css en js

Deze mappen bevatten aangepaste CSS- en JavaScript-bestanden. Vergeet niet dat het niet voldoende is om een bestand in de map te plaatsen; elk bestand moet afzonderlijk worden opgenomen via stark.libraries.yml.

Bestand stark.breakpoints.yml

Dit bestand definieert de schermgroottes voor mobiele versies van de site. Dit is een nieuwe functie in Drupal, en we zullen dit later in detail bespreken.

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

Zo ziet het Stark-thema eruit, dat bedoeld is om kennis te maken met de structuur van een Drupal-thema. In het volgende artikel bekijken we hoe je je eigen thema maakt op basis van het Stable-thema.