Themenansichten in Drupal 8 - Plugins für benutzerdefinierte Stile

Ansichten sind im Drupal 8 -Kern. Wir alle wissen das inzwischen. Twig ist der neue Templating -Motor in Drupal 8. Dies wissen wir auch. Aber wissen wir, wie man mit dem ersten programmatisch interagiert, um eine Ansicht mit dem zweiten zu thematisieren? Abgesehen von übergeordneten Ansichtsvorlagen wie bei jedem anderen Subsystem haben wir eine leistungsstärkere Alternative in Form von Ansichten -Plugins (Anzeige, Stil, Zeile und Feld) verfügbar.

In diesem Artikel werden wir uns ansehen, wie wir ein benutzerdefiniertes Style -Plugin für Ansichten in Drupal 8 erstellen können. Wir werden das Registerkarte Bootstrap als Ziel verwenden und eine Registerkarte für unsere Ansichtsergebnisse implementieren. In der Ansichtskonfiguration können wir mit den Style -Einstellungen angeben, welches Feld als Tab -Navigationskopie verwendet wird, sodass die restlichen Felder in den jeweiligen Registerkarte angezeigt werden. Grundsätzlich stellt jedes Ansichtsergebnis eine Registerkarte dar - daher ist dieses Beispiel nicht für Ansichten geeignet, die mehr als wenige Ergebnisse erzielen. Das Hauptziel ist zu veranschaulichen, wie wir Plugins im Stil unserer eigenen Ansichten in Drupal 8 erstellen können.

Wir werden die Details darüber nicht behandeln, wie Sie Bootstrap in Ihrem Projekt verwenden können. Sie können sich jedoch die Dokumentationsseite zu Assets oder sogar in diesem Artikel ansehen, um sicherzustellen, dass anonyme Benutzer davon profitieren können, dass JQuery auf der Seite geladen wird. Und wenn Sie den Code sehen möchten, den wir im Voraus schreiben, finden Sie ihn in diesem Repository innerhalb des Demo -Moduls.

Key Takeaways

• Drupal 8 Core enthält jetzt Ansichten, und Twig ist der neue Vorlagenmotor. View -Plugins (Display, Stil, Zeile und Feld) bieten eine leistungsstarke Alternative zu überschreibungsübergreifenden Ansichtsvorlagen. In dieser Handbuch wird erläutert, wie Sie ein benutzerdefiniertes Style -Plugin für Ansichten in Drupal 8 erstellen. Mit dieser Informationen werden eine Registerkartenausgabe für die Ansichtsergebnisse mithilfe der Ansicht mithilfe der Ergebnisse implementiert. Registerkarte Bootstrap Markup.
• Die Erstellung eines benutzerdefinierten Style -Plugins beinhaltet das Erstellen einer Pluginklasse im Ordner eines Plugins/Views/Style eines Moduls. Diese Klasse erstreckt sich aus der StylePluginBase -Klasse und enthält eine @ViewStyle -Annotation, die die ID-, Titel-, Hilfetexte-, Themen- und Anzeigetypen für das Plugin definiert. Das Style -Plugin ist für die Wiedergabe der Liste verantwortlich und kann von den meisten Anzeigetypen verwendet werden.
• Der letzte Teil des Erstellens eines benutzerdefinierten Style -Plugins besteht darin, eine Themenfunktion zu definieren und eine Twig -Vorlagendatei zu erstellen. Die in der .module -Datei definierte Themenfunktion übergibt das $ View -Objekt und die resultierenden $ Zeilen standardmäßig an die Vorlage. Die Twig -Vorlagendatei steuert, wie die Ausgabe des Plugins gerendert wird. Sobald das benutzerdefinierte Style -Plugin erstellt wurde, kann es über die Drupal Admin -Schnittstelle aktiviert und mit einer Ansicht verwendet werden, indem Sie es aus der Formateinstellung auswählen.

Was ist das Style -Plugin?

Das Style -Plugin für Ansichten ist das, das für die Rendern der listing verantwortlich ist. Bemerkenswerte Beispiele für Kernstil -Plugins sind unformatierte Liste , HTML -Liste , Tabelle oder grid . Sie werden vom Anzeige -Plugin verwendet und verwenden wiederum Zeilen -Plugins, die ein Element in der Auflistung darstellen.

In Drupal 8 werden alle Ansichten -Plugin -Typen mit dem neuen Plugin -System erstellt und teilen einige gemeinsame Funktionen (sie erstrecken sich immer von derselben Ansichts -PluginBase).

Erstellen wir jetzt unser eigenes solches Style -Plugin, das von den meisten Anzeigetypen (Seite, Block usw.) verwendet werden kann und das das Feldzeilen -Plugin verwendet.

Das Plugin

des Bootstrap -Registerkartens

Der erste Schritt besteht darin, unsere Plugin -Klasse im Plugin-/Ansichten/Stilordner unseres Moduls zu erstellen:

<span>namespace Drupal<span>\demo\Plugin\views\style</span>;
</span><span>use Drupal<span>\Core\Form\FormStateInterface</span>;
</span><span>use Drupal<span>\views\Plugin\views\style\StylePluginBase</span>;
</span>
<span>/**
</span><span> * A Views style that renders markup for Bootstrap tabs.
</span><span> *
</span><span> * <span>@ingroup views_style_plugins
</span></span><span> *
</span><span> * @ViewsStyle(
</span><span> *   id = "bootstrap_tabs",
</span><span> *   title = @Translation("Bootstrap Tabs"),
</span><span> *   help = @Translation("Uses the Bootstrap Tabs component."),
</span><span> *   theme = "demo_bootstrap_tabs",
</span><span> *   display_types = <span>{"normal"}
</span></span><span> * )
</span><span> */
</span><span>class BootstrapTabs extends StylePluginBase {
</span>
  <span>/**
</span><span>   * Does this Style plugin allow Row plugins?
</span><span>   *
</span><span>   * <span>@var <span>bool</span>
</span></span><span>   */
</span>  <span>protected $usesRowPlugin = TRUE;
</span>
  <span>/**
</span><span>   * Does the Style plugin support grouping of rows?
</span><span>   *
</span><span>   * <span>@var <span>bool</span>
</span></span><span>   */
</span>  <span>protected $usesGrouping = FALSE;
</span>
  <span>/**
</span><span>   * <span>{@inheritdoc}
</span></span><span>   */
</span>  <span>protected function defineOptions() {
</span>    <span>$options = <span>parent::</span>defineOptions();
</span>    <span>$options['tab_nav_field'] = array('default' => '');
</span>    <span>return $options;
</span>  <span>}
</span>
  <span>/**
</span><span>   * <span>{@inheritdoc}
</span></span><span>   */
</span>  <span>public function buildOptionsForm(&$form, FormStateInterface $form_state) {
</span>    <span><span>parent::</span>buildOptionsForm($form, $form_state);
</span>    <span>$options = $this->displayHandler->getFieldLabels(TRUE);
</span>    <span>$form['tab_nav_field'] = array(
</span>      <span>'#title' => $this->t('The tab navigation field'),
</span>      <span>'#description' => $this->t('Select the field that will be used as the tab navigation. The rest of the fields will show up in the tab content.'),
</span>      <span>'#type' => 'select',
</span>      <span>'#default_value' => $this->options['tab_nav_field'],
</span>      <span>'#options' => $options,
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

Der Drupal -Plugin -Typ, von dem wir eine Instanz von IS ViewSStyle mit einer grundlegenden Konfiguration in der Annotation erstellen. Abgesehen von den offensichtlichen Überlasse haben wir das Thema und die Tasten display_types, die erwähnenswert sind. Die erste Erklärung, in welcher Themenfunktion mit diesem Stil -Plugin seine Daten rendern, während die zweite Art von Display -Plugins dieser Stil verwendet werden kann (in unserem Fall alle Anzeigentypen, die sonst keinen benutzerdefinierten Typ angeben: normal). Weitere Informationen zu allen verfügbaren Annotationskonfigurationen für diesen Plugin -Typ finden Sie in der DrupalviewSannotationViewStyle -Annotationsklasse.

Verwenden der beiden Klasseneigenschaften erklären wir, dass unser Stil Zeilen -Plugins verwendet, aber keine Gruppierung zulässt. Stellen Sie sicher, dass Sie die übergeordneten Klassen ansehen, um mehr darüber zu erfahren, welche anderen Optionen so angegeben werden können. Zum Beispiel erklärt die Klasse, die wir erweitern, bereits, dass Ansichtenfelder mit dem Style -Plugin verwendet werden können.

Wie bereits erwähnt, erstellen wir mit den beiden Methoden eine Plugin -Option und ein Formularelement, um anzugeben, welches Feld als Registerkarte Navigation fungieren soll. Mit dem aktuellen Display-Handler ($ this-> displayHandler) können wir alle verfügbaren Ansichtsfelder laden, die der Site Builder hinzugefügt hat. Und dieses neue Formularelement wird für die Formulareinstellungen verfügbar sein:

Da wir uns von der Stylepluginbase -Klasse erstrecken, müssen wir nichts mehr tun. Für die Markup -Ausgabe können wir uns auf das Thema Demo_bootstrap_tabs verlassen, das die relevanten Variablen aus der ausgeführten Ansicht empfängt. Wenn wir wollen, können wir die Render -Methoden überschreiben und weitere Variablen hinzufügen, das Thema oder was auch immer wir brauchen. Wir sind gut mit den Standardeinstellungen, zumal wir einen Präprozessor implementieren, um die Variablen zu verarbeiten, die die Vorlage empfängt.

Das Thema

Es ist Zeit, das Thema Demo_bootstrap_tabs wie normalerweise zu definieren (in unserer .module -Datei):

<span>namespace Drupal<span>\demo\Plugin\views\style</span>;
</span><span>use Drupal<span>\Core\Form\FormStateInterface</span>;
</span><span>use Drupal<span>\views\Plugin\views\style\StylePluginBase</span>;
</span>
<span>/**
</span><span> * A Views style that renders markup for Bootstrap tabs.
</span><span> *
</span><span> * <span>@ingroup views_style_plugins
</span></span><span> *
</span><span> * @ViewsStyle(
</span><span> *   id = "bootstrap_tabs",
</span><span> *   title = @Translation("Bootstrap Tabs"),
</span><span> *   help = @Translation("Uses the Bootstrap Tabs component."),
</span><span> *   theme = "demo_bootstrap_tabs",
</span><span> *   display_types = <span>{"normal"}
</span></span><span> * )
</span><span> */
</span><span>class BootstrapTabs extends StylePluginBase {
</span>
  <span>/**
</span><span>   * Does this Style plugin allow Row plugins?
</span><span>   *
</span><span>   * <span>@var <span>bool</span>
</span></span><span>   */
</span>  <span>protected $usesRowPlugin = TRUE;
</span>
  <span>/**
</span><span>   * Does the Style plugin support grouping of rows?
</span><span>   *
</span><span>   * <span>@var <span>bool</span>
</span></span><span>   */
</span>  <span>protected $usesGrouping = FALSE;
</span>
  <span>/**
</span><span>   * <span>{@inheritdoc}
</span></span><span>   */
</span>  <span>protected function defineOptions() {
</span>    <span>$options = <span>parent::</span>defineOptions();
</span>    <span>$options['tab_nav_field'] = array('default' => '');
</span>    <span>return $options;
</span>  <span>}
</span>
  <span>/**
</span><span>   * <span>{@inheritdoc}
</span></span><span>   */
</span>  <span>public function buildOptionsForm(&$form, FormStateInterface $form_state) {
</span>    <span><span>parent::</span>buildOptionsForm($form, $form_state);
</span>    <span>$options = $this->displayHandler->getFieldLabels(TRUE);
</span>    <span>$form['tab_nav_field'] = array(
</span>      <span>'#title' => $this->t('The tab navigation field'),
</span>      <span>'#description' => $this->t('Select the field that will be used as the tab navigation. The rest of the fields will show up in the tab content.'),
</span>      <span>'#type' => 'select',
</span>      <span>'#default_value' => $this->options['tab_nav_field'],
</span>      <span>'#options' => $options,
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

Das Style -Plugin übergibt das $ View -Objekt und die resultierenden $ Zeilen standardmäßig an die Vorlage. Es liegt an dem Präprozessor, diese Variablen (falls erforderlich) ein wenig umzugehen, bevor sie an die Vorlage gesendet werden:

<span>/**
</span><span> * Implements hook_theme().
</span><span> */
</span><span>function demo_theme($existing, $type, $theme, $path) {
</span>  <span>return array(
</span>    <span>'demo_bootstrap_tabs' => array(
</span>      <span>'variables' => array('view' => NULL, 'rows' => NULL),
</span>      <span>'path' => drupal_get_path('module', 'demo') . '/templates',
</span>    <span>),
</span>  <span>);
</span><span>}
</span>

Also, was passiert hier? Zunächst überprüfen wir die Style -Plugin -Optionen für den zu verwendenden Feldnamen (der bei der Konfiguration der Ansicht ausgewählt wurde). Wenn einer nicht da ist, kehren wir zurück, aber nicht bevor ein bisschen Standardvorbereitung vorliegt, dass die Funktion template_process_views_view_unformatted bereits gut funktioniert. Also delegieren wir es. Anschließend durchlaufen wir die Ergebnisse der Ansichten und erstellen eine Reihe von Inhalten für unsere Registerkartennavigation. Dafür verwenden wir die Funktionsfunktion "Standardansichten" Views_view_field, um das ausgewählte Feld zu rendern. Schließlich übergeben wir dieses Array an die Vorlage und führen auch den Standardvorprozessor des nicht formatierten Listenstils aus.

Die Vorlage

In Drupal 8 gibt es keine Themenfunktionen mehr, alles wird jetzt in Zweigvorlagen behandelt. Lassen Sie uns also sehen, wie die Datei der Demo-Bootstrap-tabs.html.twig im Ordner unseres Moduls aussieht:

<span>/**
</span><span> * Prepares variables for views demo_bootstrap_tabs template.
</span><span> *
</span><span> * Template: demo-bootstrap-tabs.html.twig.
</span><span> *
</span><span> * <span>@param <span>array</span> $variables
</span></span><span> *   An associative array containing:
</span><span> *   - view: The view object.
</span><span> *   - rows: An array of row items. Each row is an array of content.
</span><span> */
</span><span>function template_preprocess_demo_bootstrap_tabs(&$variables) {
</span>  <span>$view = $variables['view'];
</span>  <span>$rows = $variables['rows'];
</span>  <span>$variables['nav'] = array();
</span>
  <span>// Prepare the tab navigation.
</span>  <span>$field = $view->style_plugin->options['tab_nav_field'];
</span>  <span>if (!$field || !isset($view->field[$field])) {
</span>    <span>template_preprocess_views_view_unformatted($variables);
</span>    <span>return;
</span>  <span>}
</span>
  <span>$nav = array();
</span>  <span>foreach ($rows as $id => $row) {
</span>    <span>$nav[$id] = array(
</span>      <span>'#theme' => 'views_view_field',
</span>      <span>'#view' => $view,
</span>      <span>'#field' => $view->field[$field],
</span>      <span>'#row' => $row['#row'],
</span>    <span>);
</span>  <span>}
</span>
  <span>template_preprocess_views_view_unformatted($variables);
</span>  <span>$variables['nav'] = $nav;
</span><span>}
</span>

Wie Sie sehen können, ist dies das erforderliche Markup für die Registerkarte Bootstrap. Es funktioniert natürlich nicht, ohne sicherzustellen, dass die relevanten Bootstrap -Stile und das Skript zuerst in Ihrem Thema geladen sind.

Das erste, was wir rendern, sind die Registerkarte Navigationselemente (aus unserer NAV -Variablen). Während wir dieses Array durchlaufen, verwenden wir auch den Schleifenindexwert, um das erste Element als aktiv zu standardisieren und die folgenden Registerkarteninhalte mit eindeutigen IDs abzielen. Für den tatsächlichen Wert der Elemente drucken wir einfach das Render -Array, das wir in unserem Präprozessor erstellt haben, und Drupal kümmert sich um das Rendern. Davon abgesehen ist es wahrscheinlich eine gute Idee, sicherzustellen, dass das Feld, das Sie hier verwenden, relativ kurz ist, ohne einen Link und ein einfaches Markup. Titel würden wahrscheinlich gut funktionieren. Dies ist jedoch eine Frage der Konfiguration der Ansicht entsprechend.

Unter der Navigation drucken wir die tatsächlichen Ansichtszeilen und verwenden denselben Schleifenindex, um die erste Zeile als aktives Registerkartenbereich zu standardisieren und sie einzigartig zu identifizieren, damit die obige Navigation ihre Sichtbarkeit steuern kann. Was den Inhalt betrifft, drucken wir die gesamte Variable der Zeile (die in TEMPRATE_PREPROCESS_Views_view_unformated erstellt wird) und enthält alle Felder in unserer Ansicht. Und wenn wir nicht das Feld, das wir für die Navigation verwendet haben, nicht einschließen möchten, können wir diese nur von der Anzeige in der Ansichtskonfiguration ausschließen. Es wird immer noch in der Navigation angezeigt (weil wir es dort ausdrücklich drucken), aber nicht im Hauptschreiberbereich.

Schlussfolgerung

Und da haben wir es. Ein Aussichtstil -Plugin zum Ausgeben der Ansichtsergebnisse als Registerkarte Bootstrap. Alles, was wir jetzt brauchen, ist sicherzustellen, dass die Bootstrap -Assets geladen sind und einfach unsere Ansicht so konfigurieren, dass sie das neue Style -Plugin verwenden. Beachten Sie, dass dies nicht für Ansichten mit vielen Ergebnissen gedacht ist und nur als Beispiel für das Erstellen von Stil -Plugins dient.

Wenn Sie Fragen, Kommentare oder Vorschläge haben, lassen Sie sie bitte unten!

häufig gestellte Fragen zu den Themenansichten in Drupal 8

Wie kann ich ein benutzerdefiniertes Style -Plugin in Drupal 8 erstellen? Zunächst müssen Sie ein neues Modul erstellen, wenn Sie noch keine haben. Erstellen Sie im SRC/Plugin/View/Style -Verzeichnis Ihres Moduls im Modul eines Moduls eine PHP -Datei für Ihr benutzerdefiniertes Style -Plugin. Die Datei sollte eine Klasse enthalten, die die StylepluginBase -Klasse erweitert und eine @ViewStyle -Annotation enthält. Die Annotation definiert die ID, den Titel und den Hilfetext für Ihr Plugin. Nachdem Sie die erforderlichen Methoden in Ihrer Klasse definiert haben, können Sie Ihr neues Style -Plugin über die Drupal -Administratorschnittstelle aktivieren. Drupal 8 besteht in der Regel aus drei Schlüsselkomponenten: der Plugin -Definition, der Plugin -Klasse und der Vorlagendatei. Die Plugin -Definition wird über die @ViewStyle -Annotation bereitgestellt und enthält die ID, den Titel und den Hilfetext für das Plugin. Die Plugin -Klasse erweitert die StylepluginBase -Klasse und definiert die Methoden, die steuern, wie sich das Plugin verhält. Die Vorlagendatei ist eine Zweigdatei, die steuert, wie die Ausgabe des Plugins gerendert wird.

Wie kann ich die Standardansichtsvorlage in Drupal 8 überschreiben? Der Name der Datei sollte dem Muster anzeigen-View-[Ansichtsname]-[Anzeige-ID] .html.twig. In dieser Datei können Sie den HTML -Markup- und den Zweig -Code definieren, mit dem die Ansicht gerendert werden sollte. Löschen Sie nach dem Erstellen der Datei den Drupal -Cache, um Ihre Änderungen zu sehen. Durch eine Vorverarbeitungsfunktion in der THEME -Datei Ihres Themas ausgeführt. Die Funktion sollte dem Muster thema_name_preprocess_views_view__view_name__Display_id folgen und ein einzelnes Argument benötigen, bei dem es sich um eine Reihe von Variablen handelt. Sie können diesem Array neue Variablen hinzufügen, und sie werden in Ihrer Zweig -Vorlage erhältlich sein. Erstellt ein benutzerdefiniertes Style -Plugin in Drupal 8, können Sie es mit einer Ansicht über die Drupal Admin -Schnittstelle verwenden. Bearbeiten Sie die Ansicht und gehen Sie zum Abschnitt "Format". Klicken Sie auf die Formateinstellung und wählen Sie in der Liste Ihr benutzerdefiniertes Style -Plugin aus. Nach dem Speichern der Ansicht wird sie mithilfe Ihres benutzerdefinierten Style -Plugins gerendert. Custom Style -Plugin in Drupal 8 ist für die Wiedergabe der Ansicht verantwortlich. Es dauert eine Reihe von Zeilen als Eingabe und gibt ein Render -Array zurück. Das Render -Array sollte den #THEME -Schlüssel enthalten, der die zu verwendende Twig -Vorlage angibt, und alle Variablen, die an die Vorlage übergeben werden sollten.

Wie kann ich eine Ansichtsvorlage in Drupal 8? 🎜> Debuguging einer Ansichtsvorlage in Drupal 8 kann mit der Twig -Debug -Funktion durchgeführt werden. Aktivieren Sie das Twig -Debugging in Ihrer Datei dienste.yml, indem Sie die Debug -Option auf true festlegen. Wenn Sie dann eine Seite anzeigen, die die Vorlage verwendet, werden Kommentare im HTML -Quellcode angezeigt, die anzeigen, welche Vorlagendateien verwendet werden, und Vorlagendateinamen vorschlagen, mit denen Sie sie überschreiben können. Ich verwende eine bedingte Logik in einer Ansichtsvorlage in Drupal 8? In Ihrem Zweig -Code können Sie das IF -Schlüsselwort verwenden, um eine Bedingung zu testen, und dann unterschiedliche Markups oder Code eingeben, je nachdem, ob die Bedingung wahr oder falsch ist.

Wie kann ich den Pager in einer Ansicht in Drupal anpassen 8?

Das Anpassen des Pagers in einer Ansicht in Drupal 8 kann über die Drupal -Administratorschnittstelle durchgeführt werden. Bearbeiten Sie die Ansicht und gehen Sie zum Pager -Abschnitt. Hier können Sie den zu verwendenden Pagertyp auswählen, die Anzahl der Elemente pro Seite festlegen und andere Pager -Einstellungen konfigurieren.

Wie kann ich eine reaktionsschnelle Ansicht in Drupal 8? Dies könnte die Verwendung von CSS -Medienabfragen zur Anpassung des Layouts und des Aussehens der Ansicht an verschiedenen Bildschirmgrößen und die Verwendung flexibler Einheiten wie Prozentsätze für Breiten und Höhen anstelle von festen Einheiten wie Pixel umfassen.

.

Das obige ist der detaillierte Inhalt vonThemenansichten in Drupal 8 - Plugins für benutzerdefinierte Stile. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!