Drupal 8 Views Template überschreiben

In diesem kleinen Tutorial beschreiben wir wie man Drupal 8 Standard-Views überschreibt und das Markup seinen eigenen Wünschen nach anpasst.
Wurden in der Drupal-Vorgängerversion 7 die Informationen zum Individualisieren des View-Templates noch mit angezeigt, ist es besonders für Neueinstiger nun nicht mehr auf Anhieb erkenntlich wie die Anpassung erfolgen muss.

Folgende Anleitung beschreibt Schritt für Schritt die Abfolge.

Theme und View anlegen

Wir beginnen mit einem benutzerdefinierten Design für unsere neu installierte Drupal 8 Website.
Um ein eigenes Theme zu erstellen, benötigen wir diese Dateien:

• meintheme.info.yml
• meintheme.libraries.yml

CSS

• meintheme.css

Javascript

• meintheme.min.js

Dann werden wir eine neue View "admin/structure/views/add" erstellen.

Danach lassen wir uns die fünf neuen publizierten Inhalte der Website anzeigen.

Views Templates verstehen

View Standard Templates sind unter "/core/modules/views/templates/" zu finden.

Jede View nutzt mindestens zwei Templates:

Das erste ist das "views-view.html.twig". Dieses Template beschreibt das Layout der View: View Inhalt, View Header, View Footer, sichtbare Formelemente und Anhänge.

Das zweite Template ist das Style Template. Dieses variiert je nach angewandtem Stil: Grid, Table, Html List oder Unformatted

• Grid: views-view-grid.html.twig
• Table: views-view-table.html.twig
• HTML List: views-view-list.html.twig
• Unformatted: views-view-unformatted.html.twig

Das dritte Template ist "views-view-fields.html.twig". Dieses Template wird nur genutzt wenn der Views Row Style auf "Fields" gestellt ist. Dieses Template ist verantwortlich für das Durchlaufen aller Felder und das Ausgeben von Feld Wrappern, Labels und Markup.

Das vierte Template ist "views-view-field.html.twig". Dieses Template wird nur genutzt wenn der Views Row Style auf "Fields" gestellt ist. Dies ist das letzte Template und ist verantwortlich für das Ausgeben jedes Feld Markups.

Views Templates umbenennen

Jeder Typ der View Template kann mit einer Vielzahl von Namen überschrieben werden. Der View Name kann aus Standard Template Name, Views Maschinen Name, View Displaytype und View Display ID - getrennt durch 2 Bindestriche "--" bestehen.

Die folgenden sind mögliche Template Namen:

• [Standard Template Name]--[Views Maschinen Name]--[View Display ID].html.twig
• [Standard Template Name]--[Views Maschinen Name]--[View Displaytype].html.twig
• [Standard Template Name]--[View Displaytype].html.twig
• [Standard Template Name]--[Views Maschinen Name].html.twig
• [Standard Template Name].html.twig

Als kleines Beispiel wollen wir für unseren Anwendungsfall um die Liste der Views Row einen Wrapper hinzufügen und ein Attribut für die einzelnen Rows einsetzen. 

Das sind die möglichen Variationen für unsere Template Namen:

• [Standard Template Name]--[Views Maschinen Name].html.twig
• views-view-unformatted-meine-view–default.html.twig
• views-view-unformatted–default.html.twig
• views-view-unformatted-meine-view.html.twig
• views-view-unformatted.html.twig

Das Template bearbeiten

Um unser Template so anzupassen, wie wir es benötigen, ergänzen wir nur die Datei unformatted.

Wir kopieren die views-view-unformatted.html.twig aus "/core/modules/views/templates" und benennen es um in "views-view-unformatted-meine-view.html.twig".

Nun bearbeiten wir diese Datei nach unseren Wünschen und Bedürfnissen.