Comment créer des mises en page Drupal personnalisées pour Layout Builder par le code

Aujourd'hui, explorons comment créer des mises en page Drupal personnalisées pour Layout Builder par le code.

Layout Builder de Drupal offre un moyen puissant et intuitif de concevoir des mises en page de pages Web flexibles sans plonger profondément dans le code. Il permet aux éditeurs de contenu d'organiser le contenu dans des structures visuellement attrayantes à l'aide d'une interface glisser-déposer. Dans cet article de blog, nous explorerons ce qu'est Layout Builder, comment l'activer et démontrerons comment créer des modèles personnalisés pour un contrôle encore plus grand.

Qu'est-ce que Layout Builder ?

À la base, Layout Builder est un module Drupal qui vous permet de construire visuellement la mise en page des pages. Au lieu d'être confiné à la structure rigide d'un thème, vous gagnez la liberté de :

Définir des régions : désignez des sections dans votre page (par exemple, en-tête, pied de page, contenu principal, barre latérale).
Assembler des mises en page avec des blocs : placez et organisez différents blocs de contenu (texte, images, menus, etc.) dans ces régions à l'aide du glisser-déposer.
Créer des modèles personnalisés : créez des fichiers de modèles pour des mises en page spécifiques afin d'avoir un contrôle précis sur le HTML et le placement des régions.

Activation de Layout Builder pour un type de contenu

Supposons que vous souhaitiez utiliser Layout Builder sur le type de contenu « Article ». Voici comment l'activer :

Installer les modules : assurez-vous que le module Layout Builder principal est activé (généralement par défaut).
Gérer l'affichage : accédez à /admin/structure/types/manage/article/display (remplacez « article » par le nom machine de votre type de contenu).
Activer Layout Builder : dans la section « Options de mise en page », cochez la case « Utiliser Layout Builder ».
Enregistrer vos modifications : cliquez sur « Enregistrer ».

Vous pouvez également choisir d'autoriser les nœuds individuels (articles, dans ce contexte) à avoir leurs propres remplacements de mise en page uniques. Cela signifie que chaque article peut avoir une mise en page distincte différente de la mise en page par défaut que vous avez définie pour le type de contenu « Article ».

Comment créer des mises en page Drupal personnalisées

Bien que votre thème Drupal et certains modules puissent offrir des mises en page pré-construites, la création de modèles personnalisés offre un contrôle et une flexibilité encore plus grands. Voici pourquoi vous pourriez avoir besoin de mises en page personnalisées :

Conceptions de pages sur mesure : créez des mises en page qui correspondent parfaitement à votre contenu, au lieu d'être limité à des mises en page génériques de thème ou de module.
Édition facile : fournissez des mises en page prêtes à l'emploi qui correspondent au style de votre site Web, simplifiant ainsi la vie de vos éditeurs de contenu.
Apparence cohérente : assurez-vous que votre site Web est superbe sur chaque page, même lorsque vous utilisez des mises en page qui n'étaient pas incluses dans votre thème.

Pour créer des mises en page personnalisées, suivez ces étapes :

Fichier THEME.layouts.yml :
- Créez un fichier nommé THEME.layouts.yml dans le répertoire racine de votre thème (remplacez THEME par le nom réel de votre thème).
- Utilisons un exemple rapide pour une mise en page avec une barre latérale droite. Ajoutez le code suivant et n'oubliez pas de remplacer « EXAMPLE » par un préfixe approprié pour votre projet :

example_layout_right_sidebar:
  label: 'EXEMPLE : Contenu avec barre latérale droite'
  path: templates/layout/example/sidebar
  template: layout--right-sidebar
  category: 'Colonnes d'exemple : 2'
  default_region: first
  icon_map: 
    - [top] 
    - [first, first, second]  
    - [bottom, bottom, bottom] 
  regions: 
    top:
      label: Haut 
    first:
      label: Premier 
    second:
      label: Second 
    bottom:
      label: Bas

Explication du code :

example_layout_right_sidebar : Nom unique de la mise en page.
label : Le nom convivial de cette mise en page dans Layout Builder.
path : L'emplacement des fichiers de modèle de votre mise en page.
template : Le fichier de modèle principal qui définit la structure HTML de votre mise en page.
- Vous aurez besoin d'un fichier layout--right-sidebar.html.twig correspondant dans le chemin spécifié.
category : Aide à regrouper les mises en page dans l'interface Layout Builder.
default_region : Spécifie où les blocs de contenu seront initialement placés (dans ce cas, la région « first »).
icon_map :
- Cela montre un aperçu visuel de base dans Layout Builder :
  - Une ligne en haut ([top])
  - Ligne avec trois colonnes : deux colonnes « first » plus larges et une colonne « second » plus étroite.
  - Une ligne en bas ([bottom, bottom, bottom])
regions :
- Définit les zones nommées où vous pouvez placer du contenu :
  - top : Une région s'étendant sur le haut de la mise en page.
  - first : La région de contenu principale (probablement la colonne de gauche).
  - second : La région de la barre latérale (probablement la colonne de droite).
  - bottom : Une région s'étendant sur le bas de la mise en page.
- Vous utiliserez {{ content.top }}, {{ content.first }} et {{ content.second }} pour positionner votre contenu dans le modèle twig.

Fichiers de modèle :
- Dans le dossier que vous avez spécifié sous le chemin path dans votre fichier .layouts.yml (par exemple, templates/layout/example/sidebar), créez les fichiers de modèle Twig comme layout--right-sidebar.html.twig.
- Voici l'exemple de modèle :

{#
/**
 * @file
 * Implémentation de thème par défaut pour une mise en page média.
 *
 * Variables disponibles :
 * - content: Le contenu de cette mise en page.
 * - attributes: Attributs HTML pour la mise en page <div>.
 *
 * @ingroup themeable
 #}
{% if content %}
 <div{{ attributes.addClass('row example-sidebar-layout example-right-sidebar') }}>

  <div class="example-container">

   {% if content.top %}
    <div {{ region_attributes.top.addClass('region--top example-sidebar-layout-top') }}>
     {{ content.top }}
    </div>
   {% endif %}

   <div class="example-sidebar-layout-middle">

    <div{{ region_attributes.first.addClass('col-sm-9 example-sidebar-column-left') }}>
     {{ content.first }}
    </div>

    <div{{ region_attributes.second.addClass('col-sm-3 example-sidebar-column-right') }}>
     {{ content.second }}
    </div>

    </div>

   {% if content.bottom %}
    <div {{ region_attributes.bottom.addClass('region--bottom example-sidebar-layout-bottom') }}>
     {{ content.bottom }}
    </div>
   {% endif %}

  </div>

 </div>
{% endif %}

Vider les caches : Videz les caches de Drupal pour enregistrer vos nouveaux modèles.

Utilisation de vos modèles personnalisés

Lors de la modification d'un nœud « Article » (ou du type de contenu de votre choix), passez à l'onglet « Mise en page ».
Vos mises en page personnalisées devraient maintenant être disponibles pour la sélection.
Une fois que vous avez choisi une mise en page, vous pouvez commencer à ajouter des blocs de contenu dans ses régions désignées.

Pensées finales

Layout Builder et les modèles personnalisés vous offrent plus de flexibilité pour concevoir votre site Drupal comme vous le souhaitez. Cela peut demander un peu de pratique pour vous familiariser, mais la possibilité de créer des mises en page qui répondent parfaitement à vos besoins en vaut la peine. Expérimentez et voyez ce que vous pouvez créer. Bon débogage !