Как создавать пользовательские макеты Drupal для конструктора макетов с помощью кода

Сегодня давайте рассмотрим, как создавать пользовательские макеты Drupal для конструктора макетов с помощью кода.

Конструктор макетов Drupal предоставляет мощный и интуитивно понятный способ проектирования гибких макетов веб-страниц без глубокого погружения в код. Он позволяет редакторам контента располагать контент в визуально привлекательных структурах с помощью интерфейса перетаскивания. В этой статье мы рассмотрим, что такое Конструктор макетов, как его включить и продемонстрируем, как создавать пользовательские шаблоны для еще большего контроля.

Что такое Конструктор макетов?

По своей сути, Конструктор макетов — это модуль Drupal, который позволяет визуально конструировать макет страниц. Вместо того чтобы быть ограниченным жесткой структурой темы, вы получаете свободу:

• Определять регионы: Назначать разделы на вашей странице (например, заголовок, нижний колонтитул, основной контент, боковая панель).
• Собирать макеты с блоками: Размещать и упорядочивать различные блоки контента (текст, изображения, меню и т. д.) в этих регионах с помощью перетаскивания.
• Создавать пользовательские шаблоны: Создавать файлы шаблонов для конкретных макетов, чтобы иметь точный контроль над HTML и размещением регионов.

Включение Конструктора макетов для типа контента

Предположим, вы хотите использовать Конструктор макетов для типа контента «Статья». Вот как его включить:

1. Установка модулей: Убедитесь, что у вас включен основной модуль Конструктора макетов (обычно по умолчанию).
2. Управление отображением: Перейдите по адресу / admin / structure / types / manage / article / display (замените «article» на машинное имя вашего типа контента).
3. Включение Конструктора макетов: В разделе «Параметры макета» установите флажок «Использовать Конструктор макетов».
4. Сохранение изменений: Нажмите «Сохранить».

Вы также можете разрешить отдельным узлам (в данном случае статьям) иметь свои уникальные переопределения макета. Это означает, что каждая статья может иметь свой собственный макет, отличный от макета по умолчанию, который вы установили для типа контента «Статья».

Как создавать пользовательские макеты Drupal

Хотя ваша тема Drupal и некоторые модули могут предлагать некоторые готовые макеты, создание пользовательских шаблонов обеспечивает еще больший контроль и гибкость. Вот почему вам могут понадобиться пользовательские макеты:

• Индивидуальный дизайн страниц: Создавайте макеты, которые идеально подходят вашему контенту, вместо того чтобы ограничиваться общими макетами темы или модуля.
• Простота редактирования: Предоставляйте готовые к использованию макеты, соответствующие стилю вашего веб-сайта, что упрощает жизнь вашим редакторам контента.
• Единый внешний вид: Убедитесь, что ваш веб-сайт выглядит отлично на каждой странице, даже при использовании макетов, которые не были включены в вашу тему.

Чтобы создать пользовательские макеты, выполните следующие действия:

1. Файл THEME.layouts.yml:
   • Создайте файл с именем THEME.layouts.yml в корневом каталоге вашей темы (замените THEME на фактическое имя вашей темы).
   • Давайте используем быстрый пример для макета с правой боковой панелью. Добавьте следующий код и не забудьте заменить «EXAMPLE» подходящим префиксом для вашего проекта:

example_layout_right_sidebar:
  label: 'EXAMPLE: Контент с правой боковой панелью'
  path: templates/layout/example/sidebar
  template: layout--right-sidebar
  category: 'Примерные колонки: 2'
  default_region: first
  icon_map: 
    - [top] 
    - [first, first, second]  
    - [bottom, bottom, bottom] 
  regions: 
    top:
      label: Верхний 
    first:
      label: Первый 
    second:
      label: Второй 
    bottom:
      label: Нижний 

Объяснение кода:

• example_layout_right_sidebar: Уникальное имя макета.
• label: Дружелюбное для пользователя имя этого макета в Конструкторе макетов.
• path: Где расположены файлы шаблонов вашего макета.
• template: Основной файл шаблона, определяющий HTML-структуру вашего макета.
  • Вам понадобится соответствующий файл layout--right-sidebar.html.twig в указанном пути.
• category: Помогает группировать макеты в интерфейсе Конструктора макетов.
• default_region: Указывает, где блоки контента будут первоначально размещены (в данном случае, в регионе «first»).
• icon_map:
  • Это показывает базовый визуальный предварительный просмотр в Конструкторе макетов:
    • Одна строка вверху ([top])
    • Строка с тремя колонками: две более широкие колонки «first» и более узкая колонка «second».
    • Одна строка внизу ([bottom, bottom, bottom])
• regions:
  • Определяет именованные области, куда вы можете помещать контент:
    • top: Регион, охватывающий верхнюю часть макета.
    • first: Основной регион контента (вероятно, левая колонка).
    • second: Регион боковой панели (вероятно, правая колонка).
    • bottom: Регион, охватывающий нижнюю часть макета.
  • Вы будете использовать {{ content.top }}, {{ content.first }}, и {{ content.second }} для размещения вашего контента в шаблоне twig.

2. Файлы шаблонов:
   • В папке, которую вы указали в поле path в вашем файле .layouts.yml (например, templates / layout / example / sidebar), создайте файлы шаблонов Twig, такие как layout--right-sidebar.html.twig.
   • Вот пример шаблона:

{#
/**
 * @file
 * Стандартная тема для макета медиа.
 *
 * Доступные переменные:
 * - content: Контент для этого макета.
 * - attributes: HTML-атрибуты для макета <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 %}

2. Очистка кэша: Очистите кэш Drupal, чтобы зарегистрировать ваши новые шаблоны.

Использование ваших пользовательских шаблонов

1. При редактировании узла «Статья» (или выбранного вами типа контента) переключитесь на вкладку «Макет».
2. Ваши пользовательские макеты теперь должны быть доступны для выбора.
3. После выбора макета вы можете начать добавлять блоки контента в его назначенные регионы.

Заключительные мысли

Конструктор макетов и пользовательские шаблоны дают вам больше гибкости для проектирования вашего сайта Drupal так, как вы хотите. Возможно, потребуется немного практики, чтобы привыкнуть, но возможность создавать макеты, которые идеально соответствуют вашим потребностям, того стоит. Поиграйте и посмотрите, что вы можете создать. Удачного отладки!