Vues de théâtre dans Drupal 8 - Plugins de style personnalisé

Les vues se trouvent dans Drupal 8 Core. Nous le savons tous maintenant. Twig est le nouveau moteur de modèles de Drupal 8. Ceci que nous savons aussi. Mais savons-nous comment interagir par programme avec le premier afin de thème une vue en utilisant la seconde? En plus de remplacer les modèles de vue comme avec tout autre sous-système, nous disposons d'une alternative plus puissante sous la forme de plugins de vues (affichage, style, ligne et champ).

Dans cet article, nous allons voir comment nous pouvons créer un plugin de style personnalisé pour les vues dans Drupal 8. Nous utiliserons le balisage de l'onglet bootstrap comme objectif et implémentez une sortie à onglets pour nos résultats de vue. Dans la configuration de la vue, les paramètres de style nous permettront de spécifier quel champ sera utilisé comme copie de navigation à l'onglet, laissant le reste des champs indiqués dans les volets respectifs. Fondamentalement, chaque résultat de la vue représentera un onglet - donc cet exemple n'est pas adapté aux vues qui ont plus que quelques résultats. L'objectif principal est d'illustrer comment nous pouvons créer nos propres plugins de style de vue dans Drupal 8.

Nous ne couvrirons pas les détails sur la façon dont vous pouvez utiliser Bootstrap dans votre projet. Cependant, vous pouvez consulter la page de documentation sur les actifs ou même cet article sur la façon de vous assurer que les utilisateurs anonymes peuvent bénéficier de la charge de jQuery sur la page. Et si vous voulez voir le code que nous écrivons à l'avance, vous pouvez le trouver dans ce référentiel dans le module de démonstration.

Les plats clés

• Drupal 8 Core comprend désormais des vues, et Twig est le nouveau moteur de modèles. Les plugins de vues (affichage, style, ligne et champ) offrent une alternative puissante aux modèles de vue primordiale, et ce guide explique comment créer un plugin de style personnalisé pour les vues dans Drupal 8. Il sera utilisé pour implémenter une sortie à onglets pour les résultats de la vue en utilisant Marquage de l'onglet bootstrap.
• La création d'un plugin de style personnalisé implique la construction d'une classe de plugin dans le dossier Plugin / View / Style d'un module. Cette classe s'étend de la classe StylePluginBase et comprend une annotation @ViewSstyle, qui définit les types d'ID, de titre, de texte d'aide, de thème et d'affichage pour le plugin. Le plugin de style est responsable du rendu de la liste et peut être utilisé par la plupart des types d'affichage.
• La partie finale de la création d'un plugin de style personnalisé consiste à définir une fonction de thème et à créer un fichier de modèle de brindille. La fonction de thème, définie à l'intérieur du fichier .module, transmet l'objet $ visual et les lignes $ résultantes par défaut du modèle. Le fichier de modèle Twig contrôle la façon dont la sortie du plugin est rendue. Une fois le plugin de style personnalisé créé, il peut être activé via l'interface d'administration Drupal et utilisé avec une vue en le sélectionnant dans le paramètre de format.

quel est le plugin de style?

Le plugin de style Views est celui qui est responsable du rendu de la liste Liste . Des exemples notables de plugins de style de base sont Liste non formatée , HTML LIST , TABLE ou GRID . Ils sont utilisés par le plugin d'affichage et ils utilisent à leur tour les plugins de ligne qui représentent un élément dans la liste.

Dans Drupal 8, tous les types de plugins vues sont construits à l'aide du nouveau système de plugin et partagent certaines fonctionnalités communes (elles s'étendent toujours à partir des mêmes vues Pluginbase).

Créons maintenant notre propre plugin de style qui peut être utilisé par la plupart des types d'affichage (page, bloc, etc.) et qui utilise le plugin de ligne de champ.

Le plugin de style tabulation bootstrap

La première étape consiste à créer notre classe de plugin située dans le dossier plugin / vues / style de notre module:

<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>

Le type de plugin Drupal dont nous créons une instance de vues SO Vues avec une configuration de base passée dans l'annotation. Laissant de côté les touches évidentes, nous avons les touches de thème et d'affichage_types qui méritent d'être mentionnées. Le premier déclare quelle fonction thème ce plugin de style utilisera pour rendre ses données tandis que le second déclare quels types de plugins d'affichage auquel ce style peut être utilisé (dans notre cas tous les types d'affichage qui ne spécifient pas autrement un type personnalisé: normal). Pour plus d'informations sur toutes les configurations d'annotation disponibles pour ce type de plugin, consultez la classe d'annotation DrupalViewSannotationViewSyle.

En utilisant les deux propriétés de classe, nous déclarons que notre style utilise des plugins de ligne mais ne permet pas le regroupement. Assurez-vous de consulter les classes parentales pour en savoir plus sur les autres options qui peuvent être spécifiées comme celle-ci. Par exemple, la classe que nous étendons déclare déjà que les champs de vues peuvent être utilisés avec le plugin de style.

Comme mentionné précédemment, en utilisant les deux méthodes, nous créons une option de plugin et un élément de formulaire pour pouvoir spécifier quel champ devrait agir comme la navigation à onglet. En utilisant le gestionnaire d'affichage actuel ($ this-> DisplayHandler), nous pouvons charger tous les champs de vue disponibles que le constructeur de sites y a ajoutés. Et cet nouvel élément de formulaire sera disponible sur le formulaire de paramètres de style:

Puisque nous étendons de la classe StylePluginbase, il n'y a rien de plus que nous devons faire. Pour la sortie de balisage, nous pouvons compter sur le thème Demo_bootstrap_tabs qui reçoit les variables pertinentes de la vue exécutée. Si nous le voulons, nous pouvons remplacer l'une des méthodes de rendu et ajouter plus de variables, modifier le thème ou tout ce dont nous avons besoin. Nous sommes bons avec les valeurs par défaut, d'autant plus que nous implémenterons un préprocesseur pour gérer les variables que le modèle reçoit.

le thème

Il est temps de définir le thème Demo_bootstrap_tabs comme nous le faisons normalement (à l'intérieur de notre fichier .module):

<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>

Le plugin de style passe l'objet $ View et les lignes $ résultantes par défaut au modèle. Il appartient au préprocesseur de faire un peu de manipulation de ces variables (si nécessaire) avant d'être envoyées au modèle:

<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>

Alors, que se passe-t-il ici? Tout d'abord, nous vérifions les options de plugin de style pour le nom de champ à utiliser (celui qui a été sélectionné lors de la configuration de la vue). Si l'on n'est pas là, nous retournons, mais pas avant de faire un peu de prétraitement par défaut que la fonction Template_Preprocess_Views_View_UnFormatted fait déjà bien. Nous y déléguons donc. Ensuite, nous parcourons les résultats des vues et construisons un tableau de contenu pour notre navigation sur l'onglet. Pour cela, nous utilisons la fonction de thème Views Views_View_field par défaut pour rendre le champ sélectionné. Enfin, nous passons ce tableau au modèle et exécutons également le préprocesseur par défaut du style de liste non formaté.

le modèle

Dans Drupal 8, il n'y a plus de fonctions de thème, tout est maintenant géré dans des modèles de brindilles. Voyons donc à quoi ressemble le fichier Demo-Bootstrap-Tabs.html.twig dans le dossier des modèles de notre module:

<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>

Comme vous pouvez le voir, il s'agit du balisage nécessaire pour les onglets bootstrap. Cela ne fonctionnera pas, bien sûr, sans s'assurer que les styles et le script de bootstrap pertinents sont d'abord chargés dans votre thème.

La première chose que nous rendons est les éléments de navigation à onglet (à partir de notre variable de navigation). Lors du bouclage via ce tableau, nous utilisons également la valeur d'index de boucle afin de par défaut le premier élément comme actif et de cibler les volets de contenu à l'onglet ci-dessous à l'aide d'ID uniques. Pour la valeur réelle des éléments, nous imprimons simplement le tableau de rendu que nous avons créé dans notre préprocesseur et Drupal s'occupe de le rendu. Cela étant dit, c'est probablement une bonne idée de s'assurer que le domaine que vous utilisez ici est relativement court, sans lien ni balisage simple. Les titres fonctionneraient probablement très bien. Mais c'est une question de configuration de la vue en conséquence.

En dessous de la navigation, nous imprimons les lignes de vue réelles, en utilisant le même index de boucle pour par défaut la première ligne comme le volet d'onglet actif et les identifions de manière unique afin que la navigation ci-dessus puisse contrôler leur visibilité. Quant au contenu, nous imprimons la variable Row.Content entière (qui est préparée dans Template_preprocess_Views_View_unFormatted) et qui contient tous les champs à notre avis. Et si nous voulons pas inclure le champ que nous avons utilisé pour la navigation, nous pouvons simplement exclure celui-là de l'affichage dans la configuration de la vue. Il apparaîtra toujours dans la navigation (parce que nous l'imprimerons explicitement là-bas) mais pas dans le volet d'onglet principal.

Conclusion

Et là nous l'avons. Un plugin de style vues pour sortir les résultats de la vue sous forme d'onglets bootstrap. Tout ce dont nous avons besoin maintenant, c'est de nous assurer que les actifs de bootstrap sont chargés et de configurer simplement notre vue pour utiliser le nouveau plugin de style. Gardez à l'esprit que cela n'est pas destiné aux vues avec beaucoup de résultats et cela ne sert qu'à exemple pour montrer comment créer des plugins de style.

Si vous avez des questions, des commentaires ou des suggestions, veuillez les laisser ci-dessous!

Les questions fréquemment posées sur les opinions de thème dans Drupal 8

Comment puis-je créer un plugin de style personnalisé dans Drupal 8?

La création d'un plugin de style personnalisé dans Drupal 8 implique plusieurs étapes. Tout d'abord, vous devez créer un nouveau module si vous n'en avez pas déjà un. Ensuite, dans le répertoire SRC / Plugin / Views / Style de votre module, créez un fichier PHP pour votre plugin de style personnalisé. Le fichier doit contenir une classe qui étend la classe StylePluginBase et comprend une annotation @ViewSstyle. L'annotation définit l'ID, le titre et le texte d'aide pour votre plugin. Après avoir défini les méthodes nécessaires dans votre classe, vous pouvez activer votre nouveau plugin de style via l'interface d'administration Drupal.

Quels sont les composants clés d'un plugin de style personnalisé?

Un plugin de style personnalisé dans Drupal 8 se compose généralement de trois composants clés: la définition du plugin, la classe du plugin et le fichier de modèle. La définition du plugin est fournie via l'annotation @ViewSstyle et comprend l'ID, le titre et le texte d'aide du plugin. La classe de plugin étend la classe StylePluginbase et définit les méthodes qui contrôlent le comportement du plugin. Le fichier de modèle est un fichier brindille qui contrôle comment la sortie du plugin est rendue.

Comment puis-je remplacer le modèle de vues par défaut dans Drupal 8?

Pour remplacer le modèle de vues par défaut dans Drupal 8, vous devez créer un nouveau fichier brindille dans le répertoire des modèles de votre thème. Le nom du fichier doit suivre les vues du modèle-View - [View-Name] - [affichage-id] .html.twig. Dans ce fichier, vous pouvez définir le balisage HTML et le code brina qui doit être utilisé pour rendre la vue. Après avoir créé le fichier, effacez le cache Drupal pour voir vos modifications.

Comment puis-je ajouter des variables à un modèle de vue dans Drupal 8?

Ajout de variables à un modèle de vue dans Drupal 8 peut être fait via une fonction de prétraitement dans le fichier .theme de votre thème. La fonction doit suivre le modèle thème_name_preprocess_views_view__view_name__display_id, et il devrait prendre un seul argument, qui est un tableau de variables. Vous pouvez ajouter de nouvelles variables à ce tableau, et elles seront disponibles dans votre modèle de brindille.

Comment puis-je utiliser un plugin de style personnalisé avec une vue dans Drupal 8?

Une fois que vous avez Créé un plugin de style personnalisé dans Drupal 8, vous pouvez l'utiliser avec une vue via l'interface d'administration Drupal. Modifiez la vue et accédez à la section du format. Cliquez sur le paramètre de format et sélectionnez votre plugin de style personnalisé dans la liste. Après avoir enregistré la vue, il sera rendu à l'aide de votre plugin de style personnalisé.

Quel est le but de la méthode Render () dans un plugin de style personnalisé?

La méthode Render () dans un Le plugin de style personnalisé dans Drupal 8 est responsable du rendu de la vue. Il prend un tableau de lignes en entrée et renvoie un tableau de rendu. Le tableau de rendu doit inclure la touche #Theme, qui spécifie le modèle de brindille à utiliser, et toutes les variables qui devraient être transmises au modèle.

Comment puis-je déboguer un modèle de vues dans Drupal 8?

Le débogage d'un modèle de vues dans Drupal 8 peut être effectué à l'aide de la fonction de débogage Twig. Activez le débogage des brindilles dans votre fichier Service.yml en définissant l'option de débogage sur true. Ensuite, lorsque vous affichez une page qui utilise le modèle, vous verrez des commentaires dans le code source HTML qui affiche les fichiers de modèle utilisés et suggérer des noms de fichiers de modèle que vous pouvez utiliser pour les remplacer.

Comment peut J'utilise la logique conditionnelle dans un modèle de vue dans Drupal 8?

La logique conditionnelle dans un modèle de vues dans Drupal 8 peut être implémentée à l'aide de l'instruction IF de Twig. Dans votre code Twig, vous pouvez utiliser le mot clé If pour tester une condition, puis inclure un balisage ou un code différents selon que la condition soit vraie ou fausse.

Comment puis-je personnaliser le téléavertisseur dans une vue dans Drupal 8?

La personnalisation du téléavertisseur dans une vue dans Drupal 8 peut être effectuée via l'interface d'administration Drupal. Modifiez la vue et accédez à la section Pager. Ici, vous pouvez choisir le type de téléavertisseur à utiliser, définir le nombre d'éléments à afficher par page et configurer d'autres paramètres de téléavertisseur.

Comment puis-je créer une vue réactive dans Drupal 8?

La création d'une vue réactive dans Drupal 8 implique l'utilisation de techniques de conception réactives dans votre modèle de vue. Cela pourrait inclure l'utilisation de requêtes de médias CSS pour ajuster la disposition et l'apparence de la vue à différentes tailles d'écran, et en utilisant des unités flexibles comme les pourcentages pour les largeurs et les hauteurs au lieu d'unités fixes comme les pixels.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!