Om te achterhalen welk sjabloon de markup genereert voor een bepaald element, kun je de ingebouwde debug-optie van Twig gebruiken. Deze instelling voegt HTML-commentaar toe aan de weergegeven uitvoer, waarin de gebruikte theme hooks, voorgestelde sjabloonbestandsnamen en het exacte Twig-bestand dat wordt gebruikt voor het renderen van een bepaald gedeelte van je markup, worden vermeld.

Filters in Twig kunnen worden gebruikt om variabelen te wijzigen. Filters worden gescheiden van de variabele door een pipe-symbool. Ze kunnen optionele argumenten tussen haakjes hebben. Meerdere filters kunnen aan elkaar gekoppeld worden. De uitvoer van het ene filter wordt doorgegeven aan het volgende.

Voorbeeld:

{{ content|safe_join(", ")|lower }}

Het kan nodig zijn om een element te renderen voordat je er een filter op toepast:

Twig biedt een aantal handige functies die je direct in sjablonen kunt gebruiken.

Lijst met Twig-functies

De Drupal-core voegt enkele extra functies toe die specifiek zijn voor Drupal. Deze zijn gedefinieerd in de TwigExtension-klasse.

Uit de officiële Twig-documentatie: «Macro’s zijn vergelijkbaar met functies in gewone programmeertalen. Ze zijn nuttig om vaak gebruikte HTML-idioom in herbruikbare elementen te plaatsen, zodat je jezelf niet hoeft te herhalen».

{% macro input(name, value, type, size) %}
  <input type="{{ type|default('text') }}" name="{{ name }}" value="{{ value|e }}" size="{{ size|default(20) }}" />
{% endmacro %}

Macro’s verschillen van native PHP-functies op enkele manieren:

Om het themen in Drupal 8 zo efficiënt mogelijk te maken en meer mogelijkheden voor aanpassing in Twig-sjablonen te bieden, volg je deze aanbevelingen:

Het algemene idee in Drupal 8 is dat je wilt vermijden om HTML direct in de PHP-code van je custom module te schrijven. Je wilt dit laten verlopen via Twig-sjablonen. Om nieuwe Twig-sjablonen in je module aan te maken, volg je deze stappen:

Stap 1: Definieer hook_theme in het .module-bestand
Maak een [module].module-bestand aan als dit nog niet bestaat en voeg de code toe die elk van je Twig-sjablonen definieert. De sleutel van elk element in de array is wat je later nodig hebt om het sjabloon aan te roepen. Gebruik geen koppeltekens in de bestandsnaam.

Twig-sjablonen kunnen worden uitgebreid met behulp van de volgende syntaxis -

{% extends 'html.twig' %}

Zie meer details op https://symfony.com/doc/current/templates.html#template-inheritance-and-layouts

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.

Classy is een basisthema van Drupal 8 en het basisthema dat wordt gebruikt door Bartik en Seven. De HTML-markup die je in Classy (en zijn subthema’s) vindt, bevat CSS-klassen die gestructureerd zijn op een manier die lijkt op de naamgevingsconventies van CSS BEM en SMACSS.

Documenteer alle CSS-class selectors die aanwezig zijn in het Classy-thema van Drupal 8 RC 2

formaat:

.foo { }
.foo-bar { }

bestandsnaam.html.twig / bestandsnaam.css