DXPR Builder-sjablonen overschrijven.
DXPR Builder rendert zijn elementen in de browser, vanuit sjablonen die in de editor zijn gecompileerd. Er is geen elementsjabloon dat je naar een thema kunt kopiëren. De module levert wel vier Twig-sjablonen mee voor zijn eigen pagina's en die overschrijf je op de normale Drupal-manier. Deze pagina somt ze op, legt uit waarom elementmarkup niet kan worden overschreven en wijst naar de routes die de module in plaats daarvan ondersteunt.
Twig-sjablonen die je kunt overschrijven
De sjablonen staan in de map templates/ van de module:
| Sjabloon | Gebruikt voor | Variabelen |
|---|---|---|
dxpr-license-info.html.twig |
Het gebruiksoverzicht op de pagina's User Licenses en Content items, en het License info-blok | used_count, total_count, limit, block_label, total_label, used_label, more_info_link |
page--dxpr-builder--media-library.html.twig |
De paginawrapper van het dialoogvenster Media Library op /dxpr_builder/media-library |
de standaard page-variabelen |
html--dxpr-builder--media-library.html.twig |
De <html>-wrapper van hetzelfde dialoogvenster |
de standaard html-variabelen |
page--people-list.html.twig |
Een startpunt voor de pagina People (/admin/people) met een licentieoverzicht |
de standaard page-variabelen plus user_license |
De eerste drie werken zoals ze zijn. Drupal laadt page--people-list.html.twig niet vanuit de
module. DXPR Builder voegt alleen de suggestie page__people_list en de variabele
user_license toe op de pagina People. Om het overzicht daar te tonen, kopieer je het bestand naar
je adminthema.
Om een sjabloon te overschrijven:
- Kopieer het bestand van
modules/contrib/dxpr_builder/templates/naar de maptemplates/van het thema dat het rendert. De adminpagina's en het dialoogvenster Media Library gebruiken het adminthema. Het blok License info gebruikt het thema van de regio waarin je het hebt geplaatst. - Bewerk de kopie.
- Wis de caches met
drush cr.
Waarom elementmarkup niet kan worden overschreven
De markup van elk element is een twig.js-sjabloon in dxpr_builder/templates/, bijvoorbeeld
elements/alert/alert.twig.html. De build compileert deze sjablonen naar
dxpr_builder/dxpr_templates.js. De editor rendert ze in de browser en slaat de resulterende HTML op
in het veld. Twee dingen volgen daaruit:
- Een gewijzigd sjabloon heeft een rebuild van de editor nodig. Sites die de editor vanaf het DXPR CDN laden kunnen een gewijzigd sjabloon helemaal niet gebruiken.
- Bewaarde pagina's behouden de HTML waarmee ze zijn opgeslagen. Een nieuw sjabloon geldt alleen voor elementen die na de wijziging worden gerenderd.
De module biedt dus geen override per site van elementsjablonen. Gebruik een van de routes hieronder.
Ondersteunde aanpassingsroutes
| Doel | Route |
|---|---|
| Herbruikbare lay-outs voor redacteurs | Paginasjablonen en Gebruikerssjablonen, beide gekozen in de builder |
| Het uiterlijk van elementen wijzigen | Aangepaste CSS in het thema, gericht op je eigen klassen of de az-*-klassen |
| Geef redacteurs benoemde stijlen | Utility-klassen uit de .info.yml van het thema, en aangepaste stijlen voor de teksteditor |
| Extra pictogrammensets | Pictogrambibliotheken |
| Nieuwe elementtypen | Aangepaste elementen maken |
Wat nu?
- Paginasjablonen: het sjabloonsysteem dat redacteurs gebruiken.
- DXPR Builder themen: hoe de CSS van de builder en je thema samen passen.