Erstellen eines Anzeige-Stils für Views in Drupal

Das Erstellen eines Anzeige-Stil-Plugins für Views kann zunächst kompliziert erscheinen, aber es ist einfacher, als es aussieht. Hier ist eine Schritt-für-Schritt-Anleitung, wie man das macht, inklusive Quellcode.

Den fertigen Code können Sie hier herunterladen: TARDIS (obwohl es sich noch in der Entwicklung befindet). Und falls Sie eine Einführung in Drupal 8 Module benötigen, hier ist ein praktischer Leitfaden zur Erstellung grundlegender Drupal 8-Module.

.info.yml

Beginnen Sie damit, einen Ordner namens tardis für Ihr Modul im Verzeichnis /modules/custom zu erstellen. Legen Sie darin eine Datei namens tardis.info.yml mit folgendem Inhalt ab:

name: TARDIS
type: module
description: 'Bietet einen View-Anzeigestil, der eine Liste von Jahr- und Monatslinks zu Inhalten in umgekehrter chronologischer Reihenfolge rendert.'
package: Views
core: '8.x'
dependencies:
  - drupal:views

Classy

Nun ist es Zeit, die Plugin-Klasse zu erstellen. Legen Sie eine Datei namens Tardis.php im Verzeichnis src/Plugin/views/style an und fügen Sie den folgenden Code ein:

<?php

namespace Drupal\tardis\Plugin\views\style;

use Drupal\Core\Form\FormStateInterface;
use Drupal\views\Plugin\views\style\StylePluginBase;

/**
 * Style-Plugin, das eine Liste von Jahren und Monaten
 * in umgekehrter chronologischer Reihenfolge mit Links zu Inhalten rendert.
 *
 * @ingroup views_style_plugins
 *
 * @ViewsStyle(
 *   id = "tardis",
 *   title = @Translation("TARDIS"),
 *   help = @Translation("Rendert eine Liste von Jahren und Monaten in umgekehrter chronologischer Reihenfolge mit Links zu Inhalten."),
 *   theme = "views_view_tardis",
 *   display_types = { "normal" }
 * )
 */
class Tardis extends StylePluginBase {

  /**
   * {@inheritdoc}
   */
  protected function defineOptions() {
    $options = parent::defineOptions();
    $options['path'] = ['default' => 'tardis'];
    return $options;
  }

  /**
   * {@inheritdoc}
   */
  public function buildOptionsForm(&$form, FormStateInterface $form_state) {
    parent::buildOptionsForm($form, $form_state);

    // Pfad-Präfix für TARDIS-Links.
    $form['path'] = [
      '#type' => 'textfield',
      '#title' => t('Link-Pfad'),
      '#default_value' => isset($this->options['path']) ? $this->options['path'] : 'tardis',
      '#description' => t('Pfad-Präfix für jeden TARDIS-Link, z.B. example.com/tardis/2015/10.'),
    ];

    // Datumsformat für Monate.
    $form['month_date_format'] = [
      '#type' => 'textfield',
      '#title' => t('Datumsformat für Monate'),
      '#default_value' => isset($this->options['month_date_format']) ? $this->options['month_date_format'] : 'm',
      '#description' => t('Gültiger PHP-Date()-Funktion-Parameter zur Anzeige der Monate.', ['@url' => 'http://php.net/manual/en/function.date.php']),
    ];

    // Ob Monatslinks innerhalb von Jahreslinks verschachtelt werden sollen.
    $options = [
      1 => 'ja',
      0 => 'nein',
    ];
    $form['nesting'] = [
      '#type' => 'radios',
      '#title' => t('Verschachtelung'),
      '#options' => $options,
      '#default_value' => isset($this->options['nesting']) ? $this->options['nesting'] : 1,
      '#description' => t('Sollen Monate innerhalb der Jahre verschachtelt werden? 

        Beispiel:
        

          

              
Verschachtelt
              
Nicht verschachtelt
          
          

            

              

                
2016
                  

                    
03
                    
02
                    
01
                  
                
              
            
            

              

                
2016/03
                
2016/02
                
2016/01
              
            
          
        
      '),
    ];

    // Zusätzliche CSS-Klassen.
    $form['classes'] = [
      '#type' => 'textfield',
      '#title' => t('CSS-Klassen'),
      '#default_value' => isset($this->options['classes']) ? $this->options['classes'] : 'view-tardis',
      '#description' => t('CSS-Klassen zur weiteren Anpassung dieser TARDIS-Seite.'),
    ];
  }

}

Schauen wir uns einige wichtige Stellen an:

 * @ViewsStyle(
 *   id = "tardis",
 *   title = @Translation("TARDIS"),
 *   help = @Translation("Rendert eine Liste von Jahren und Monaten in umgekehrter chronologischer Reihenfolge mit Links zu Inhalten."),
 *   theme = "views_view_tardis",
 *   display_types = { "normal" }
 * )

Diese Kommentare sind wichtig. Sie bilden die Grundlage für unser Plugin. Wenn Sie sie vergessen, funktioniert der Code nicht korrekt.

class Tardis extends StylePluginBase {

Die grundlegende Plugin-Definition. Auch diese ist notwendig.

  protected function defineOptions() {
    $options = parent::defineOptions();
    $options['path'] = ['default' => 'tardis'];
    return $options;
  }

Ermöglicht Basisoptionen und definiert einen wichtigen Standardwert für unser Plugin. Das ist wichtig, weil das Plugin anpassbar sein soll.

  public function buildOptionsForm(&$form, FormStateInterface $form_state) {
    parent::buildOptionsForm($form, $form_state);

Im nächsten Schritt erstellen wir das eigentliche Optionsformular mit Feldern, fast wie normale Konfigurationsformulare. Für mehr Details siehe bitte die Form API Dokumentation.

.module Datei

Die .module-Datei ist in Drupal 8 nicht zwingend erforderlich, aber dort gehört die Theme-Information hinein:

<?php

/**
 * @file
 * Hilfe und Theme-Funktionen für das TARDIS Views Modul.
 */

/**
 * Implementiert hook_theme().
 */
function tardis_theme($existing, $type, $theme, $path) {
  // TARDIS Preprocess Theme-Funktionen in eine separate .inc-Datei auslagern.
  \Drupal::moduleHandler()->loadInclude('tardis', 'inc', 'tardis.theme');

  return [
    'tardis' => [
      'file' => 'tardis.theme.inc',
    ],
  ];
}

Im Wesentlichen delegieren wir die Preprocess-Funktion an eine separate Datei, um die Organisation zu verbessern.

.theme.inc Datei

Erstellen Sie im Modulverzeichnis eine Datei namens tardis.theme.inc und fügen Sie folgenden Code ein:

<?php

/**
 * @file
 * Theme-Funktionen für TARDIS Views.
 */
function template_preprocess_views_view_tardis(&$variables) {
  // Vom Benutzer gesetzte View-Optionen.
  $options = $variables['view']->style_plugin->options;

  // Erstelle ein zweidimensionales Array mit Jahren und Monaten.
  $time_pool = [];

  foreach ($variables['view']->result as $id => $result) {
    $created = $result->node_field_data_created;
    $created_year = date('Y', $created);
    // Datumsformat für Monat.
    $month_date_format = isset($options['month_date_format']) ? $options['month_date_format'] : 'm';
    $created_month_digits = date('m', $created);
    $created_month = date($month_date_format, $created);
    $time_pool[$created_year][$created_month_digits] = "$created_month";
  }

  $options['time_pool'] = $time_pool;

  // Optionen für Twig aktualisieren.
  $variables['options'] = $options;
}

Dieser Code nimmt im Wesentlichen alle Erstellungsdaten der Nodes und baut ein assoziatives Array, das zusammen mit anderen, unveränderten Optionen aus dem Formular an das Template zur endgültigen Ausgabe übergeben wird.

Twig Template

Für die Ausgabe erstellen Sie nun eine Datei namens views-view-tardis.html.twig im Ordner templates. Warum gerade dieser Name? Erinnern Sie sich an die Kommentare am Anfang dieses Tutorials?

* theme = "views_view_tardis",

Das bedeutet, dass das Template standardmäßig im Ordner /templates mit genau diesem Namen liegen muss, wobei Unterstriche durch Bindestriche ersetzt und die Endung .html.twig angehängt wird.

Der Code sieht so aus:

{#
/**
 * Standard-Theme-Implementierung für Views zur Ausgabe eines TARDIS-Archivs.
 *
 * Verfügbare Variablen:
 * - options: View-Plugin-Stiloptionen:
 *   - classes: CSS-Klassen.
 *   - nesting: Ob Monate innerhalb der Jahre verschachtelt sind.
 *   - path: Link-Pfad, z.B.: example.com/TARDIS/2016/03
 *   - time_pool: Zweidimensionales Array mit Jahren und Monaten, die Inhalt enthalten.
 *
 * @see template_preprocess_views_view_tardis()
 *
 * @ingroup themeable
 */
#}
{%
  set classes = [
    'views-view-tardis',
    options.classes
  ]
%}
<div{{ attributes.addClass(classes) }}>
  <ul>
    {% for key, item in options.time_pool %}
      {% if options.nesting == 1 %}
        <li><a href="/{{ options.path }}/{{ key }}">{{ key }}</a><ul>
        {% for subkey, subitem in item %}
          <li><a href="/{{ options.path }}/{{ key }}/{{ subkey }}">{{ subitem }}</a></li>
        {% endfor %}
        </ul></li>
      {% else %}
        {% for subkey, subitem in item %}
          <li><a href="/{{ options.path }}/{{ key }}/{{ subkey }}">{{ subitem }}</a></li>
        {% endfor %}
      {% endif %}
    {% endfor %}
  </ul>
</div>

Zunächst werden alle Variablen extrahiert, die als assoziatives Array $variables am Anfang der Datei übergeben wurden. Diese sind sauber in $variables['options'] gespeichert – oder in Twig: variables.options.

Dann legen wir Klassen für unser View-Element fest, wie sie im Optionsformular definiert wurden:

{%
  set classes = [
    'views-view-tardis',
    options.classes
  ]
%}

Und denken Sie daran:

<div{{ attributes.addClass(classes) }}>

Der restliche Code ist der Ausgabe der Monate und Jahre gewidmet, in denen Beiträge existieren, als HTML-Liste. Wichtig ist hier die for-Schleife:

{% for key, item in options.time_pool %}

Die jede Linkadresse korrekt zusammenstellt, zum Beispiel:

<li><a href="/{{ options.path }}/{{ key }}/{{ subkey }}">{{ subitem }}</a></li>

Noch etwas

Zuletzt sollten Sie eine Standard-View anlegen und exportieren, um die Benutzbarkeit zu verbessern. Sie werden feststellen, dass es bereits eine Standard-View in /config/install/views.view.tardis.yml gibt. Diese Standard-View wird automatisch verfügbar, sobald das Modul aktiviert wird.

Ich habe sie erstellt und über die Einzelexport-Funktion unter admin/config/development/configuration/single/export exportiert, gemäß dem hervorragenden Tutorial von Subhojit Paul.

Das war’s!

Jetzt können Sie Ihr eigenes Views-Plugin für Drupal 8 schreiben! Hinterlassen Sie gern einen Kommentar unten. Viel Erfolg beim Programmieren!