←Zurück zum Blog

So erstellen Sie benutzerdefinierte Drupal-Layouts für den Layout Builder per Code

2024-02-10•5 Minuten Lesezeit

Heute erkunden wir, wie Sie benutzerdefinierte Drupal-Layouts für den Layout Builder per Code erstellen.

Drupal's Layout Builder bietet eine leistungsstarke und intuitive Möglichkeit, flexible Seitenlayouts zu gestalten, ohne tief in den Code eintauchen zu müssen. Er ermöglicht es Content-Redakteuren, Inhalte mithilfe einer Drag-and-Drop-Oberfläche in visuell ansprechende Strukturen zu ordnen. In diesem Blogbeitrag erfahren Sie, was der Layout Builder ist, wie Sie ihn aktivieren und wie Sie benutzerdefinierte Vorlagen für noch mehr Kontrolle erstellen.

Was ist der Layout Builder?

Im Kern ist der Layout Builder ein Drupal-Modul, mit dem Sie das Layout von Seiten visuell erstellen können. Anstatt an die starre Struktur eines Themes gebunden zu sein, haben Sie die Freiheit:

  • Regionen definieren: Bereiche innerhalb Ihrer Seite festlegen (z. B. Kopfzeile, Fußzeile, Hauptinhalt, Seitenleiste).
  • Layouts mit Blöcken zusammenstellen: Verschiedene Inhaltsblöcke (Text, Bilder, Menüs usw.) per Drag-and-Drop in diesen Regionen platzieren und anordnen.
  • Benutzerdefinierte Vorlagen erstellen: Vorlagendateien für bestimmte Layouts erstellen, um präzise Kontrolle über HTML und die Platzierung von Regionen zu haben.

Aktivieren des Layout Builders für einen Inhaltstyp

Nehmen wir an, Sie möchten den Layout Builder für den Inhaltstyp „Artikel“ verwenden. So aktivieren Sie ihn:

  1. Module installieren: Stellen Sie sicher, dass das Kernmodul Layout Builder aktiviert ist (normalerweise standardmäßig).
  2. Anzeige verwalten: Navigieren Sie zu / admin / structure / types / manage / article / display (ersetzen Sie „article“ durch den Maschinennamen Ihres Inhaltstyps).
  3. Layout Builder aktivieren: Aktivieren Sie im Abschnitt „Layout-Optionen“ das Kontrollkästchen „Layout Builder verwenden“.
  4. Änderungen speichern: Klicken Sie auf „Speichern“.
Layout Builder aktivieren

Sie können auch zulassen, dass einzelne Knoten (in diesem Fall Artikel) ihre eigenen Layout-Überschreibungen haben. Das bedeutet, dass jeder Artikel ein eigenes Layout haben kann, das sich vom Standardlayout unterscheidet, das Sie für den Inhaltstyp „Artikel“ festgelegt haben.

So erstellen Sie benutzerdefinierte Drupal-Layouts

Während Ihr Drupal-Theme und einige Module möglicherweise einige vorgefertigte Layouts anbieten, bieten benutzerdefinierte Vorlagen noch mehr Kontrolle und Flexibilität. Hier sind die Gründe, warum Sie benutzerdefinierte Layouts benötigen könnten:

  • Maßgeschneiderte Seitendesigns: Erstellen Sie Layouts, die perfekt zu Ihren Inhalten passen, anstatt auf generische Theme- oder Modul-Layouts beschränkt zu sein.
  • Einfache Bearbeitung: Bieten Sie gebrauchsfertige Layouts an, die zum Stil Ihrer Website passen, und vereinfachen Sie so die Arbeit für Ihre Content-Redakteure.
  • Konsistentes Erscheinungsbild: Stellen Sie sicher, dass Ihre Website auf jeder Seite gut aussieht, auch wenn Sie Layouts verwenden, die nicht in Ihrem Theme enthalten waren.

Um benutzerdefinierte Layouts zu erstellen, befolgen Sie diese Schritte:

  1. THEME.layouts.yml Datei:
    • Erstellen Sie eine Datei namens THEME.layouts.yml im Stammverzeichnis Ihres Themes (ersetzen Sie THEME durch den tatsächlichen Namen Ihres Themes).
    • Hier ist ein schnelles Beispiel für ein Layout mit einer rechten Seitenleiste. Fügen Sie den folgenden Code hinzu und denken Sie daran, „EXAMPLE“ durch ein geeignetes Präfix für Ihr Projekt zu ersetzen:
example_layout_right_sidebar:
  label: 'BEISPIEL: Inhalt mit rechter Seitenleiste'
  path: templates/layout/example/sidebar
  template: layout--right-sidebar
  category: 'Beispiel Spalten: 2'
  default_region: first
  icon_map: 
    - [top] 
    - [first, first, second]  
    - [bottom, bottom, bottom] 
  regions: 
    top:
      label: Oben 
    first:
      label: Erstes 
    second:
      label: Zweites 
    bottom:
      label: Unten

Erläuterung des Codes:

  • example_layout_right_sidebar: Eindeutiger Name für das Layout.
  • label: Der benutzerfreundliche Name für dieses Layout im Layout Builder.
  • path: Wo sich die Vorlagendateien Ihres Layouts befinden.
  • template: Die Hauptvorlagendatei, die die HTML-Struktur Ihres Layouts definiert.
    • Sie benötigen eine entsprechende layout--right-sidebar.html.twig-Datei im angegebenen Pfad.
  • category: Hilft bei der Gruppierung von Layouts innerhalb der Layout Builder-Oberfläche.
  • default_region: Gibt an, wo Inhaltsblöcke anfänglich platziert werden (in diesem Fall die Region „first“).
  • icon_map:
    • Dies zeigt eine grundlegende visuelle Vorschau im Layout Builder:
      • Eine Zeile oben ([top])
      • Zeile mit drei Spalten: zwei breitere „first“-Spalten und eine schmalere „second“-Spalte.
      • Eine Zeile unten ([bottom, bottom, bottom])
  • regions:
    • Definiert die benannten Bereiche, in denen Sie Inhalte platzieren können:
      • top: Eine Region, die sich über den oberen Teil des Layouts erstreckt.
      • first: Die primäre Inhaltsregion (wahrscheinlich die linke Spalte).
      • second: Die Seitenleistenregion (wahrscheinlich die rechte Spalte).
      • bottom: Eine Region, die sich über den unteren Teil des Layouts erstreckt.
    • Sie verwenden {{ content.top }}, {{ content.first }} und {{ content.second }}, um Ihre Inhalte in der Twig-Vorlage zu positionieren.
  1. Vorlagendateien:
    • Erstellen Sie im Ordner, den Sie unter path in Ihrer .layouts.yml-Datei angegeben haben (z. B. templates / layout / example / sidebar), die Twig-Vorlagendateien wie layout--right-sidebar.html.twig.
    • Hier ist das Vorlagenbeispiel:
{#
/**
 * @file
 * Standard-Theme-Implementierung für ein Medienlayout.
 *
 * Verfügbare Variablen:
 * - content: Der Inhalt für dieses Layout.
 * - attributes: HTML-Attribute für die Layout-<div>.
 *
 * @ingroup themeable
 */
#}
{% if content %}
 <div{{ attributes.addClass('row example-sidebar-layout example-right-sidebar') }}>

  <div class="example-container">

   {% if content.top %}
    <div {{ region_attributes.top.addClass('region--top example-sidebar-layout-top') }}>
     {{ content.top }}
    </div>
   {% endif %}

   <div class="example-sidebar-layout-middle">

    <div{{ region_attributes.first.addClass('col-sm-9 example-sidebar-column-left') }}>
     {{ content.first }}
    </div>

    <div{{ region_attributes.second.addClass('col-sm-3 example-sidebar-column-right') }}>
     {{ content.second }}
    </div>

    </div>

   {% if content.bottom %}
    <div {{ region_attributes.bottom.addClass('region--bottom example-sidebar-layout-bottom') }}>
     {{ content.bottom }}
    </div>
   {% endif %}

  </div>

 </div>
{% endif %}
  1. Caches leeren: Leeren Sie die Drupal-Caches, um Ihre neuen Vorlagen zu registrieren.

Verwendung Ihrer benutzerdefinierten Vorlagen

  1. Wechseln Sie beim Bearbeiten eines „Artikel“-Knotens (oder Ihres ausgewählten Inhaltstyps) zur Registerkarte „Layout“.
  2. Ihre benutzerdefinierten Layouts sollten nun zur Auswahl verfügbar sein.
  3. Sobald Sie ein Layout ausgewählt haben, können Sie Inhaltsblöcke in seine vorgesehenen Regionen einfügen.
Verwendung Ihrer benutzerdefinierten Vorlagen

Abschließende Gedanken

Der Layout Builder und benutzerdefinierte Vorlagen geben Ihnen mehr Flexibilität, Ihre Drupal-Website so zu gestalten, wie Sie es möchten. Es mag etwas Übung erfordern, um sich damit vertraut zu machen, aber die Möglichkeit, Layouts zu erstellen, die perfekt zu Ihren Bedürfnissen passen, ist die Mühe wert. Spielen Sie herum und sehen Sie, was Sie erstellen können. Viel Spaß beim Debuggen!

Kategorien:

Drupal