DXPR-Builder-Vorlagen überschreiben.

DXPR Builder lernenWebsite verwaltenMarke umsetzen

DXPR Builder rendert seine Elemente im Browser, aus Vorlagen, die in den Editor kompiliert sind. Es gibt keine Elementvorlage, die Sie in ein Theme kopieren können. Das Modul bringt vier Twig-Vorlagen für eigene Seiten mit, und Sie überschreiben sie auf dem normalen Drupal-Weg. Diese Seite listet sie, erklärt, warum sich Element-Markup nicht überschreiben lässt, und zeigt auf die Routen, die das Modul stattdessen unterstützt.

Twig-Vorlagen, die Sie überschreiben können

Die Vorlagen liegen im templates/-Ordner des Moduls:

Vorlage Genutzt für Variablen
dxpr-license-info.html.twig Die Nutzungsübersicht auf den Seiten User Licenses und Content items sowie der License info-Block used_count, total_count, limit, block_label, total_label, used_label, more_info_link
page--dxpr-builder--media-library.html.twig Der Seiten-Wrapper des Medienbibliothek-Dialogs unter /dxpr_builder/media-library die Standard-page-Variablen
html--dxpr-builder--media-library.html.twig Der <html>-Wrapper desselben Dialogs die Standard-html-Variablen
page--people-list.html.twig Ein Startpunkt für die People-Seite (/admin/people) mit Lizenzübersicht die Standard-page-Variablen plus user_license

Die ersten drei funktionieren wie sie sind. Drupal lädt page--people-list.html.twig nicht aus dem Modul. DXPR Builder fügt nur den page__people_list-Vorschlag und die user_license-Variable auf der People-Seite hinzu. Um die Übersicht dort zu zeigen, kopieren Sie die Datei in Ihr Admin-Theme.

So überschreiben Sie eine Vorlage:

  1. Kopieren Sie die Datei aus modules/contrib/dxpr_builder/templates/ in den templates/-Ordner des Themes, das sie rendert. Die Admin-Seiten und der Medienbibliothek-Dialog nutzen das Admin-Theme. Der Block License info nutzt das Theme der Region, in die Sie ihn gelegt haben.
  2. Bearbeiten Sie die Kopie.
  3. Leeren Sie Caches mit drush cr.

Warum sich Element-Markup nicht überschreiben lässt

Das Markup jedes Elements ist eine twig.js-Vorlage in dxpr_builder/templates/, zum Beispiel elements/alert/alert.twig.html. Der Build kompiliert diese Vorlagen in dxpr_builder/dxpr_templates.js. Der Editor rendert sie im Browser und speichert das Ergebnis-HTML ins Feld. Daraus folgen zwei Dinge:

  • Eine geänderte Vorlage braucht einen Neubau des Editors. Websites, die den Editor vom DXPR-CDN laden, können eine geänderte Vorlage gar nicht nutzen.
  • Gespeicherte Seiten behalten das HTML, mit dem sie gespeichert wurden. Eine neue Vorlage wirkt nur auf Elemente, die nach der Änderung gerendert werden.

Daher bietet das Modul kein seitenweites Überschreiben von Elementvorlagen. Nutzen Sie eine der Routen unten.

Unterstützte Anpassungsrouten

Ziel Route
Wiederverwendbare Layouts für die Redaktion Seitenvorlagen und Benutzervorlagen, beide im Builder gewählt
Aussehen von Elementen ändern Eigenes CSS im Theme, gezielt auf eigene Klassen oder die az-*-Klassen
Der Redaktion benannte Stile geben Dienstklassen aus der .info.yml des Themes, und eigene Stile für den Texteditor
Zusätzliche Icon-Sets Icon-Bibliotheken
Neue Elementtypen Eigene Elemente erstellen

Wie geht es weiter?