So erstellen Sie einen benutzerdefinierten Layout-Builder in Drupal 8

Veröffentlicht: 2019-10-15

Drupal 8 macht die Dinge für Content-Autoren so viel einfacher. Einer der wichtigsten Gründe ist das Hinzufügen des Layout Builder-Moduls zum Kern von Drupal 8. Mit einer einfachen Drag-and-Drop-Oberfläche, Vorschau- und Anpassungsmöglichkeiten wird der Layout-Builder bald zu einem beliebten Werkzeug zum Erstellen und Gestalten von Seiten.

In meinem vorherigen Artikel habe ich darüber geschrieben, wie Sie mit der Installation und Verwendung des Layout-Builders von Drupal 8 beginnen können. Hier möchte ich mein Wissen über die Anpassung eines Layout-Builders an einzigartige Anforderungen teilen.

Wenn Ihre Drupal-Website mehrere Abschnitte mit mehreren Blöcken benötigt, können Sie die von Drupal bereitgestellten Standardabschnitte nicht verwenden. Dazu können Sie Ihr eigenes benutzerdefiniertes Layout erstellen.

Erste Schritte mit dem Layout Builder:

Wir werden zuerst ein benutzerdefiniertes Layout-Builder-Modul für unseren benutzerdefinierten Layout-Builder erstellen. Wir werden den Ordner als custom_layout benennen. Als nächstes erstellen wir eine info.yml-Datei. Wir sollten die grundlegenden Schlüssel dafür angeben. Der benutzerdefinierte Layout-Builder in Drupal 8 ist vom Layout-Builder-Modul abhängig. Lassen Sie es uns hier spezifizieren.

benutzerdefiniertes Layout
 Code:
Name: 'Benutzerdefiniertes Layout'
Typ: Modul
Beschreibung: 'Bietet eine Möglichkeit für das Gebäudelayout'
Kern: 8.x
Paket: 'Benutzerdefiniert'
Abhängigkeiten:
 - layout_builder:layout_builder

Als Nächstes erstellen wir die Datei layouts.yml, um Regionen für unser benutzerdefiniertes Layout anzugeben.

  • custom_layout: Schlüssel für unser benutzerdefiniertes Layout-Builder-Layout.
  • label: Label für unser benutzerdefiniertes Layout-Builder-Layout.
  • Kategorie: Kategorie für unser benutzerdefiniertes Layout-Builder-Layout.
  • default_region: Standardregion sind die Regionen, die in allen Layouttypen standardmäßig verwendet werden.
  • icon_map: Icon, das angezeigt wird, während wir unser Layout auswählen.

Z.B:

benutzerdefiniertes Layout

Um die obige Symbolkarte zu erstellen, müssen wir die folgenden Schritte ausführen.

1. Erste Zeile ist „Kopfzeile links“ und „Kopfzeile rechts“
Wir haben angegeben - [ header_left, header_left, header_right ] - header_left is
2 Mal definiert, so dass es 2 Teile der Gesamtbreite des Bildschirms einnimmt, dann wird header_right den Rest des Teils einnehmen, so dass das Verhältnis "75%/25%" beträgt.
2. Zweite Reihe ist „Inhalt“ und „Seitenleiste“
Wir haben angegeben - [ Inhalt, Inhalt, Seitenleiste ] dieselbe obige Logik, die hier angewendet wurde.
3. Dritte Reihe ist „Fußzeile links“ und „Fußzeile rechts“
Wir haben angegeben - [ footer_left, footer_right] - da es nur 2 Regionen gibt, werden jeweils 50% benötigt.

  • Regionen: Regionen, die wir für unser Layout benötigen. Wir haben header_left, header_right, sidebar, content, footer_left, footer_right.
benutzerdefinierter Layout-Builder

Code:

 benutzerdefiniertes_layout:
 Etikett: 'Benutzerdefiniertes Layout'
 Kategorie: 'Benutzerdefinierte Layouts'
 default_region: Inhalt
 icon_map:
   - [header_left, header_left, header_right]
   - [Inhalt, Inhalt, Seitenleiste]
   - [Inhalt, Inhalt, Seitenleiste]
   - [Inhalt, Inhalt, Seitenleiste]
   - [footer_left, footer_right]

 Regionen:
   header_left:
     Label: Kopfzeile links
   header_right:
     Label: Kopfzeile rechts
   Seitenleiste:
     Label: Seitenleiste
   Inhalt:
     Etikett: Inhalt
   footer_left:
     Beschriftung: Fußzeile links
   footer_right:
     Label: Fußzeile rechts

Als Nächstes erstellen wir eine HTML-Struktur für unser Layout. Wir werden in unserem Modul einen Ordner namens „layouts“ erstellen. In dem Ordner erstellen wir einen weiteren Ordner namens „custom_layout“

Und in diesem Ordner erstellen wir eine Zweigdatei mit dem Namen "custom-layout.html.twig".

benutzerdefinierter Layout-Builder


Wir müssen die twig-Datei in layouts.yml angeben

  • Pfad: Gibt an, in welchen Ordner Ihre HTML-Struktur geschrieben wird
  • Vorlage: Gibt an, welche Zweigvorlage für dieses Layout unter dem Pfad verwendet werden soll.

benutzerdefiniertes Layout
 Code:

benutzerdefiniertes_layout:
 Etikett: 'Benutzerdefiniertes Layout'
 Pfad: layouts/custom_layout
 Kategorie: 'Benutzerdefinierte Layouts'
 Vorlage: benutzerdefiniertes Layout
 default_region: Inhalt
 icon_map:
   - [header_left, header_left, header_right]
   - [Inhalt, Inhalt, Seitenleiste]
   - [Inhalt, Inhalt, Seitenleiste]
   - [Inhalt, Inhalt, Seitenleiste]
   - [footer_left, footer_right]

 Regionen:
   header_left:
     Label: Kopfzeile links
   header_right:
     Label: Kopfzeile rechts
   Seitenleiste:
     Label: Seitenleiste
   Inhalt:
     Etikett: Inhalt
   footer_left:
     Beschriftung: Fußzeile links
   footer_right:
     Label: Fußzeile rechts

Als nächstes schreiben wir die HTML-Struktur für unsere Regionen in die Datei „custom-layout.html.twig“.
Wir werden Klassen mit "layout" und "layout--custom-layout" festlegen und den gesamten Inhalt darin einschließen.
Wir werden Regionen angeben, die in layouts.yml definiert wurden, wir können auf diese Regionen wie "{{ content.header_left }}" zugreifen.

Layout-Builder

Code:

{% Satzklassen = [
'Layout',
'Layout--benutzerdefiniertes-Layout',
] %}
{% wenn Inhalt %}
<div{{ attribute.addClass(classes) }}>
{% if content.header_left %}
<div {{ region_attributes.header_left.addClass('layout__region', 'layout__region--header_left') }}>
{{ content.header_left }}
</div>
{% endif %}
{% if content.header_right %}
<div {{ region_attributes.header_right.addClass('layout__region', 'layout__region--header_right') }}>
{{ content.header_right }}
</div>
{% endif %}
{% if content.content %}
<div {{ region_attributes.content.addClass('layout__region', 'layout__region--content') }}>
{{ content.content }}
</div>
{% endif %}
{% if content.sidebar %}
<div {{ region_attributes.sidebar.addClass('layout__region', 'layout__region--sidebar') }}>
{{ content.sidebar }}
</div>
{% endif %}
{% if content.footer_left %}
<div {{ region_attributes.footer_left.addClass('layout__region', 'layout__region--footer_left') }}>
{{ content.footer_left }}
</div>
{% endif %}
{% if content.footer_right %}
<div {{ region_attributes.footer_right.addClass('layout__region', 'layout__region--footer_right') }}>
{{ content.footer_right }}
</div>
{% endif %}
</div>
{% endif %}

Nachdem die HTML-Struktur geschrieben wurde, müssen wir für jede Region CSS schreiben. Wir werden jetzt library.yml in unserem benutzerdefinierten Modul erstellen.

Layout-Builder

Code:

 benutzerdefiniertes_layout:
Version: VERSION
CSS:
   Thema:
     css/custom_layout.css: {}

Wir werden diese Bibliothek in layouts.yml definieren

Layout-Builder

Code:

 benutzerdefiniertes_layout:
 Etikett: 'Benutzerdefiniertes Layout'
 Pfad: layouts/custom_layout
 Kategorie: 'Benutzerdefinierte Layouts'
 Vorlage: benutzerdefiniertes Layout
 Bibliothek: custom_layout/custom_layout
 default_region: Inhalt
 icon_map:
   - [header_left, header_left, header_right]
   - [Inhalt, Inhalt, Seitenleiste]
   - [Inhalt, Inhalt, Seitenleiste]
   - [Inhalt, Inhalt, Seitenleiste]
   - [footer_left, footer_right]

 Regionen:
   header_left:
     Label: Kopfzeile links
   header_right:
     Label: Kopfzeile rechts
   Seitenleiste:
     Label: Seitenleiste
   Inhalt:
     Etikett: Inhalt
   footer_left:
     Beschriftung: Fußzeile links
   footer_right:
     Label: Fußzeile rechts

Beginnen wir nun mit der Gestaltung unseres Regionenblocks. Wir werden die Struktur für jede Region wie folgt spezifizieren:

Layout-Builder

Code:

 .layout--custom-layout {
 Anzeige: -webkit-box;
 Anzeige: -ms-flexbox;
 Anzeige: flexibel;
 -ms-flex-wrap: umwickeln;
 Flex-Wrap: Wickel;
}

@media-Bildschirm und (min-Breite: 40em) {
 .layout--custom-layout .layout__region--header_left {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 70 %;
   biegsam: 0 1 70 %;
 }

 .layout--custom-layout .layout__region--header_right {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 30%;
   biegsam: 0 1 30%;
 }

 .layout--custom-layout .layout__region--content {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 70 %;
   biegsam: 0 1 70 %;
 }

 .layout--custom-layout .layout__region--sidebar {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 30%;
   biegsam: 0 1 30%;
 }

 .layout--custom-layout .layout__region--footer_left {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 50%;
   Flex: 0 1 50 %;
 }

 .layout--custom-layout .layout__region--footer_right {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 50%;
   Flex: 0 1 50 %;
 }
}

Als nächstes aktivieren wir unser benutzerdefiniertes Modul

Layout-Builder-Modul

Gehen wir zu Struktur -> Inhaltstypen und klicken Sie für einen beliebigen Inhaltstyp auf „ Anzeige verwalten “. Im Moment verwenden wir den Inhaltstyp ' Artikel '.

Edit-Layout-Builder

Nachdem wir unser benutzerdefiniertes Layout ausgewählt haben-

benutzerdefiniertes Layout