Bild-CAPTCHA
Geben Sie die Zeichen ein, die im Bild gezeigt werden.
Schreiben Sie uns hier!

Sie sind hier

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.

View_anlegen.png

View_anlegen
Eine View anlegen

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

Einstellung_View.png

Einstellung_View
Einstellungen an der View tätigen

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".

Template_unformatted.png

Template_Ordner
Template Ordner in /core/modules/views/templates

views-view_Template.png

views-view_Template
Das ist das views-view-unformatted.html.twig Template

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

bearbeitetes_Template.png

bearbeitetes_Template
Überarbeitete views-view-unformatted.html.twig Template