6.3. Maak je eigen Drupal-thema op basis van het Stable-thema.

Vanaf dit artikel gaan we ons eigen thema maken in Drupal. In dit gedeelte van de handleiding zullen we de basisprincipes van theming in Drupal bespreken — waar alles zich bevindt, hoe je CSS en JavaScript kunt toevoegen en gebruiken. Ons thema zal gebaseerd zijn op het Stable-basisthema uit de core. Als je Drupal wilt leren, is Stable een geweldige start. Je moet niet beginnen met Bootstrap, want je zult voortdurend vragen en fouten tegenkomen. In het volgende gedeelte van de handleiding, met onze kennis van het maken van thema’s in Drupal, gaan we werken met Bootstrap.

Hier is de officiële documentatie:

https://www.drupal.org/theme-guide/8

Maak een map aan voor ons thema

We plaatsen alle nieuwe thema’s in de map /themes. Je kunt, zoals in Drupal 7, thema’s plaatsen in sites/all/themes, maar het is beter om de nieuwe Drupal-structuur te gebruiken en thema’s direct in de map /themes te plaatsen.

Ik maak de map /themes/drupalbook aan, jij kunt je thema een andere naam geven als je wilt:

Maak een bestand met basisinformatie aan: drupalbook.info.yml

In de map van ons thema maken we het bestand theme_name.info.yml aan:

Dit artikel geeft gedetailleerde informatie over het YAML-formaat:

https://en.wikipedia.org/wiki/YAML

Let op twee belangrijke punten:

1) Gebruik geen tabs voor inspringing, alleen spaties.

2) Inspringingen moeten minstens één spatie zijn (dus name: value, niet name:value).

Voeg in het bestand drupalbook.info.yml het volgende in:

name: Drupalbook
type: theme
base theme: stable
description: Mijn eerste Drupal-thema.
core: 8.x
core_version_requirement: ^8 || ^9
libraries:
  - drupalbook/global-styling
regions:
  header: Header
  content: Content  # Deze regio is verplicht
  sidebar_first: 'Sidebar first' # Vergeet de aanhalingstekens niet
  footer: Footer

Laten we bekijken wat elke regel betekent:

name – de naam van ons thema. De machinale naam van het thema is de naam van de map en het bestand drupalbook.info.yml, dus drupalbook.

type – het projecttype in Drupal, in dit geval een theme.

base theme – we erven van het Stable-thema. Als het thema volledig vanaf nul is opgebouwd, schrijf dan false.

description – een beschrijving van het thema die wordt weergegeven in het beheerpaneel.

core – de versie van de Drupal-core waarvoor dit thema is bedoeld.

libraries – hier voegen we bibliotheken toe aan ons thema. Dit doen we via een apart bestand drupalbook.libraries.yml. Let op de naam global-styling, die we daar zullen gebruiken.

regions – de regio’s van ons thema. De regio content is verplicht — Drupal toont de inhoud via deze regio. Als een regio-naam uit meerdere woorden bestaat, plaats die dan tussen aanhalingstekens. Machinale namen worden geschreven met underscores.

Maak nu de bibliotheek voor ons thema aan

Bestand: drupalbook.libraries.yml

Voeg de volgende regels toe aan drupalbook.libraries.yml:

global-styling:
  version: 1.x
  css:
    theme:
      css/style.css: {}
      css/print.css: { media: print }
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery

En laten we nu regel voor regel uitleggen wat dit betekent:

global-styling – dit is precies de naam die we eerder in drupalbook.info.yml hebben opgegeven.

css – hier voegen we CSS-bestanden toe. Merk op dat we voor de printversie van de site media: print hebben opgegeven.

js – hier voegen we JavaScript-bestanden toe. jQuery is optioneel in Drupal, dus als we jQuery willen gebruiken in onze aangepaste scripts, moeten we dit toevoegen als afhankelijkheid:

dependencies:
  - core/jquery

Maak de mappen css en js aan en plaats de bestanden erin:

css/style.css

css/print.css

js/custom.js

Aangezien we erven van het Stable-thema, erven we ook de templates daarvan. Ga nu op onze site naar het gedeelte Weergave (Appearance):

/admin/appearance

Leeg de cache en schakel ons thema in:

Nu is ons nieuwe Drupalbook-thema actief op onze site: