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.