Wie man das Stacks-Modul in Drupal 8 verwendet

Während Drupal den technischen Anspruch von erstklassigen Entwicklern befriedigt, stößt es an seine Grenzen, wenn nicht-technische Personen Teil des Content-Management-Teams sind.

Die verfügbaren Tools und Funktionen sind für nicht-technische Nutzer zu komplex. Ein Beispiel wäre die Erstellung einer Landingpage. Einzeln bietet Drupal zahlreiche Tools, um separate Inhalte wie „Spenden“, „Überschriften“, „Bildergalerien“, „E-Mail-Anmeldung“, „Newsfeed“ und andere hinzuzufügen. Doch die Erstellung von Webseiten (in Drupal) muss nicht schwierig sein.

In diesem Tutorial werden wir daher Stacks verwenden, um ansprechende Landingpages mit seinen wiederverwendbaren Widgets zu erstellen.

Was Sie in diesem Tutorial lernen:

• Stacks installieren und aktivieren
• Widgets erstellen und aktivieren
• Stack-Feld hinzufügen
• Widget-Theming und -Variationen
• Eine Seite mit Stack erstellen

"Stacks ist ein redaktionsfreundliches Tool, das die einfache Erstellung komplexer Drupal-Seiten ermöglicht."

Stacks installieren und aktivieren

• Installieren Sie das Stacks-Modul auf Ihrer Drupal 8-Website. Kopieren Sie den Download-Link zur tar.gz- oder Zip-Datei.
• Gehen Sie zu Erweitern > Neues Modul installieren > URL einfügen > Auf Installieren klicken.
  Stellen Sie sicher, dass alle Abhängigkeiten heruntergeladen werden.
• Sie können dies auch mit einem einfachen Drush-Befehl tun.

drush dl stacks

• Drush lädt automatisch alle Abhängigkeiten herunter, daher ist der Download über Drush bequemer.
• Aktivieren Sie das Modul nun über Ihre Website oder mit Drush.

drush en stacks

Ein Widget erstellen

• Gehen Sie zum Stammverzeichnis Ihrer Website und folgen Sie den Anweisungen:
• Modules > Contrib > Stacks
• Kopieren Sie den Stack-Ordner und fügen Sie ihn in Ihren aktiven Theme-Ordner ein (das Theme, das derzeit Ihr Standard-Theme ist).
• Gehen Sie zu Struktur > Stacks > Widget-Bundles verwalten > klicken Sie auf Widget-Bundle hinzufügen
  
• Erstellen Sie ein neues Widget und benennen Sie es.
  
  Beispiel: Der Maschinenname sollte sein: my_widget

Stack-Feld hinzufügen und Widget aktivieren

• Klicken Sie auf Felder verwalten für den von Ihnen erstellten Stack und fügen Sie die gewünschten Felder hinzu. Erstellen Sie diese Felder mit eindeutigen Maschinennamen auf der gesamten Website.
• Gehen Sie zurück zu Ihrem Themes-Ordner, wo Sie zwei Standard-Template-Typen finden. Erstellen Sie einen neuen Ordner, der dem Maschinennamen Ihres Widgets entspricht.
  Um Verwechslungen zu vermeiden, verwenden wir einen Bindestrich (-) anstelle eines Unterstrichs (_). Beispiel: Der Maschinenname unseres Widgets war my_widget, der Ordner wird also my-widget sein.
• Erstellen Sie einen Ordner innerhalb des obigen Ordners und nennen Sie ihn 'templates'.

Widget-Theming

• Erstellen Sie ein Template so, wie Sie Ihre Daten anzeigen möchten, und rendern Sie die Daten mit dem Maschinennamen, den Sie Ihren Feldern zugewiesen haben. Benennen Sie Ihr Template wie folgt.

dm--[machine-name]--default.html.twig

Hinweis: 'Default' kann durch beliebige Bezeichnungen wie 'features', 'demo' usw. ersetzt werden.

• Gehen Sie zu Ihrer Website > Inhaltstypen > wählen Sie einen beliebigen Inhaltstyp. Ich nehme eine einfache Seite.
• Gehen Sie zu Felder verwalten und klicken Sie auf Felder hinzufügen.
• Wählen Sie Stacks als Feld aus. Und definieren Sie eine Bezeichnung dafür. Klicken Sie auf Speichern.
• Wählen Sie nun auf der nächsten Seite 'Unbegrenzt'.
  
• Gehen Sie zu Formularanzeige verwalten > Einstellungen für Stacks > klicken Sie auf mein Widget > Aktivieren Sie es.
• Inhalt hinzufügen > Einfache Seite > Widget-Option hinzufügen (diese hat denselben Namen, den Sie Ihrer Twig-Datei zugewiesen haben).
• Fügen Sie Inhalte zu Ihrem Widget hinzu.

Danach sehen Sie den von Ihnen erstellten Stack auf der von Ihnen erstellten Seite.

Widget-Variationen

Nehmen wir an, Sie müssen einen Stack wie diesen erstellen

• Erstellen Sie einen neuen Stack aus der Struktur und legen Sie die folgenden Felder an.
  1. Vier Felder für Bilder
  2. Vier Überschriftenfelder
  3. Vier Unterüberschriftenfelder.
   
• Sie können entweder die Maschinennamen Ihrer Felder beim Erstellen kopieren oder die Maschinennamen Ihrer Felder mit Kint ausgeben.
   
• Erstellen Sie nun ein Stack-Template in Ihrem Stack-Template-Ordner und benennen Sie die Datei wie oben beschrieben. Verwenden Sie
  
  {{ kint(fields) }}
  
  wenn Sie die Maschinennamen Ihrer Felder benötigen.
   
• Fügen Sie den Stack in allen gewünschten Inhaltstypen über die Option 'Formularanzeige verwalten' hinzu.
   
• Gehen Sie zu Inhalt hinzufügen > Wählen Sie den Inhaltstyp aus, dem Sie die Stacks hinzugefügt haben > Wählen Sie den Stack aus und fügen Sie den Inhalt hinzu.
   
• Wenn Sie den Stack speichern, sehen Sie die Maschinennamen der von Ihnen erstellten Felder. Kopieren Sie diese und fügen Sie sie wie im Code unten gezeigt oder gemäß Ihren Anforderungen ein.
  Ihre Template-Datei würde dann wie folgt aussehen:

Dieses Template verwendet Layout-Klassen von Zurb Foundation.

<div class="grid-container">
    <div class="row">
        <div class="column large-6 medium-6 small-12">
            <div class="row inner-cols">
                <div class="column large-4 shrink">
                    {{ fields.feature_image|image('features_img') }}
                </div>
                <div class="column large-8">
                    <h4>{{ fields.feature_heading }}</h4>
                    <p>{{ fields.feature_content }}</p>
                </div>
            </div>
        </div>
        <div class="columns large-6 medium-6 small-12">
            <div class="row inner-cols">
                <div class="column large-4 shrink">
                    {{ fields.feature_second_image|image('features_img') }}
                </div>
                <div class="column large-8">
                    <h4>{{ fields.feature_second_heading }}</h4>
                    <p>{{ fields.feature_second_content }}</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="column large-6 medium-6 small-12">
            <div class="row inner-cols">
                <div class="column large-4 shrink">
                    {{ fields.feature_third_image|image('features_img') }}
                </div>
                <div class="column large-8">
                    <h4>{{ fields.feature_third_heading }}</h4>
                    <p>{{ fields.feature_third_content }}</p>
                </div>
            </div>
        </div>
        <div class="column large-6 medium-6 small-12">
            <div class="row inner-cols">
                <div class="column large-4 shrink">
                    {{ fields.feature_fourth_image|image('features_img') }}
                </div>
                <div class="column large-8">
                    <h4>{{ fields.feature_fourth_heading }}</h4>
                    <p>{{ fields.feature_fourth_content }}</p>
                </div>
            </div>
        </div>
    </div> 
</div>

Beachten Sie die folgenden Punkte:

• Ersetzen Sie im obigen Template die Feldnamen.
• ('features_img') ist der von mir erstellte Bildstil. Sie können Ihren eigenen nach Ihren Anforderungen erstellen.
• Entfernen Sie {{ kint(fields) }}, nachdem Sie Ihr Template erstellt haben.

Seitenerstellung mit Stack

Sie können auch eine vollständige Seite auf Ihrer Website mit Stacks erstellen. Erstellen Sie einfach ein Seiten-Template in Ihrem Themes-Ordner unter templates > page mit den Namenskonventionen

Page--stacks--{ stacks-machine-name}.html.twig

Erstellen Sie eine Twig-Datei und rendern Sie die gewünschten Felder, und schon haben Sie eine Seite mit Stacks erstellt.

Bei OpenSense Labs arbeiten wir ständig daran, eine bessere und verbesserte Benutzererfahrung zu schaffen. Senden Sie eine E-Mail an [email protected] und kontaktieren Sie uns, um zu erfahren, wie wir Ihnen helfen können, eine ansprechende Erfahrung mit Drupal zu gestalten.