6.6. Werken met templates in Drupal. Wat zijn de templates in de core van Drupal.
We hebben al gezien dat Drupal Twig ingebouwd heeft en hoe je het kunt gebruiken. In dit artikel bespreken we hoe je met Drupal-templates werkt, welke templates er in het Stable-thema aanwezig zijn, hoe je deze kunt overschrijven en hoe je templates van verschillende Drupal-entiteiten kunt aanpassen.
Laten we beginnen met de templates van het Stable-thema. Ga naar de templatesmap van het thema Stable:
De templates zijn onderverdeeld volgens hun functie:
/core/themes/stable/templates/admin — templates voor de Views UI, admin-pagina’s, meldingen en rapporten.
/core/themes/stable/templates/block — block-templates.
/core/themes/stable/templates/content — templates voor nodes, reacties, taxonomietermen, RSS-elementen, zoekresultaten.
/core/themes/stable/templates/content-edit — templates voor filters en bewerkingsformulieren.
/core/themes/stable/templates/dataset — templates voor forums, RSS-kanalen, tabellen en lijsten.
/core/themes/stable/templates/field — veldtemplates voor verschillende veldtypes.
/core/themes/stable/templates/form — templates voor formulier-elementen.
/core/themes/stable/templates/layout — templates voor de paginavormgeving, regio’s, en het hoofdsjabloon html.html.twig waarin alle andere templates worden geladen.
/core/themes/stable/templates/misc — templates voor RSS-, RDF-icoontjes, meldingen en voortgangsbalken.
/core/themes/stable/templates/navigation — templates voor menu’s, boeken (Book-module), paginering, toolbar, verticale tabs en broodkruimels.
/core/themes/stable/templates/user — templates voor gebruikerspagina’s, gebruikersnamen, en handtekeningen bij forumberichten.
/core/themes/stable/templates/views — templates voor elementen van de Views-module.
Zoals je ziet, biedt het Stable-thema een breed scala aan templates die je kunt aanpassen. Om een template te overschrijven, kopieer je het gewenste bestand naar je subthema en bewerk je het daar. Je kunt alle templates kopiëren, maar het is beter om alleen die te kopiëren die je echt wilt aanpassen.
Templates voor content overschrijven (template suggestions)
Je kunt niet alleen bestaande templates aanpassen, maar ook je eigen templates toevoegen voor specifieke nodes, taxonomietermen, blokken, enzovoort. Hieronder volgen enkele voorbeelden.
HTML-template
Een HTML-template bevat de basisstructuur van de HTML-pagina.
Hoofdtemplate: html.html.twig (locatie: core/modules/system/templates/html.html.twig)
Mogelijke overschrijvingen:
- html--internalviewpath.html.twig
- html--node--id.html.twig
- html.html.twig
internalviewpath is het interne pad in Drupal, zoals node/15, taxonomy/term/46, user/2, enzovoort.
Meer informatie: html.html.twig
Pagina-template
Overschrijvingsopties: page--[front|internal/path].html.twig
Hoofdtemplate: page.html.twig (locatie: core/modules/system/templates/page.html.twig)
De mogelijke paginatemplates zijn zeer gevarieerd. De homepage-template heeft de hoogste prioriteit. Andere templates zijn gebaseerd op het interne pad van de pagina. De startpagina wordt ingesteld via:
/admin/config/system/site-information
Verwar het interne pad niet met aliassen. Bijvoorbeeld, een nieuwsnode kan de URL /news/node-title hebben, maar intern heeft deze het pad /node/node-id.
Voor de bewerkpagina van een node (http://example.com/node/1/edit) kun je deze templates gebruiken:
page--node--edit.html.twig
page--node--1.html.twig
page--node.html.twig
page.html.twig
Meer informatie: page.html.twig
Regio’s
Overschrijvingsopties: region--[region].html.twig
Hoofdtemplate: region.html.twig (locatie: core/modules/system/templates/region.html.twig)
De regiotemplate wordt gebruikt wanneer een regio inhoud heeft (via blokken of hook_page_build()). De regio’s worden gedefinieerd in het .info.yml-bestand van je thema.
Meer informatie: region.html.twig
Blokken
Overschrijvingsopties: block--[module|--delta].html.twig
Hoofdtemplate: block.html.twig (locatie: core/modules/block/templates/block.html.twig)
- block--module--delta.html.twig
- block--module.html.twig
- block.html.twig
module is de naam van de module die het blok weergeeft, en delta is de interne ID van dat blok.
Bijvoorbeeld, block--block--1.html.twig is het eerste blok dat via de administratie is toegevoegd. Als je in een aangepaste module een blok met delta “my-block” maakt, dan wordt de template block--custom--my-block.html.twig.
Voor de Views-module wordt de naam van de template samengesteld uit de viewnaam en de display-ID, bijvoorbeeld: block--views-block--front-news-block-1.html.twig.
Let erop dat underscores worden vervangen door koppeltekens. Namen zijn bovendien hoofdlettergevoelig.
Meer informatie: block.html.twig
Nodes (inhoudstypes)
Overschrijvingsopties: node--[type|nodeid]--[viewmode].html.twig
Hoofdtemplate: node.html.twig (locatie: core/modules/node/templates/node.html.twig)
- node--nodeid--viewmode.html.twig
- node--nodeid.html.twig
- node--type--viewmode.html.twig
- node--type.html.twig
- node--viewmode.html.twig
- node.html.twig
viewmode is de weergavemodus (Full, Teaser, RSS, enz.), type is het inhoudstype (bijv. News, Article, Page), en nodeid is het interne ID (nid).
Meer informatie: node.html.twig
Taxonomietermen
Overschrijvingsopties: taxonomy-term--[vocabulary-machine-name|tid].html.twig
Hoofdtemplate: taxonomy-term.html.twig (locatie: core/modules/taxonomy/templates/taxonomy-term.html.twig)
Je kunt de template op vocabulaire of termniveau overschrijven. Underscores worden vervangen door koppeltekens.
Meer informatie: taxonomy-term.html.twig
Velden
Overschrijvingsopties: field--[type|name|content-type].html.twig
Hoofdtemplate: field.html.twig (locatie: core/modules/system/templates/field.html.twig)
- field--field-name--content-type.html.twig
- field--content-type.html.twig
- field--field-name.html.twig
- field--field-type.html.twig
- field.html.twig
Underscores in namen worden vervangen door koppeltekens.
Meer informatie: field.html.twig
Reacties
Overschrijvingsopties: comment--node-[type].html.twig
Hoofdtemplate: comment.html.twig (locatie: core/modules/comment/templates/comment.html.twig)
Je kunt voor elk inhoudstype een aparte commenttemplate gebruiken, bijvoorbeeld comment--node-article.html.twig.
Meer informatie: comment.html.twig
Views
Views-templates kunnen worden overschreven op basis van de machinenaam, display-ID en type (pagina, blok, enz.). De belangrijkste templates zijn views-view.html.twig en views-view-unformatted.html.twig.
Bij gebruik van velden wordt ook views-view-fields.html.twig gebruikt.
Forums
Overschrijvingsopties: forums--[[container|topic]--forumID].html.twig
Hoofdtemplate: forums.html.twig (locatie: core/modules/forum/templates/forums.html.twig)
Je kunt aparte templates maken voor containers en topics.
Meer informatie: forums.html.twig
Onderhoudsmodus
Overschrijvingsopties: maintenance-page--[offline].html.twig
Hoofdtemplate: maintenance-page.html.twig (locatie: core/modules/system/templates/maintenance-page.html.twig)
Meer informatie: maintenance-page.html.twig
Zoekresultaten
Overschrijvingsopties: search-result--[searchType].html.twig
Hoofdtemplate: search-result.html.twig (locatie: core/modules/search/templates/search-result.html.twig)
Bijvoorbeeld, voor zoeken in nodes gebruik je search-result--node.html.twig, en voor gebruikers search-result--user.html.twig.