Composants d'annuaire unique dans Drupal core : Une vue d'ensemble

Qu'est-ce que les composants à répertoire unique ?

Les composants à répertoire unique dans Drupal sont un moyen d'encapsuler tous les fichiers nécessaires à un composant dans un seul répertoire. Cela comprend les modèles, les styles, les fichiers JS et les fichiers de configuration du composant. En organisant les composants de cette manière, les développeurs peuvent les gérer, les réutiliser et les maintenir plus efficacement.

Avantages des composants de répertoire individuels

Modularité et réutilisabilité

• Les CDS favorisent une architecture modulaire où les composants peuvent être facilement réutilisés dans différentes parties du site, réduisant ainsi la redondance et la maintenance.

Maintenabilité améliorée

• Tous les fichiers liés aux composants étant regroupés dans un seul répertoire, ils sont plus faciles à trouver et à mettre à jour, ce qui améliore la maintenabilité.

Flux de développement rationalisé

• Les CDS simplifient le flux de développement en réduisant l'éparpillement des fichiers dans différents répertoires. Cette organisation correspond bien aux pratiques modernes de développement frontal.

Consistance

• En encapsulant les styles, les scripts et les modèles ensemble, les développeurs peuvent assurer une mise en œuvre cohérente des composants sur l'ensemble du site.

Implémentation des composants à répertoire unique dans Drupal

Chaque composant a besoin d'un répertoire unique pour ses actifs. Ce répertoire doit se trouver dans un sous-répertoire composants/ du répertoire de votre thème ou module (afin que Drupal puisse le trouver). Un fichier {NAME}.component.yml contenant des métadonnées sur le composant. La création d'un schéma dans votre {NAME}.component.yml est obligatoire pour les modules, mais facultative pour les thèmes. Cependant, elle est fortement recommandée.

Choisissez un nom pour votre composant. Nous utiliserons button pour notre exemple. Il doit être unique au sein du thème. Les composants sont nommés, donc plusieurs thèmes différents peuvent déclarer un composant button.

button.component.yml

$schema : https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
name : Appel à l'action
description : Bouton d'appel à l'action
props :
  type : objet
  required :
    - text
  propriétés :
    text :
      type : string
      title : Bouton de texte
    modifiers :
      type : array
      items :
        type : string
      title : Class names

Nous devons ensuite définir la structure HTML de votre composant dans le fichier de template Twig.

button.twig

  {{ texte }}

Appliquons quelques feuilles de style CSS à ce bouton pour lui donner une apparence plus attrayante. Tout ce que vous avez à faire est de créer un fichier CSS dans le répertoire du composant en y incluant le nom de votre composant.

button.css

.btn {
  background-color : #007bff ;
  color : white ;
  padding : 10px 20px ;
  bordure : aucune ;
  border-radius : 4px ;
  curseur : pointer ;
  &.primary {
    background-color : #0056b3 ;
  }
  &.secondary {
    background-color : #6c757d ;
  }
}

Nous avons la structure de fichier suivante pour le nouveau composant button dans notre thème :

Image

Pour utiliser un composant, nous aurons besoin de connaître l'ID du composant. Il s'agit du nom de machine du module ou du thème qui fournit le composant, plus le nom du composant lui-même, séparés par deux points. Exemples:

{module}:{composant} 
some_custom_module:button : où some_custom_module est le nom du module, et button est le nom du composant
olivero:teaser : où olivero est le nom du thème, et teaser est le nom du composant

Dans notre cas, nous allons utiliser le composant directement dans le template Twig et utiliser le mot-clé {% include %}. Modifiez le fichier node.html.twig et ajoutez simplement le code suivant en bas:

 {% include 'theme_name:button' with { text : 'Click Me', modifiers : ['primary'] } only %}

Cela inclura notre composant bouton sur la page du nœud. Voici le résultat.

Image

En savoir plus sur les autres nouveautés de Drupal 11 ici.

Conclusion

L'introduction des composants à répertoire unique dans Drupal Core marque une étape importante vers la modernisation du flux de développement frontal dans Drupal. En regroupant tous les fichiers liés aux composants dans un seul répertoire, les développeurs peuvent améliorer la modularité, la maintenabilité et la cohérence. L'utilisation des SDC permet non seulement de rationaliser le processus de développement, mais aussi d'aligner Drupal sur les pratiques modernes de développement web, ce qui en fait un CMS plus puissant et plus convivial.

A mesure que Drupal continue d'évoluer, des fonctionnalités telles que les SDC joueront sans aucun doute un rôle crucial dans l'amélioration de l'expérience des développeurs et de la qualité globale des sites web Drupal. Notre agence Drupal est là pour vous aider à plonger, à explorer les Single Directory Components et à commencer à construire des sites Drupal plus modulaires et plus faciles à maintenir dès aujourd'hui !