Как создать собственный конструктор макетов в Drupal 8

Опубликовано: 2019-10-15

Drupal 8 значительно упрощает работу авторов контента. Одной из наиболее важных причин является добавление модуля Layout Builder в ядро ​​Drupal 8. Благодаря удобному интерфейсу перетаскивания, предварительному просмотру и настройке, конструктор макетов вскоре становится любимым инструментом для создания и проектирования страниц.

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

Если вашему веб-сайту drupal требуется несколько разделов с несколькими блоками, вы не можете использовать разделы по умолчанию, предоставляемые Drupal. Для этого вы можете создать свой собственный макет.

Начало работы с Layout Builder:

Сначала мы создадим модуль построения настраиваемого макета для нашего конструктора настраиваемого макета. Назовем папку custom_layout. Далее мы создадим файл info.yml. Мы должны указать для него основные ключи. Конструктор пользовательских макетов в drupal 8 будет зависеть от модуля компоновщика макетов. Уточним это здесь.

нестандартный макет
 Код:
имя: 'Пользовательский макет'
тип: модуль
description: 'Обеспечивает способ построения макета'
ядро: 8.x
пакет: 'Custom'
зависимости:
 - layout_builder: layout_builder

Затем мы создадим файл layouts.yml, чтобы указать регионы для нашего настраиваемого макета.

  • custom_layout: ключ для нашего настраиваемого макета компоновщика.
  • label: Метка для нашего настраиваемого макета компоновщика.
  • category: Категория для нашего пользовательского макета компоновщика.
  • default_region: Регион по умолчанию - это регионы, которые используются по умолчанию во всех типах макета.
  • icon_map: Значок, который будет отображаться, пока мы выбираем наш макет.

Например:

нестандартный макет

Чтобы создать карту значков выше, нам нужно выполнить следующие шаги.

1. Первая строка - «Верхний колонтитул слева» и «Верхний колонтитул справа».
Мы указали - [ header_left, header_left, header_right ] - header_left равно
определяется 2 раза, поэтому он займет 2 части от общей ширины экрана, затем header_right займет оставшуюся часть, поэтому соотношение будет «75% / 25%».
2. Вторая строка - «Содержание» и «Боковая панель».
Мы указали - [ content, content, sidebar ] та же логика, что и здесь.
3. Третья строка - «Нижний колонтитул слева» и «Нижний колонтитул справа».
Мы указали - [ footer_left, footer_right] - поскольку есть только 2 региона, это займет по 50% каждая.

  • регионы: регионы, которые нам нужны для нашего макета. У нас есть header_left, header_right, sidebar, content, footer_left, footer_right.
конструктор нестандартных макетов

Код:

 custom_layout:
 label: "Пользовательский макет"
 категория: "Пользовательские макеты"
 default_region: содержание
 icon_map:
   - [header_left, header_left, header_right]
   - [содержание, содержание, боковая панель]
   - [содержание, содержание, боковая панель]
   - [содержание, содержание, боковая панель]
   - [footer_left, footer_right]

 регионы:
   header_left:
     label: Заголовок слева
   header_right:
     label: Заголовок справа
   боковая панель:
     label: Боковая панель
   содержание:
     label: Content
   footer_left:
     label: Нижний колонтитул слева
   footer_right:
     label: Нижний колонтитул справа

Затем давайте создадим структуру html для нашего макета. Мы создадим в нашем модуле папку с именем «макеты». В этой папке мы создадим еще одну папку с именем custom_layout.

И в этой папке мы создадим файл ветки с именем «custom-layout.html.twig».

конструктор нестандартных макетов


Мы должны указать файл ветки в layouts.yml.

  • путь: указывает, в какую папку будет записана ваша html-структура.
  • template: он указывает, какой шаблон веточки использовать для этого макета по пути.

нестандартный макет
 Код:

custom_layout:
 label: "Пользовательский макет"
 путь: макеты / custom_layout
 категория: "Пользовательские макеты"
 шаблон: custom-layout
 default_region: содержание
 icon_map:
   - [header_left, header_left, header_right]
   - [содержание, содержание, боковая панель]
   - [содержание, содержание, боковая панель]
   - [содержание, содержание, боковая панель]
   - [footer_left, footer_right]

 регионы:
   header_left:
     label: Заголовок слева
   header_right:
     label: Заголовок справа
   боковая панель:
     label: Боковая панель
   содержание:
     label: Content
   footer_left:
     label: Нижний колонтитул слева
   footer_right:
     label: Нижний колонтитул справа

Далее мы напишем структуру html для наших регионов в файле custom-layout.html.twig.
Мы установим для классов «layout» и «layout - custom-layout» и обернем в него все содержимое.
Мы укажем регионы, которые были определены в layouts.yml, и мы сможем получить доступ к этим регионам, например «{{content.header_left}}»

конструктор макетов

Код:

{% set classes = [
'макет',
'layout - custom-layout',
]%}
{% if content%}
<div {{attributes.addClass (классы)}}>
{% if content.header_left%}
<div {{region_attributes.header_left.addClass ('layout__region', 'layout__region - header_left')}}>
{{content.header_left}}
</div>
{% endif%}
{% if content.header_right%}
<div {{region_attributes.header_right.addClass ('layout__region', 'layout__region - header_right')}}>
{{content.header_right}}
</div>
{% endif%}
{% if content.content%}
<div {{region_attributes.content.addClass ('layout__region', 'layout__region - content')}}>
{{content.content}}
</div>
{% endif%}
{% if content.sidebar%}
<div {{region_attributes.sidebar.addClass ('layout__region', 'layout__region - sidebar')}}>
{{content.sidebar}}
</div>
{% endif%}
{% if content.footer_left%}
<div {{region_attributes.footer_left.addClass ('layout__region', 'layout__region - footer_left')}}>
{{content.footer_left}}
</div>
{% endif%}
{% if content.footer_right%}
<div {{region_attributes.footer_right.addClass ('layout__region', 'layout__region - footer_right')}}>
{{content.footer_right}}
</div>
{% endif%}
</div>
{% endif%}

После того, как структура html будет написана, нам нужно будет написать css для каждого региона. Теперь мы создадим library.yml в нашем настраиваемом модуле.

верстальщик

Код:

 custom_layout:
версия: ВЕРСИЯ
css:
   тема:
     css / custom_layout.css: {}

Мы определим эту библиотеку в layouts.yml.

верстальщик

Код:

 custom_layout:
 label: "Пользовательский макет"
 путь: макеты / custom_layout
 категория: "Пользовательские макеты"
 шаблон: custom-layout
 библиотека: custom_layout / custom_layout
 default_region: содержание
 icon_map:
   - [header_left, header_left, header_right]
   - [содержание, содержание, боковая панель]
   - [содержание, содержание, боковая панель]
   - [содержание, содержание, боковая панель]
   - [footer_left, footer_right]

 регионы:
   header_left:
     label: Заголовок слева
   header_right:
     label: Заголовок справа
   боковая панель:
     label: Боковая панель
   содержание:
     label: Content
   footer_left:
     label: Нижний колонтитул слева
   footer_right:
     label: Нижний колонтитул справа

Теперь давайте начнем со стилизации нашего блока регионов. Мы укажем структуру для каждого региона, как показано ниже:

верстальщик

Код:

 .layout - custom-layout {
 дисплей: -webkit-box;
 дисплей: -ms-flexbox;
 дисплей: гибкий;
 -ms-flex-wrap: обертка;
 flex-wrap: обертка;
}

@media screen и (min-width: 40em) {
 .layout - настраиваемый макет .layout__region - header_left {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 70%;
   гибкость: 0 1 70%;
 }

 .layout - настраиваемый макет .layout__region - header_right {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 30%;
   гибкость: 0 1 30%;
 }

 .layout - custom-layout .layout__region - content {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 70%;
   гибкость: 0 1 70%;
 }

 .layout - custom-layout .layout__region - sidebar {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 30%;
   гибкость: 0 1 30%;
 }

 .layout - настраиваемый макет .layout__region - footer_left {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 50%;
   гибкость: 0 1 50%;
 }

 .layout - custom-layout .layout__region - footer_right {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 50%;
   гибкость: 0 1 50%;
 }
}

Затем давайте включим наш настраиваемый модуль

модуль-компоновщик

Давайте перейдем в « Структура» -> «Типы контента» и нажмем « Управление отображением » для любого типа контента. Сейчас мы будем использовать тип контента « статья ».

Редактировать макет-строитель

После того, как мы выберем наш индивидуальный макет -

нестандартный макет