logo

Extra Block Types (EBT) - Neue Erfahrung im Layout Builder❗

Extra Block Types (EBT) - gestylte, anpassbare Blocktypen: Diashows, Registerkarten, Karten, Akkordeons und viele andere. Eingebaute Einstellungen für Hintergrund, DOM Box, Javascript Plugins. Erleben Sie die Zukunft der Layouterstellung schon heute.

Demo EBT-Module EBT-Module herunterladen

❗Extra Absatztypen (EPT) - Erfahrung mit neuen Absätzen

Extra Paragraph Types (EPT) - analoger, auf Absätzen basierender Satz von Modulen.

Demo EPT-Module EPT-Module herunterladen

Scroll

6.6. Arbeiten mit Templates in Drupal. Was sind die Templates im Kern von Drupal.

27/05/2025, by Ivan

Wir haben bereits gesehen, dass Twig in Drupal integriert ist und wie man es verwendet. In diesem Artikel werden wir besprechen, wie man mit Drupal-Templates arbeitet, welche Templates im Stable-Theme enthalten sind, wie man Stable-Templates überschreibt und wie man Templates verschiedener Drupal-Entitäten überschreibt.

Beginnen wir also mit den Templates des Stable-Themes, gehen Sie zum Templates-Ordner des Stable-Themes:

Templates in Drupal 8

Templates sind nach funktionalen Attributen unterteilt:

  • /core/themes/stable/templates/admin - Templates für Views UI, Seiten und Administrationsobjekte, Nachrichten- und Bericht-Templates.
  • /core/themes/stable/templates/block - Block-Templates.
  • /core/themes/stable/templates/content - Templates für Knoten, Kommentare, Taxonomie-Begriffe, RSS-Elemente, Suchergebnisse.
  • /core/themes/stable/templates/content-edit - Templates für Filter und Bearbeitungsformulare.
  • /core/themes/stable/templates/dataset - Forum-Templates, RSS-Kanäle, Tabellen, Listen (ul).
  • /core/themes/stable/templates/field - Feld-Templates verschiedener Typen.
  • /core/themes/stable/templates/form - Templates für Formularelemente (verschiedene Feldtypen).
  • /core/themes/stable/templates/layout - Templates für die Seitenstruktur (page.html.twig), Regionen, das Haupttemplate html.html.twig, in das alle anderen Templates eingebettet sind.
  • /core/themes/stable/templates/misc - Templates für RSS, RDF-Markup, Icons, Drupal-Nachrichten, Fortschrittsbalken.
  • /core/themes/stable/templates/navigation - Templates für Menüs, Bücher (Book-Modul), Pager, Toolbar, vertikale Tabs, Breadcrumbs.
  • /core/themes/stable/templates/user - Templates für Benutzerseite, Benutzernamen, Signatur des Forumsbeitrags.
  • /core/themes/stable/templates/views - Templates verschiedener Elemente des Views-Moduls.

Wie Sie sehen, bietet das Stable-Theme eine große Auswahl an Templates zum Überschreiben. Um diese Templates zu überschreiben, kopieren Sie einfach das benötigte Template in Ihr Subtheme und passen es dort nach Wunsch an. Es ist möglich, alle Templates zu kopieren, aber ich empfehle, nur die notwendigen Templates in Ihr Subtheme zu kopieren.

Überschreiben von Content-Templates (Template-Vorschläge)

Sie können nicht nur bestehende Templates überschreiben, sondern auch eigene Templates für einzelne Knoten, Taxonomie-Begriffe, Blöcke usw. hinzufügen. Hier einige Beispiele für Template-Overrides.

HTML-Template

Ein HTML-Template enthält die Grundstruktur einer HTML-Seite.

Haupttemplate: html.html.twig (Basispfad: core/modules/system/templates/html.html.twig)

Beispiele für Overrides:

  1. html--internalviewpath.html.twig
  2. html--node--id.html.twig
  3. html.html.twig

internalviewpath ist der interne Pfad in Drupal, z.B. node/15, taxonomy/term/46, user/2 usw.

Weitere Informationen finden Sie in der Dokumentation zu html.html.twig

Seiten-Template

Override-Optionen: page--[front|internal/path].html.twig

Haupttemplate: page.html.twig (Basispfad: core/modules/system/templates/page.html.twig)

Es gibt viele mögliche Seitentemplates. Das Frontpage-Template hat die höchste Priorität. Andere Templates richten sich nach dem internen Pfad. Die Startseite kann unter Seiten-Konfiguration - Grundlegende Site-Einstellungen - Startseite gesetzt werden:

/admin/config/system/site-information

Verwechseln Sie nicht den internen Pfad mit Aliasen, z.B. kann die News-Node den Pfad /news/node-title haben, intern aber /node/node-id.

Für die Node-Bearbeitungsseite http://www.example.com/node/1/edit können Sie folgende Templates überschreiben:

page--node--edit.html.twig
page--node--1.html.twig
page--node.html.twig
page.html.twig

Weitere Informationen in der Dokumentation zu page.html.twig

Regionen

Override-Optionen: region--[region].html.twig

Standard: region.html.twig (Basispfad: core/modules/system/templates/region.html.twig)

Das Region-Template wird verwendet, wenn die Region Inhalte durch das Blocksystem oder die Funktion hook_page_build() enthält. Die Namen der Regionen werden in der theme.info.yml Datei definiert.

Weitere Informationen: region.html.twig

Blöcke

Override-Optionen: block--[module|--delta].html.twig

Haupttemplate: block.html.twig (Basispfad: core/modules/block/templates/block.html.twig)

  1. block--module--delta.html.twig
  2. block--module.html.twig
  3. block.html.twig

'module' ist der Name des Moduls, das den Block anzeigt, 'delta' ist die interne ID des Blocks im Modul.

Beispiel: block--block--1.html.twig ist der erste Block, der durch das Admin-Modul Block hinzugefügt wurde. Wenn Sie ein eigenes Modul mit dem Block-delta „my-block“ erstellen, lautet das Template block--custom--my-block.html.twig.

Für das Views-Modul wird das Block-Template wie folgt überschrieben: Name der View "front_news" und Display-ID "block_1" ergeben das Template: block--views-block--front-news-block-1.html.twig

Beachten Sie, dass Unterstriche durch Bindestriche ersetzt werden.

In Drupal können Sie nicht ohne Weiteres ein separates Template für einen Block in einer bestimmten Region angeben.

Beachten Sie, dass die Muster-Namen case-sensitiv sind. Wenn Ihr Modul MyModule heißt, lautet das Block-Template block--MyModule.html.twig.

Weitere Informationen in der Dokumentation zu block.html.twig.

Inhalte (Nodes)

Override-Optionen: node--[type|nodeid]--[viewmode].html.twig

Haupttemplate: node.html.twig (Basispfad: core/modules/node/templates/node.html.twig)

Node-Templates können folgendermaßen überschrieben werden:

  1. node--nodeid--viewmode.html.twig
  2. node--nodeid.html.twig
  3. node--type--viewmode.html.twig
  4. node--type.html.twig
  5. node--viewmode.html.twig
  6. node.html.twig

Viewmode bezeichnet die Anzeigeart (Full, Teaser, RSS, Token, etc.). Type ist der Inhaltstyp (z.B. News, Articles). Nodeid ist die ID des Knotens.

Weitere Informationen in der Dokumentation zu node.html.twig.

Taxonomie-Begriffe

Override-Optionen: taxonomy-term--[vocabulary-machine-name|tid].html.twig

Haupttemplate: taxonomy-term.html.twig (Basispfad: core/modules/taxonomy/templates/taxonomy-term.html.twig)

Taxonomie-Templates können folgendermaßen überschrieben werden:

  1. taxonomy-term--tid.html.twig
  2. taxonomy-term--vocabulary-machine-name.html.twig
  3. taxonomy-term.html.twig

Alle Unterstriche in den Vokabularnamen müssen durch Bindestriche ersetzt werden.

Weitere Informationen in der Dokumentation zu taxonomy-term.html.twig.

Felder

Override-Optionen: field--[type|name[--content-type]|content-type].html.twig

Haupttemplate: field.html.twig (Basispfad: core/modules/system/templates/field.html.twig)

Templates können folgendermaßen überschrieben werden:

  1. field--field-name--content-type.html.twig
  2. field--content-type.html.twig
  3. field--field-name.html.twig
  4. field--field-type.html.twig
  5. field.html.twig

Alle Unterstriche in Typ- und Feldnamen werden durch Bindestriche ersetzt.

Weitere Informationen in der Dokumentation zu field.html.twig.

Kommentare

Override-Optionen: comment--node-[type].html.twig

Haupttemplate: comment.html.twig (Basispfad: core/modules/comment/templates/comment.html.twig)

Sie können separate Templates für Kommentare jedes Inhaltstyps definieren, z.B. comment--node-article.html.twig.

Weitere Informationen in der Dokumentation zu comment.html.twig.

Außerdem kann ein separates Template für das Wrapper-Element der Kommentare gesetzt werden:

Override-Optionen: comment-wrapper--node-[type].html.twig

Haupttemplate: comment-wrapper.html.twig (Basispfad: core/modules/comment/templates/comment-wrapper.html.twig)

Views

Alle Views-Templates können mit dem maschinellen Namen der View, der Display-ID, dem Display-Typ (Seite, Block o.ä.) oder Kombinationen davon überschrieben werden.

Mindestens zwei Templates werden für jede View verwendet. Das erste ist views-view.html.twig:

Das zweite Template richtet sich nach dem Darstellungsstil der View (z.B. unformatierte Liste, Tabelle, Grid, HTML-Liste). Standardmäßig wird das unformatierte Template views-view-unformatted.html.twig verwendet.

Wenn nicht fertig gerenderte Entities (z.B. volle Knoten oder Teaser) über Views angezeigt werden, sondern Felder, verwendet Views ein weiteres Template für Felder: views-view-fields.html.twig, das ebenfalls überschrieben werden kann.

Folgende Templates können überschrieben werden:

View Name - foobar (Maschinenname)
Display Format - unformatted (unformatierte Liste, mögliche weitere Optionen)
Display Style - fields
Display Name - page

views-view--foobar--page.html.twig
views-view--page.html.twig
views-view--foobar.html.twig
views-view.html.twig

views-view-unformatted--foobar--page.html.twig
views-view-unformatted--page.html.twig
views-view-unformatted--foobar.html.twig
views-view-unformatted.html.twig

views-view-fields--foobar--page.html.twig
views-view-fields--page.html.twig
views-view-fields--foobar.html.twig
views-view-fields.html.twig

Forum

Override-Optionen: forums--[[container|topic]--forumID].html.twig

Haupttemplate: forums.html.twig (Basispfad: core/modules/forum/templates/forums.html.twig)

Templates für Container und Forum-Themen können separat gesetzt werden:

forums--containers--forumID.html.twig
forums--forumID.html.twig
forums--containers.html.twig
forums.html.twig

für Forum-Themen:

forums--topics--forumID.html.twig
forums--forumID.html.twig
forums--topics.html.twig
forums.html.twig

Weitere Informationen in der Dokumentation zu forums.html.twig.

Wartungsmodus

Override-Optionen: maintenance-page--[offline].html.twig

Haupttemplate: maintenance-page.html.twig (Basispfad: core/modules/system/templates/maintenance-page.html.twig)

Weitere Informationen in der Dokumentation zu maintenance-page.html.twig.

Suchergebnisse

Override-Optionen: search-result--[searchType].html.twig

Haupttemplate: search-result.html.twig (Basispfad: core/modules/search/templates/search-result.html.twig)

Beispiel für Suche nach Nodes:

/search/node/Search+Term

Template: search-result--node.html.twig

Suche nach Benutzern:

/search/user/bob

Template: search-result--user.html.twig