Hoe theming werkt in Drupal

In een notendop: Drupal genereert HTML en jij kan een thema maken om deze HTML te stijlen met CSS en JavaScript.

Dat gezegd hebbende, het is ook mogelijk om de manier waarop Drupal de HTML genereert te manipuleren. Maar ik heb geleerd dat het makkelijker is (helemaal voor beginners) om te werken met wat je door Drupal aangeleverd krijgt. Gebruik de HTML die Drupal geneert en probeer die alleen te wijzigen als er geen andere oplossing mogelijk is. Op deze manier een Drupal thema maken heeft de volgende voordelen:

• Je hoeft je niet druk te maken hoe je dingen moet noemen (zoals CSS klassen) omdat Drupal dit al voor je doet
• Je bespaart tijd. Het aanpassen van de manier waarop Drupal HTML genereert kan een tijdrovende klus zijn

Het nadeel is echter dat de HTML niet altijd netjes en clean is. Drupal genereert een hele hoop div elementen wat erop neerkomt dat je flink wat moet klikken als je bepaalde elementen wil inspecteren.

Creëer je eigen boilerplate thema

Ik heb zelf een boilerplate thema (een thema waarbij alle basisonderdelen ingebouwd zijn) gemaakt die ik elke keer dupliceer en aanpas als ik een thema moet maken voor een Drupal website. Als ik aan het themen ben en ik heb het gevoel dat ik iets voor de zoveelste keer aan het doen ben (bijvoorbeeld een sticky header of fat footer) dan zorg ik ervoor dat het in mijn boilerplate thema komt. Dit bespaart me tijd en is in lijn met het onder coders populaire DRY (Don't Repeat Yourself) mantra.

Het is mogelijk om te beginnen met een startersthema zoals Bootstrap of Barrio, maar ik kwam erachter dat het meestal veel werk was om onnodige CSS code te verwijderen of om de standaardstijlen aan te passen. Dit soort Drupal thema's gebruiken zorgen er ook voor dat je website groter (in aantal te downloaden kilobytes) wordt en dus langzamer. Dit is slecht voor je zoekmachineoptimalisatie en voor de duurzaamheid van je website. Daarnaast leer je veel meer van het maken van je eigen thema dan dat je doet wanneer je de CSS van iemand anders gebruikt. Dus laten we beginnen met het maken van onze eigen boilerplate thema.

Jouw thema kenbaar maken aan Drupal

Ga naar de themes map in de root van jouw Drupal website. Maak een map aan met de naam van jouw thema. Dit kan van alles, maar zorg er wel voor dat het allemaal kleine letters zijn zonder speciale tekens. Mijn boilerplate thema heet bones (cool toch?). Nu kun je in deze map het volgende bestand aanmaken: mijnthema.info.yml. In mijn geval is dat bones.info.yml. Voeg het volgende toe aan jouw mijnthema.info.yml:

name: MyTheme

type: theme

description: 'Dit is MyTheme.'

core_version_requirement: ^9

libraries:

  - mijnthema/global-styling

  - mijnthema/global-scripts

base theme: classy

regions:

  header: 'Header'

  hero: 'Hero'

  tabs: 'Tabs'

  content: 'Content'

  footer: 'Footer'

ckeditor_stylesheets:

- css/style.css  

Een korte uitleg van elk element:

• Bij name vul je de naam van jouw thema in. Dit wordt getoond in de backend wanneer je het thema installeert
• Het type is theme omdat dat is wat we aan het maken zijn
• De description bevat een omschrijving van jouw thema. Dit wordt ook getoond in de backend
• Met core_version_requirement kun je bepalen met welke Drupal versie jouw thema compatibel is. In dit geval is dat Drupal 9
• Met het libraries element kun je bepalen welke CSS en JavaScript bestanden er geladen moeten worden. Meer details hierover in een volgende stap
• Als je iets invult bij base theme worden alle CSS, JavaScript en aangepaste template files van dit thema gebruikt. Je hebt dan de mogelijkheid om specifieke CSS, JavaScript of templates te overschrijven. Als base theme gebruik ik classy. Dit thema zit in de Drupal core en levert extra CSS klassen voor de gerenderde HTML elementen. Dit maakt het voor jou als frontender een stuk makkelijker
• De regions zijn de gebieden in jouw thema waar je blokken kan plaatsen. Je kan dit naar hartenlust aanpassen, maar let wel op dat je deze ook moet opnemen in je page.html.twig. Ik ga hier dieper op in bij een volgende stap
• Het instellen van de ckeditor_stylesheets is een handige feature waarmee je de styling van je website beschikbaar maakt in de Drupal WYSIWYG editor als je nodes aanmaakt of bewerkt

Drupal laten weten waar jouw CSS en JavaScript bestanden staan

Als volgt maken we een themanaam.libraries.yml bestand aan. In dit bestand geef je aan welk CSS en JavaScript het Drupal thema moet gebruiken. Mijn libraries.yml bestand ziet er als volgt uit:

global-styling:

  version: 1.x

  css:

    theme:

      css/normalize.css: {}

      css/style.css: {}

global-scripts:

  version: 1.x

  js: 

    js/script.js: {}

CSS en JavaScript bestanden aanmaken

De bestanden en mappen die vermeld zijn in het libraries.info.yml bestand zijn nog niet aangemaakt. De volgende stap is daarom om naar de map van je Drupal theme te gaan en daar een map genaamd css in aan te maken. Binnen deze map maak je het style.css bestand aan. Deze CSS stylesheet gebruik je voor het merendeel van al je CSS code. 

Het is ook verstandig om normalize.css toe te voegen aan deze map. Dit zorgt ervoor dat standaard stijlen er hetzelfde uitzien in (vrijwel) alle verschillende browsers. Dit bespaart je redelijk wat kopzorgen, en werk.

Ga terug naar de map van je Drupal thema en maak een map genaamd js aan. In deze map creëer je het bestand script.js. In dit bestand kun je al je eigen JavaScript plaatsen. Wanneer ik aan het themen ben gebruik ik dit bestand niet veel. Momenteel gebruik ik enkel een stukje JavaScript om een extra CSS klasse aan de header toe te voegen wanneer een bezoeker naar beneden scrolt. Op deze manier kan ik de header, meestal met een logo en navigatie, compacter maken als de bezoeker naar beneden scrolt.

De door Drupal gegenereerde HTML overschrijven

Als je de HTML die gegenereerd wordt door Drupal wil overschrijven moet je eerst een templates map aanmaken in je Drupal theme folder. Hier kun je zogenaamde twig bestanden in aanmaken waarmee je Drupal kan vertellen hoe de HTML precies gegenereerd moet worden.

Deze bestand vanaf nul helemaal zelf aanmaken is veel werk en vaak ook onnodig. Het beste kun je navigeren naar de map van de base theme die je gebruikt en gespecificeerd hebt in je themanaam.info.yml bestand. In mijn geval is dat Classy welke te vinden is in core/themes/classy. Hier is ook een templates map in aanwezig. Binnen de map vind je weer allemaal mappen waar de twig files op een logische wijze zijn gegroepeerd op basis van de verschillende Drupal onderdelen. Een map die in het bijzonder belangrijk is, is de layout map. In deze map vind je (naast andere) twee bestanden die je wil overschrijven, namelijk:

• html.html.twig
• page.html.twig

Kopieer deze bestanden naar je eigen templates map in de map van je Drupal thema. Je kan, net zoals bij Classy, de twig bestanden in een layout map zetten. Dit is niet verplicht, maar zorgt er wel voor dat alles overzichtelijk blijft.

Als je het html.html.twig bestand opent zie dat dit het bestand is waar de <html>, <body> en de <head> tag gegenereerd worden. Deze kun je overschrijven om er bijvoorbeeld scripts in te plaatsen zoals Google Fonts. De reden waarom ik dit bestand altijd overschrijf is omdat ik de regels toevoeg die ik laat generen door deze favicon generator.

Het page.html.twig bestand bevat alle elementen die in de <body> tag getoond worden. Dit is belangrijk omdat je hier kan bepalen welke regio's waar getoond moeten worden. Deze regio's heb je gespecificeerd in het themanaam.info.yml bestand. Het tonen van een regio doe je als volgt:

  {% if page.hero %}

    {{ page.hero }}

  {% endif %}

Oftewel laat de hero regio zien als deze content (een blok) heeft. Als je de {{ page.hero }} regel niet tussen de if statements plaatst zal Drupal altijd de (lege) regio genereren.

Jouw logo en screenshot

Als je een logo genaamd logo.svg upload in jouw Drupal thema map kan deze door Drupal gebruikt worden in een Site Branding blok bij Structure > Block layout.

Daarnaast kun je een screenshot.png bestand uploaden. Deze wordt getoond in het thema overzicht bij Appearance. Het beste is om een formaat van 588 pixels breed en 438 pixels hoog aan te houden.

Hoe nu verder?

Ga naar Appearnce in de Drupal backend. Als het goed is moet hier nu bij Uninstalled themes jouw nieuw aangemaakte thema staan met de correcte naam, omschrijving en screenshot. Klik op Install and set as default bij jouw nieuwe Drupal thema.

Nu kun je jouw CSS en JavaScript toevoegen aan het thema en beginnen met themen! Als sommige aanpassingen niet direct zichtbaar zijn dan kan dat zijn om de cache aanstaat. Navigeer naar Configuration > Development > Performance en zet Aggregate CSS files en Aggregate JavaScript files uit.

Als je vragen hebt om het themen van een Drupal website laat het mij dan weten door hieronder een reactie achter te laten. Vergeet ook om je in te schrijven op mijn Drupal nieuwsbrief :)