Wie füge ich einen benutzerdefinierten Block zwischen der Ansichtsliste in Drupal 8 hinzu?

Wie oft sind wir schon auf der Landingpage eines Blogs gelandet, auf der die neuesten oder beliebtesten Beiträge in einer anderen Größe hervorgehoben wurden? Oder nehmen wir das Beispiel einer E-Commerce-Website, auf der zufällige Werbeinhalte zwischen regulären Produkten zusätzliche Aufmerksamkeit erhalten? Ziemlich oft, oder?

In diesem Blogbeitrag erfahren wir, wie wir die Struktur der Ansichtszeilen in der Ansichtsvorlage Ihrer Drupal 8-Website ändern können, um diesen Block für spezielle Inhalte zu erstellen.

Für statische HTML-Seiten ist es einfach, die Struktur nach Bedarf hinzuzufügen und zu ändern. Wir können jeden Abschnitt beliebig platzieren. Aber bei einem CMS wie Drupal ist das nicht so einfach. Es gibt eine definierte Struktur der Vorlagen, und um sie an die Anforderungen anzupassen, müssen wir die Twig-Vorlage ändern.

Nehmen wir ein allgemeines Beispiel für eine Blog-Listing-Seite mit 2 Fällen und implementieren wir sie Schritt für Schritt in Drupal 8 und implementieren dies in der Drupal-Ansicht:

Fall eins: Wir müssen eine Google-Anzeige zwischen der Blog-Listenansicht in zufälliger Reihenfolge platzieren.
Fall zwei: Der erste Blog-Artikel sollte einen anderen Stil haben als die anderen aufgelisteten Blog-Artikel.

Das Bild unten dient als Referenz für die oben genannten Fälle.  

Fall 1: Hinzufügen einer Google-Anzeige zwischen der Blog-Listenseite in zufälliger Reihenfolge

Zusammenfassung: Um dies zu implementieren, müssen wir den Google-Anzeigenblock erstellen und ihn entsprechend in der Datei views-view-unformatted.html.twig platzieren. Hier füge ich Schritt-für-Schritt-Anleitungen hinzu.

1. Erstellung des Inhaltstyps.
   Erstellen Sie einen Inhaltstyp und nennen Sie ihn "Blog". 
   
   Gehen Sie zu admin/structure/content type/add neuer Inhaltstyp.
    

   

   
   Fügen Sie mehrere Blog-Inhalte hinzu.
    
2. Erstellen Sie nun eine Ansicht des Blog-Inhaltstyps. 
   
   Gehen Sie zu admin/structure/view/add new view. 
    

   

3. Nachdem Sie eine Ansicht erstellt haben, überschreiben Sie die Twig-Vorlagendatei view--unformatted.twig.html mit views-view-unformatted--<view machine name>.html.twig 
    
4. Erstellen Sie nun einen benutzerdefinierten Block mit dem Namen google-ad mit dem Google-Anzeigenschnipsel darin.
    
5. Um den Anzeigenblock zu platzieren, müssen wir die benutzerdefinierte Blockvariable in der .theme-Datei erstellen, damit wir den Block in der Vorlagendatei in views-view-unformatted--<view machine name>.html.twig platzieren können.
    
6. Fügen Sie in der Datei <theme_name>.theme den folgenden Code hinzu

   function <themename>_preprocess_views_view_unformatted(&$variables) {
      $block = \Drupal\block\Entity\Block::load('google-ad');
      $variables['google-ad-block'] = \Drupal::entityTypeManager()
      ->getViewBuilder('block')
      ->view($block);
   
   }

   
   Wir haben die Blockvariable {{ google-ad-block }} in der .theme-Datei erstellt, die in Twig-Vorlagen gerendert werden kann. 
    
7. Platzieren Sie nun die Blockvariable {{ google-ad-block }} in der Vorlage views-view-unformatted--<view machine name>.html.twig in zufälliger Reihenfolge. Ein Beispiel für die Vorlage ist unten hinzugefügt.

{#
/**
 * @file
 * Standard-Theme-Implementierung zur Anzeige einer Ansicht von unformatierten Zeilen.
 *
 * Verfügbare Variablen:
 * - title: Der Titel dieser Gruppe von Zeilen. Kann leer sein.
 * - rows: Eine Liste der Zeilenelemente der Ansicht.
 *   - attributes: Die HTML-Attribute der Zeile.
 *   - content: Der Inhalt der Zeile.
 * - view: Das Ansichtsobjekt.
 * - default_row_class: Ein Flag, das angibt, ob Standardklassen verwendet werden sollen
 *   auf Zeilen.
 *
 * @see template_preprocess_views_view_unformatted()
 *
 * @ingroup themeable
 */
#}
{% if title %}
  <h3>{{ title }}</h3>
{% endif %}
{% for row in rows %}
{%
set row_classes = [
  default_row_class ? 'views-row',]
cycle(['grid', ' small-12 medium-12 custom-full-grid'], (loop.index == 1) ),
%}

    {% if loop.index == 1 %}
    <div{{ row.attributes.addClass(row_classes) }}>
      <div>
        {{ row.content }}
        </div>
    </div>
    {% endif %}
    {% if (loop.index == 2) or (loop.index == 3) or (loop.index == 4) %}
    <div{{ row.attributes.addClass(row_classes) }}>
        {{ row.content }}
    </div>
    {% endif %}
    {% if loop.index == 5 %}
    <div{{ row.attributes.addClass(row_classes) }}>
    {{ row.content }}
  </div>
        <div class="small-12 columns bottom-40 show-for-medium">{{ google-ad-block }} </div>
    {% endif %}
    {% if loop.index == 6 or loop.index == 7 or loop.index == 8 or loop.index == 9 or loop.index == 10  %}
    <div{{ row.attributes.addClass(row_classes) }}>
        {{ row.content }}
    </div>
    {% endif %}
    {% if loop.index == 11 %}
    <div{{ row.attributes.addClass(row_classes) }}>
        {{ row.content }}
    </div>
        <div class="small-12 columns bottom-40 show-for-medium">{{ google-ad-block }} </div>
    {% endif %}
    {% if loop.index == 12 or loop.index == 13 or loop.index == 14 or loop.index == 15 or loop.index == 16  %}
    <div{{ row.attributes.addClass(row_classes) }}>
        {{ row.content }}
    </div>
    {% endif %}
    {% if loop.index == 17 %}
    <div{{ row.attributes.addClass(row_classes) }}>
        {{ row.content }}
    </div>
        <div class="small-12 columns bottom-40 show-for-medium">{{ google-ad-block }} </div>
    {% endif %}
    {% if loop.index == 18 or loop.index == 19 or loop.index == 20 or loop.index == 21 %}
    <div{{ row.attributes.addClass(row_classes) }}>
        {{ row.content }}
    </div>
    {% endif %}

{% endfor %}

Und das war's!

Fall 2: Den ersten Blog auf der Listenseite anders gestalten

In diesem Fall müssen wir eine Klasse hinzufügen, die spezifisch für den ersten vorgestellten Blog in der Liste ist. So können wir CSS spezifisch dafür hinzufügen. Fügen Sie den unten stehenden Code in die Datei views-view-unformatted--<view machine name>.html.twig ein, die bereits im obigen Beispielvorlagencode hinzugefügt wurde.

set row_classes = [
  default_row_class ? 'views-row',
  cycle(['grid', ' small-12 medium-12 custom-full-grid'], (loop.index == 1) ),
]

Hier haben wir der ersten untergeordneten Liste eine benutzerdefinierte Klasse custom-full-grid hinzugefügt. Jetzt können wir diesen Block entsprechend gestalten.

Wenn es darum geht, die Aufmerksamkeit Ihrer Benutzer zu erregen, tun dies verschiedene Medienelemente besser. Je vielfältiger die Medientypen sind, desto einfacher ist es für Sie. Praktisch, wenn der Content-Manager Videoinhalte oder einen bestimmten Blog oder ein Bild ohne zusätzliches Tool einbetten und bewerben möchte. Das benutzerdefinierte Theming der Ansichtsvorlage zur Änderung der Struktur der Ansichtszeilen auf Ihrer Website ist eine der einfachen Möglichkeiten, den Content-Managern die Kontrolle zu ermöglichen und Platz dafür zu schaffen. 

Gefällt Ihnen der Artikel? Kommentieren Sie unten, um mir mitzuteilen, was Sie über den Artikel denken.