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!