Het vinden van sjabloonbestanden met debugging
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.
Schakel Twig-debugging in via sites/default/services.yml door debug:true in te stellen onder twig.config (schakel dit uit in een productieomgeving). Als je Drupal 8 in een multisite-installatie gebruikt, moet je het bestand services.yml bewerken in de map van de specifieke site (sites/current_site) die je bouwt. Als services.yml nog niet bestaat, kopieer dan het bestand default.services.yml uit de map sites/default en hernoem dit naar services.yml. Voor gedetailleerde instructies over Twig-debugging, zie Debugging van gecompileerde Twig-sjablonen.
Na het leegmaken van de cache, bekijk je de broncode van de pagina; je zult code zien die lijkt op het onderstaande voorbeeld:
<!-- THEME DEBUG --> <!-- THEME HOOK: 'node' --> <!-- FILE NAME SUGGESTIONS: * node--view--frontpage--page-1.html.twig * node--view--frontpage.html.twig * node--1--teaser.html.twig * node--1.html.twig * node--article--teaser.html.twig * node--article.html.twig * node--teaser.html.twig x node.html.twig --> <!-- BEGIN OUTPUT from 'core/themes/classy/templates/content/node.html.twig' --> <article data-history-node-id="1" data-quickedit-entity-id="node/1" role="article" class="contextual-region node node--type-article node--promoted node--view-mode-teaser" about="/node/1" typeof="schema:Article" data-quickedit-entity-instance-id="0"> .... </article> <!-- END OUTPUT from 'core/themes/classy/templates/content/node.html.twig' -->
Een paar dingen om op te letten in deze debug-output:
- De bestandsnaamsuggesties worden weergegeven in volgorde van meest specifiek naar minst specifiek.
- Het huidige gebruikte sjabloonbestand is gemarkeerd met een “x”.
- Tussen
BEGIN OUTPUTenEND OUTPUTvind je het volledige pad naar het sjabloon dat gerenderd wordt.