Створення шаблонів сторінок в Drupal 8 за допомогою Layout Builder

09.01.2019
Створення шаблонів сторінок в Drupal 8 за допомогою Layout Builder
Автор:

Усім подобаються привабливі шаблони веб-сторінок. На щастя, Drupal пропонує безліч чудових інструментів для їх створення. У зв’язку з цим часто звучать такі назви, як Panels, Panelizer, Paragraphs, Display Suite, Page Manager, Twig і так далі. Наша Drupal-команда любить обирати найкращі інструменти з арсеналу, при потребі поєднувати їх між собою, щоб досягати ідеальних результатів для замовника. Але сьогодні подивимось на новий чудовий інструмент — Layout Builder, який з’явився в Drupal 8.5. Ми розглянемо створення шаблонів сторінок в Drupal 8 за його допомогою.

Layout Builder в Drupal 8: давайте знайомитись

Модуль Layout Builder уже порівнюють з Panelizer, Panels та Display Suite за його здібностями. І це правильно, адже, згідно з Layout Initiative, йому судилося стати інструментом номер один в ядрі Drupal для створення шаблонів сторінок. Модуль поки що експериментальний, але має досягти стабільності в версії Drupal 8.7 навесні 2019 року.

Layout Builder дозволяє створювати шаблони для будь-яких типів сутностей з полями (контент-типів, користувачів і так далі), або ж індивідуальних сутностей. Можна обирати з готових шаблонів на різну кількість колонок, і додавати до них блоки.

Інтерфейс модуля простий та інтуїтивно зрозумілий, а також має опцію пересування блоків мишкою. Розробники, у свою чергу, оцінять, що всі шаблони Layout Builder визначаються в модулі або темі та мають Twig-темлейти.

Створення шаблонів в Drupal 8 з Layout Builder

Давайте розглянемо Layout Builder в дії. Ми подивимось, як він працює, на прикладі створення шаблонів для статей. Почнемо з увімкнення модуля Layout Builder.

Створення шаблону для контент-типу

Ми йдемо в налаштування контент-типу “Article” в “Structure” і обираємо “Manage Display”. Замість традиційних полів ми там бачимо кнопку “Manage Layout”. Потрібно переконатись, щоб в “Layout Options” опція “Use Layout Builder” була увімкнена.

Отже, кнопка “Manage Layout” приводить нас на сторінку з налаштуваннями шаблону контент-типу “Article”.

Клікнувши “Add Section”, ми можемо обрати готові шаблони з різною кількістю колонок.

Клікнувши “Add Block”, ми можемо додавати стандартні Drupal-блоки або поля контент-типу (наприклад, “Authored by”, “Body”, “Image” і так далі) зі списку справа, або створювати кастомні блоки. Усі блоки можна перетягувати мишкою по всьому шаблону.

Кожен блок або поле можна налаштувати або видалити через опції “Configure” та “Remove” поруч із ним. Налаштування також доступні, якщо клікнути по блоку у списку. Наприклад, ми щойно додали кастомний стиль картинок (image style) до зображень.

Отже, таким буде наш простий шаблон із двох колонок, в якому картинка і автор розташовані зліва, а текст — справа.

Коли все готово, клікаємо “Save Layout”. Тепер усі статті будуть створювати саме за цим шаблоном.

Створення шаблону для окремої ноди

У багатьох випадках вам не потрібен однаковий шаблон для всіх одиниць контент-типу. Layout Builder дозволяє робити окремі ноди (наприклад, статті) доступними до індивідуального налаштування шаблону. Це можна забезпечити, клікнувши відповідну опцію у вкладці “Manage Display”.

Layout Builder пропонує зручну кнопку “Layout” поруч з кожною нодою, яка веде до сторінки налаштування її шаблону. Процедура для окремої ноди така сама, як для контент-типу.

Створення різних шаблонів в одному контент-типі

А тепер давайте трохи ускладнимо задачу, адже випадки бувають абсолютно різними. А що, якщо один контент-тип використовується для декількох різних типів контенту?

Наприклад, так було в одного з наших клієнтів. Він бажав, щоб для кожного з цих реальних типів контенту генерувався окремий шаблон для головної сторінки та для сторінки з контентом. Для перемикання між фактичними типами контенту в рамках одного контент-типу використовувався селект-список, який базувався на полі “list”. Залежно від значення цього поля, конкретні типи контенту відфільтровувались і відображались у «в’юшці» для головної сторінки та сторінки з контентом. 

Layout Builder в таких випадках може бути дуже корисним. Коли «в’юшка» відображає контент, у ній можна встановити конкретний “view mode” (режим відображення). І чудово, що Layout Builder може створювати окремі шаблони для кожного з них в межах одного контент-типу. “View modes” можна реєструвати у вкладці “Manage Display” конкретного контент-типу, і для кожного з них потрібно увімкнути опцію “Use Layout Builder”, а також кожен із них матиме кнопку “Manage Layout”.

Однак, на момент роботи з цим клієнтом модуль Layout Builder був на стадії розробки “alpha”, тож ми успішно застовували інше рішення, в яке був залучений модуль Display Suite і Twig-темплейти. Кожен випадок індивідуальний, і потребує особливого підходу.

Давайте створимо ідеальні шаблони для ваших сторінок!

Ось таким був наш невеличкий огляд створення шаблонів сторінок в Drupal 8 за допомогою Layout Builder. Нехай і на вашому сайті будуть гарні та правильно організовані шаблони, які виглядають і працюють з точністю так, як вам потрібно. Просто зв’яжіться з нашою Drupal-командою, і ми оберемо оптимальні інструменти зі «скарбнички» Друпала, а при потребі застосуємо кастомізацію.

Голосів: 1 Рейтинг: 5

Також по темі

1

Що перше привертає вашу увагу, коли ви відвідуєте інтернет-магазин? Без сумніву, це дизайн сайту та його зовнішній вигляд. Виникає питання, які найкращі теми для електронної торгівлі? Не...

2

Нещодавно були оголошені дати майбутнього релізу Drupal 9 і припинення підтримки Drupal 8 та 7. Давайте детальніше дізнаємося, що це все означає для власників сайтів на Drupal 8 і 7 та які дії від...

4

Контент-редакторам та власникам сайтів просто перехопить подих від захвату, коли вони дізнаються про новий редактор Ґутенберг в Drupal 8! У восьмій версії Друпала і так уже є чудові можливості з...

5

Вітаємо усіх з релізом Drupal 8.6.0! Нова мінорна версія Друпала обіцяє бути особливо привабливою для користувачів, власників сайтів, адміністраторів і розробників. Шість місяців тому, коли вийшов...

Subscribe to our blog updates