HowTo: Panels in Drupal 8 in Drupal 8 verwenden

Blöcke und Layouts haben in Drupal eine beachtliche Entwicklung durchgemacht. Blöcke sind zu leistungsstarken, mit Feldern versehenen und wiederverwendbaren Elementen geworden, die in Regionen innerhalb eines Layouts platziert werden können. Die Layouts werden nun von der Layout API verwaltet, die vom Layout Discovery Core-Modul bereitgestellt wird. Dies ermöglicht die gemeinsame Nutzung der Layouts durch verschiedene Module.

Wenn wir über Layouts in Drupal sprechen, können wir uns auf das Layout der gesamten Seite, d. h. das globale Layout, oder das Layout des Hauptinhalts der Seite beziehen. Das globale Layout einer Drupal-Site wird hauptsächlich durch das verwendete Theme gesteuert und kann über die Block-UI unter admin/structure/block verwaltet werden. Das Layout aller Ansichtsmodi eines Inhaltstyps kann über die ähnliche Drag-and-Drop-Oberfläche verwaltet werden, die in der Option "Anzeige verwalten" verfügbar ist.

Trotz all dieser Funktionen und Verbesserungen müssen Sie entweder die Seitenvorlagendatei überschreiben oder ein Contributed-Modul wie Display Suite, Panels, Paragraphs usw. verwenden, wenn Sie eine vollständige Anpassung der Layouts wünschen. In diesem Artikel werden wir die Verwendung des Panels-Moduls erörtern. 

In Drupal 8 bietet das Panels-Modul keine UI, sondern eine API, die die Konfiguration und Platzierung von Blöcken in Regionen ermöglicht. Sie müssen ein Modul aus dem Panels-Ökosystem wie Page Manager, Panelizer, Everywhere zusammen mit Panels verwenden, um die Layouts zu verwalten. Es wird auch mit einem sehr praktischen Sub-Modul Panels IPE (In-Place-Editor) geliefert.

Voraussetzungen

Das Modul erfordert die Vorinstallation der folgenden Module:

• Chaos Tool Suite (CTools)
• Layout Discovery (Core-Modul)

Herunterladen und Installieren von Panels

Für diesen Artikel werden wir Panels zusammen mit Panels IPE, Page Manager, Panelizer und Panels Everywhere installieren, um seine Verwendung und Funktionsweise zu verstehen. Starten Sie Ihr Terminal, um sie schnell herunterzuladen und zu installieren.

1. Navigieren Sie zum Stammverzeichnis Ihrer Drupal-Site.

   $ cd /var/www/html/drupal8

2. Laden Sie die Module mit Drush oder Drupal Console herunter und installieren Sie sie.

   $ drush dl panels panels_ipe page_manager page_manager_ui panelizer panels_everywhere
   $ drush en panels panels_ipe page_manager page_manager_ui panelizer panels_everywhere -y

   oder

   $ drupal module:download panels panels_ipe page_manager page_manager_ui panelizer panels_everywhere
   $ drupal module:install panels panels_ipe page_manager page_manager_ui panelizer panels_everywhere

   Das Panels-Modul wird mit 5 Layouts geliefert – Eine Spalte, zwei Spalten, zwei Spalten im Mauerstil, drei Spalten 25/50/25 und drei Spalten 33/34/33. Wie bereits erwähnt, müssen wir jedoch andere Module verwenden, um die von Panels bereitgestellte API zu nutzen.

Verwalten des Seitenlayouts mit Page Manager und Panels

Mit Page Manager können benutzerdefinierte Seiten erstellt und vorhandene Routen überschrieben werden. Außerdem können wir Kontexte, Zugriffsbedingungen und Auswahlkriterien für diese Seiten hinzufügen. Es kann die von dem Panels-Modul bereitgestellte Display-Variante nutzen, um die Blöcke in Regionen zu platzieren, die von den Panels-Layouts bereitgestellt werden. Führen Sie die folgenden Schritte aus, um eine Seite zu erstellen und ihr Layout mithilfe des Panels-Layouts zu verwalten:

1. Navigieren Sie zu Verwalten → Struktur → Seiten und klicken Sie auf die Schaltfläche "Seite hinzufügen".
    
2. Geben Sie einen eindeutigen administrativen Titel an, geben Sie optional eine Beschreibung zur Beschreibung der Seite ein und geben Sie einen Pfad für diese Seite ein. Wählen Sie Panels als Variantentyp aus, weisen Sie dieser Seite optional einen Kontext zu und klicken Sie auf "Weiter".

   

3. Geben Sie der Seite eine passende Bezeichnung, wählen Sie "Standard"-Builder und klicken Sie auf "Weiter", um fortzufahren.
    
4. Geben Sie dieser Seite einen passenden Titel. Fügen Sie nun den erforderlichen Block über die Schaltfläche "Block hinzufügen" hinzu. Geben Sie dem Block einen Titel, wählen Sie die Sichtbarkeit der Bezeichnung, den Formatierer und die Region aus. Wiederholen Sie diesen Schritt für alle Blöcke.

   

5. Nun können Sie die Blöcke mithilfe der Drag-and-Drop-Oberfläche anordnen. Klicken Sie auf "Fertig stellen", wenn Sie mit der Anordnung zufrieden sind.

   

   Wir haben nun erfolgreich alle Knotenseiten überschrieben und ihre Layouts angepasst. In ähnlicher Weise können Sie weitere Seitenvarianten basierend auf verschiedenen Auswahlkriterien definieren und für jede von ihnen unterschiedliche Layouts erstellen.

   

In-Place-Bearbeitung mit Panels IPE

Wie Sie vielleicht beobachtet haben, bietet uns der "Standard"-Builder, den wir zum Platzieren der Blöcke in verschiedenen Regionen verwendet haben, die gleiche Block-UI wie die Core-Blockstruktur. Für die Site-Builder kann es schwierig sein, die Ausgabe zu visualisieren, ohne die Blockplatzierung tatsächlich zu sehen. Darüber hinaus müssen Sie durch mehrere Menüs navigieren, um das Layout bearbeiten zu können. Wir können Panels IPE (In-Place-Editor) verwenden, um das Layout zu bearbeiten und die Blöcke direkt vom Frontend aus zu verwalten. Um den Builder zu ändern, führen Sie zunächst die folgenden Schritte aus:

1. Navigieren Sie zu Verwalten → Struktur → Seiten und klicken Sie auf die Schaltfläche "Bearbeiten" neben der Seite, für die Sie die In-Place-Bearbeitung aktivieren möchten.
    
2. Klicken Sie auf das Menü "Allgemein" der gewünschten Display-Variante.
    
3. Ändern Sie den Builder von "Standard" in "In-Place-Editor" und klicken Sie auf "Aktualisieren und speichern", um die Änderungen zu speichern.

Nun können wir Panels IPE verwenden, um die Blöcke und Layouts der Seite zu verwalten.

Bereitstellen von Standardlayouts für Ansichtsmodi mit Panelizer

Während die Möglichkeit, die Layouts mit dem Standard- und In-Place-Editor-Builder anzupassen, großartig ist, möchten Sie Ihren Redakteuren wahrscheinlich nicht die Berechtigung erteilen, Layouts zu ändern. Vielmehr sollten sie in der Lage sein, ein Layout aus einer Reihe vorkonfigurierter Layouts für ihr Inhaltselement auszuwählen. Wir können das Panelizer-Modul verwenden, um dies zu erreichen:

1. Navigieren Sie zu Verwalten → Struktur → Inhaltstypen und klicken Sie auf die Option "Anzeige verwalten" in der Dropdown-Liste neben dem Inhaltstyp und wählen Sie den Ansichtsmodus aus, für den Sie Standardanzeigen bereitstellen möchten.
    
2. Aktivieren Sie "Diesen Ansichtsmodus panelisieren". Aktivieren Sie außerdem "Jeder Inhalt darf seine Anzeige angepasst haben", "Benutzern erlauben, auszuwählen, welche Anzeige verwendet werden soll" und klicken Sie auf "Speichern".
    
3. Klicken Sie auf die Schaltfläche "Neue Panelizer-Standardanzeige hinzufügen"
    
4. Der Assistent zum Hinzufügen von Seiten des Page Managers wird angezeigt. Führen Sie die gleichen Schritte aus wie beim Erstellen einer neuen Seite.
    
5. Navigieren Sie zur "Formularanzeige verwalten" desselben Inhaltstyps und stellen Sie sicher, dass das Panelizer-Pseudofeld sichtbar ist.
   
   

Ändern des globalen Seitenlayouts mit Panels Everywhere

Bisher haben wir das Layout des Hauptinhaltsbereichs angepasst. Wir können auch das globale Layout mit Hilfe des Panels Everywhere-Moduls anpassen. Dieses Modul überschreibt im Wesentlichen das Core-Block-Layoutsystem. Bitte beachten Sie, dass sich dieses Modul derzeit im Alpha-Status befindet und Ihre Website leicht beschädigen kann. Bitte beachten Sie auch die offizielle Readme-Datei für die Versionskompatibilität. 

1. Navigieren Sie zu Verwalten → Struktur → Seiten und aktivieren Sie die Seite Seitenvorlage.
    
2. Klicken Sie auf die Schaltfläche "Bearbeiten" neben der Seite "Seitenvorlage".
    
3. Sie können das Layout nun ähnlich wie bei jeder anderen Seite des Page Managers bearbeiten und sogar Panels IPE verwenden, um das globale Layout im laufenden Betrieb zu konfigurieren. 

Fazit

Das Panels-Modul bietet eine von vielen Möglichkeiten, Layouts in Drupal zu verwalten. Um seine API zu nutzen, müssen wir die anderen Module des Panels-Ökosystems verwenden. Wir können das Layout des Inhaltsbereichs sowie das globale Layout der Drupal-Site anpassen, ohne Code zu schreiben.

Bei Fragen können Sie unten einen Kommentar hinterlassen.