Mappenstructuur van Drupal 8-thema’s

Een thema is een verzameling bestanden die het presentatieniveau bepalen. Je kunt ook een of meerdere “subthema’s” of varianten van een thema maken. Alleen een .info.yml-bestand is vereist, maar de meeste thema’s en subthema’s gebruiken ook andere bestanden. Op deze pagina worden de bestanden en mappen opgesomd die zich in een typisch thema of subthema bevinden.

Locatie van thema’s

Je moet thema’s plaatsen in de map "themes" van je Drupal-installatie. Merk op dat de kern­thema’s van Drupal, zoals Bartik en Seven, zich bevinden in de map core/themes van je installatie.

Het is aanbevolen om toegevoegde thema’s in een submap “contrib” te plaatsen en je eigen thema’s in de map “custom”.

Elk afzonderlijk thema bevindt zich in een map die dezelfde naam heeft als het thema zelf. Bijvoorbeeld fluffiness. De naam moet in kleine letters zijn, beginnen met een letter en het underscore-teken (_) gebruiken in plaats van spaties.

De (gedeeltelijke) structuur van je Drupal-installatie kan er als volgt uitzien:

  |-core
  |  |-modules
  |  |-themes
  |  |  |-bartik
  |  |  |-seven
  ..
  |-modules
  |-themes
  |  |-contrib
  |  |  |-zen
  |  |  |-basic
  |  |  |-bluemarine
  |  |-custom
  |  |  |-fluffiness

Structuur van de themamap

Dit is een voorbeeld van bestanden en mappen die zich bevinden in de typische mappenstructuur van een thema:

  |-fluffiness.breakpoints.yml
  |-fluffiness.info.yml
  |-fluffiness.libraries.yml
  |-fluffiness.theme
  |-config
  |  |-install
  |  |  |-fluffiness.settings.yml
  |  |-schema
  |  |  |-fluffiness.schema.yml
  |-css
  |  |-style.css
  |-js
  |  |-fluffiness.js
  |-images
  |  |-buttons.png
  |-logo.svg
  |-screenshot.png
  |-templates
  |  |-maintenance-page.html.twig
  |  |-node.html.twig

Hieronder vind je een beschrijving van de meest voorkomende bestanden die je in een thema kunt tegenkomen.

*.info.yml
Een thema moet een .info.yml-bestand bevatten om het thema te definiëren. Onder andere definiëren .info.yml-bestanden metadata, bibliotheken en blokgebieden. Dit is het enige verplichte bestand in een thema.

*.libraries.yml
Het .libraries.yml-bestand wordt gebruikt om JavaScript- en CSS-bibliotheken te definiëren die door het thema kunnen worden geladen.

*.breakpoints.yml
Breakpoints bepalen waar het responsive design moet veranderen om te reageren op verschillende apparaten. Breakpoints worden gedefinieerd in het .breakpoints.yml-bestand.

*.theme
Het .theme-bestand is een PHP-bestand dat alle conditionele logica en preprocess­functies bevat. Het kan ook de basisinstellingen van een thema uitbreiden. Geavanceerde thema-instellingen maken.

CSS/
Het is aanbevolen om .css-bestanden in de submap 'css' te bewaren. De kernthema’s van Drupal 8 organiseren CSS-bestanden volgens de SMACSS-stijlhandleiding. Om CSS-bestanden door het thema te laten laden, moeten ze gedefinieerd worden in het .libraries.yml-bestand en kunnen ze worden overschreven of verwijderd in het .info.yml-bestand.

JS/
JavaScript-bestanden die specifiek zijn voor het thema worden bewaard in de 'js'-map. Om JavaScript-bestanden door het thema te laten laden, moeten ze worden gedefinieerd in het .libraries.yml-bestand.

images/
Het is aanbevolen om afbeeldingen in de submap 'images' te bewaren.

screenshot.png
Als het bestand screenshot.png zich in de themamap bevindt, wordt dit gebruikt op de pagina “Weergave”. Daarnaast kun je een screenshot definiëren in het .info.yml-bestand.

logo.svg
Als de themamap een vectorbestand (SVG) van het logo van je thema bevat, kan dit worden gebruikt in de header van de site. Logo’s kunnen ook geüpload worden via “Weergave” > “Instellingen”.

templates/
Sjablonen zorgen voor de HTML-markup en een deel van de presentatielogica. In tegenstelling tot Drupal 7 moeten de sjabloonbestanden in Drupal 8 (*.html.twig-bestanden) worden bewaard in de submap 'templates'. Als je bepaalde naamgevingsconventies volgt, vervangt Drupal de kernsjablonen door de sjablonen die jij aanlevert, waardoor je de standaardmarkup kunt overschrijven. Je kunt je sjablonen ook organiseren in submappen, bijvoorbeeld alle blocksjablonen in templates/block en alle view-sjablonen in templates/views.

Kern­thema Bartik: mappenstructuur

Als voorbeeld kun je de mappenstructuur bekijken van Bartik, die zich bevindt in core/themes/bartik:

  |-bartik.breakpoints.yml
  |-bartik.info.yml
  |-bartik.libraries.yml
  |-bartik.theme
  |-color
  |  |-color.inc
  |  |-preview.css
  |  |-preview.html
  |  |-preview.js
  |-config
  |  |-schema
  |  |  |-bartik.schema.yml
  |-css
  |  |-colors.css
  |  |-layout.css
  |  |-maintenance-page.css
  |  |-print.css
  |-images
  |  |-add.png
  |  |-required.svg
  |  |-tabs-border.png
  |-logo.svg
  |-screenshot.png
  |-templates
  |  |-block--search-form-block.html.twig
  |  |-block--system-branding-block.html.twig
  |  |-block--system-menu-block.html.twig
  |  |-block.html.twig
  |  |-comment.html.twig
  |  |-field--taxonomy-term-reference.html.twig
  |  |-maintenance-page.html.twig
  |  |-node.html.twig
  |  |-page.html.twig
  |  |-status-messages.html.twig

Meer informatie

Codeerstandaarden: organisatie van CSS-bestanden