Générateur de mise en page dans Drupl 09/08/10

Aperçu

Le générateur de mise en page permet aux utilisateurs de modifier la façon dont leur contenu est présenté. La création de mises en page implique l’utilisation du module Layout Builder. Le module Layout Builder vous permet de créer des mises en page personnalisées pour les types de contenu et les entités, vous donnant ainsi plus de contrôle sur l’affichage de votre contenu. Une fois configurée, la mise en page peut affecter un type de contenu globalement, ou l’utilisateur peut modifier la mise en page par nœud.

Créer un module personnalisé

1. Créez un dossier dans modules/custom/ttn_layout_builder.
2. Créez un ttn_layout_builder.info.yml fichier et ajoutez-y ce qui suit.

name: TTN Layout Builder
type: module
description: Create custom layout builder in drupal 8/9/10.
package: TTN
Dependencies:
    - drupal:layout_builder
core_version_requirement: ^8 || ^9 || ^10

Mises en page personnalisées

Créer un ttn_layout_builder.layouts.yml fichier dans votre thème ou module. Ajoutez des informations pour votre mise en page. L’ajout d’un nom de machine, d’une étiquette, d’une catégorie, d’une référence de modèle et d’une région est obligatoire dans ce format.

Vous pouvez ajouter des régions que vous créez dans le ttn_layout_builder.layouts.yml fichier sous forme de variables brindilles.

layout_one_full_forth_grid:
  label: 'One Full Four Grid'
  path: layouts/one_full_forth_grid
  template: layout--one-full-forth-grid
  library: ttn_layout_builder/one_full_forth_grid
  category: 'TTN'
  default_region: first
  icon_map:
    - [first, second, third]
    - [first, fourth, fifth]
  regions:
    first:
      label: First
    second:
      label: Second
    third:
      label: Third
    fourth:
      label: Fourth
    fifth:
      label: Fifth

Créez un répertoire de modèles dans lequel vous disposerez de modèles pour votre fichier de mise en page. Exemple Voir : layouts/one_full_forth_grid/layout–one-full-forth-grid.html.twig

Dans le fichier modèle, vous pouvez ajouter des régions que vous créez dans le ttn_layout_builder.layouts.yml fichier sous forme de variables brindilles.

{%
  set classes = [
    'layout',
    'layout--onefullfourgrid',
  ]
%}
{% if content %}
  <div{{ attributes.addClass(classes) }}>
    {% if content.first %}
      <div{{ region_attributes.first.addClass('layout__region', 'layout__region--first') }}>
        {{ content.first }}
      </div>
    {% endif %}
    {% if content.second or content.third or content.fourth or content.fifth %}
      <div class="layout__four-grid-group">
    {% endif %}
       {% if content.second %}
          <div{{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
            {{ content.second }}
          </div>
       {% endif %}
       {% if content.third %}
          <div{{ region_attributes.third.addClass('layout__region', 'layout__region--third') }}>
            {{ content.third }}
          </div>
       {% endif %}
       {% if content.fourth %}
          <div{{ region_attributes.fourth.addClass('layout__region', 'layout__region--fourth') }}>
            {{ content.fourth }}
          </div>
       {% endif %}
       {% if content.fifth %}
          <div{{ region_attributes.fifth.addClass('layout__region', 'layout__region--fifth') }}>
            {{ content.fifth }}
          </div>
       {% endif %}
    {% if content.second or content.third or content.fourth or content.fifth %}
      </div>
    {% endif %}
  </div>
{% endif %}

Ajouter un fichier ttn_layout_builder.libraries.yml, qui contient le style/js des mises en page.

one_full_forth_grid:
  css:
    theme:
      layouts/one_full_forth_grid/one_full_forth_grid.css: {}

L’extrait de code produit la carte d’icônes suivante, puis toute section utilisant notre mise en page sera affichée comme ceci :

Disposition personnalisée dans le contrôleur

Créer un ttn_layout_builder.routing.yml fichier et ajoutez-y ce qui suit

ttn_layout_builer:layoutbuilder:
  path: '/ttn-layout-builder
  defaults:
    controller: '\Drupal\ttn_layout_builder\Controller\LayoutBuilderController::one_full_forth_grid'
    _title: 'Layout Builder'
  requirements:
    _permission: 'access content'

Créer un LayoutBuilderController.php fichier dans le dossier Src et ajoutez-y ce qui suit

public function one_full_forth_grid() {
  $header = ['Column 1', 'Column 2'];
  $rows = [
    ['Row1', 'Column1'],['Row1', 'Column2'],
    ['Row2', 'Column1'],['Row2', 'Column2']
  ];
  $attributes = [
    '#id' => 'layout-data-table',
    'class' => ['custom-layout', 'layout-data'],
    'data-custom' => 'my custom data value'
  ];
  $data =  [
    '#theme' => 'table',
    '#header' => $header,
    '#rows' => $rows,
    '#attributes' => $attributes,
  ];

  $layoutPluginManager = \Drupal::service('plugin.manager.core.layout');
  $layout = $layoutPluginManager->createInstance('layout_one_full_forth_grid');
  $regions = [
    'first' => [
      '#markup' => drupal_render($data),
    ],
    'second' => [
      '#markup' => drupal_render($data),
    ],
    'third' => [
      '#markup' => drupal_render($data),
    ],
    'fourth' => [
      '#markup' => drupal_render($data),
    ],
    'fifth' => [
      '#markup' => drupal_render($data),
    ],
  ];
  return $layout->build($regions);
}

Conclusion

Le Layout Builder de Drupal est un outil de conception visuelle qui permet aux créateurs de contenu et aux administrateurs de sites de contrôler la mise en page d’une page sans avoir besoin de connaissances approfondies en matière de codage ou de thématisation. Il fournit une interface conviviale pour créer et personnaliser des mises en page.

VOUS TROUVEZ CECI UTILE ? PARTAGEZ-LE