Benutzerdefinierte Themes in Drupal 8 erstellen | Teil 2

AI-Translated

Lakshay

Drupal

Veröffentlicht am 16 Aug, 2018

3 Minuten Lesezeit

In meinem letzten Blog Creating Custom Themes in Drupal 8 | Part 1 haben wir benutzerdefinierte Themes erstellt und CSS, JavaScript und grundlegende Seitenvorlagen hinzugefügt. In diesem Blog werden wir die Twig-Vorlage untersuchen.

TL;DR (Zu lang; nicht gelesen)

Folgende Themen werden in diesem Blog behandelt:

Twig-Vorlagen überschreiben
Twig-Namenskonventionen
Verwenden von grundlegenden Bedingungen in Twigs

Twig-Vorlagen überschreiben

In Drupal stellt Twig den HTML-Code bereit. Oft müssen wir das Layout ändern oder andere Änderungen an Seiten, Regionen, Blöcken usw. vornehmen. In solchen Fällen müssen wir die Twig-Datei überschreiben. Wir können jede verfügbare Twig-Vorlage überschreiben. Wir müssen Twig in unseren Theme-Ordner kopieren, bearbeiten und einfügen.

Hier sind einige Schritte zum Überschreiben einer Twig-Vorlage:

Suchen Sie die Vorlage, die Sie bearbeiten möchten

Nehmen wir ein Beispiel für die Startseite. Im Allgemeinen haben die Websites ein anderes Design für die Startseite. Wir können unsere normale page.html.twig-Datei speziell für die Startseite überschreiben, sodass Sie beim Anzeigen des Seitenquellcodes für die Startseite Ihrer Website etwas wie das folgende Bild sehen würden:
Der Text in Grün sind Theme-Hook-Vorschläge. Diese sind sehr nützlich, wenn Sie eine bestimmte Seite oder einen Blog ansprechen möchten. In unserem Fall möchten wir, dass die Änderungen nur auf der Startseite angewendet werden, was den Speicherort der Seed-Seite deutlich macht.
Datei kopieren und umbenennen

Sobald Sie den Speicherort kennen, kopieren Sie einfach die Vorlage, fügen Sie sie in Ihren Theme-Ordner ein und benennen Sie sie gemäß den verfügbaren Hook-Vorschlägen um. Sobald Sie dies getan haben, leeren Sie den Cache und bestätigen Sie, ob die Ausgabe von Ihrem Twig stammt oder nicht.

Der Seitenquellcode sollte wie im folgenden Bild aussehen:

Früher kam die Ausgabe von page.html.twig, jetzt kommt sie von page--front.html.twig.

Sie können diesen Twig jetzt nach Ihren Wünschen ändern.

Twig-Namenskonventionen

Drupal verwendet verschiedene Konventionen für die Benennung von Twig-Dateien. Hier sind verschiedene Beispiele:

HTML-Vorlagen

Diese Vorlagen bieten allgemeine Auszeichnungen wie <head>-, <title>- und <meta>-Tags.

Beispiel: html.html.twig

html.html.twig kann mit Hilfe des Theme-Hook-Vorschlags überschrieben werden.

Seitenvorlagen

Diese Vorlagen bieten ein allgemeines Layout für verschiedene Seiten Ihrer Website.

Beispiel: page.html.twig

Blöcke, Regionen, Knoten, Taxonomie, Felder, Ansichten, Kommentarvorlagen

Jede Komponente hat ihre eigene Twig-Vorlage, die Drupal wie oben beschrieben überschreiben lässt.

Für detaillierte Informationen können Sie das offizielle Drupal 8 Twig-Dokument für dasselbe besuchen.

Bedingungen in Twig-Vorlagen

Manchmal müssen wir ein Layout basierend auf den "if"- und "else"-Bedingungen erstellen. Meistens ist dies bei den Sidebars der Fall.

Es gibt eine Zeile, die auf der einen Seite eine linke Sidebar und auf der anderen Seite Inhalte hat. In diesem Fall müssen wir eine Bedingung erstellen, z. B. wenn ein Block in der Sidebar platziert ist, sollte die Sidebar 4 von 12 Spalten belegen und die Inhaltsregion die verbleibenden 8 erhalten.

Wenn kein Block in der Sidebar platziert ist, nimmt die Inhaltsregion alle verfügbaren 12 Spalten ein. Lassen Sie uns dies implementieren. Hier verwenden wir die "if"-Bedingung und "set classes" in unserer Twig-Datei.

Zum besseren Verständnis haben wir das Bootstrap-Grid-Layout verwendet, Sie können jedes Framework Ihrer Wahl verwenden.

Fall 1

Platzieren wir den Suchblock in der linken Sidebar-Region.

Leeren Sie den Cache und besuchen Sie die Startseite Ihrer Website.

Da wir den Suchblock in der linken Sidebar-Region platziert haben, sind die "if"- und "set classes"-Bedingungen erfüllt. Twig liefert hier die Ergebnisse für die linke Sidebar-Region.

Fall 2

Deaktivieren wir den Suchblock.

Da wir den Suchblock deaktiviert haben, hat die linke Sidebar-Region jetzt keinen aktivierten Block mehr und die Inhaltsregion erhält das gesamte 12-Spalten-Layout.