Досконалі макети (layouts) в Drupal 8 — блог Drudesk
050 640 98 44
support@drudesk.com

Макети (Layouts) у Drupal 8

Як ви знаєте, добре впорядкований веб-сайт — це ключ до успіху. Ми вже розповідали вам про деякі корисні модулі для полегшення безперебійної роботи сайту, для гарантування безпеки і т. п. Коли справа доходить до макетів, модуль «Panels» може бути дуже корисним. Тоді виникає питання: «Що таке модуль «Panels» і чому він чудовий?» Без слів зрозуміло, що краще один раз побачити, ніж сто разів почути. Отже, давайте спробуємо, як це працює в Drupal 8.

Коротко про модуль Panels

Модуль панелей «Panels» дозволяє адміністратору сайту створювати індивідуальний набір інструментів для численних користувачів. Це дає змогу створювати більш вдосконалені відображення контенту. Інтеграція з іншими системами дозволяє створювати Ноди, які використовують цільові сторінки і навіть перекривають системні сторінки, таких як таксономію і ноду, так що ми можемо налаштувати панель інструментів нашого сайту.

В панелі можна створювати контексти, які представляють собою відображення об'єктів. Для користувацького контексту можна відображати такі речі, як картинка користувача або профілю. Крім того, інформація цих контекстів може бути перевірена і використовувати не тільки доступний для відображення контент, але і вибрати панель інструментів для відображення. Ви також можете вибрати атрибути типу «Ноди», незалежно від того, чи має користувач доступ до редагування нод і багато іншого.

Панелі також можуть бути використані для елементів сторінок поменше. Що робити, якщо у вас нормальні бічні панелі і є дві частини змісту, залишається багато простору, тому що вони занадто вузькі, а ваш проект виглядає значно краще, якщо вони пліч-о-пліч? Це складно робити в Друпал, тому що ви в кінцевому підсумку створите власний блок з призначеним для користувача кодом для показу цих двох одиниць конвенту. З панеллю ми можемо просто створити «міні-панель» з двома колонками. Додайте один блок зліва, інший - справа і готово. Ці міні-панелі буду доступні у вашій системі, як звичайний блок або як панелі даних, щоб зайти в інші панелі.

Встановлення модулів

В першу чергу нам треба визначитися з переліком модулів для використання макетів на сайті на Drupal 8. До переліку таких модулів належать:

Скачуємо відповідні модулі у папку з модулями та переходимо на сторінку «Extends» нашого сайту. Побачимо, що на сторінці модулів з’явились наш скачані нами модулі:

скачані модулі

Для початку увімкнемо модулі «Layout Plugin», «Page Manager», «Page Manager UI» та «Panels» та застосуємо зміни.

Тепер ми можемо працювати з панелями.

Створення сторінки для відображення панелі

До прикладу, нам потрібно створити сторінку, що буде відображати певну панель. Давайте створимо нову сторінку з панелями. Для цього перейдемо по пункт меню «Structure» → «Pages» і отримаємо таку сторінку:

отримаємо таку сторінку

Тепер додамо сторінку натиснувши на кнопку «Add page». Після цього перейдемо на наступний крок:

перейдемо на наступний крок

В «Administrative title» вписуємо назву сторінки, в «Path» — шлях до цієї сторінки, у «Variant type» вибираємо Panels і переходимо до наступного кроку натиснувши кнопку «Next».

Створення Panel

Наступним кроком буде налаштування варіанта конфігурації:

налаштування варіанта конфігурації

Тут можна змінити «Label», та вибрати тип «Builder». Натискаємо «Next». Наступним кроком потрібно вибрати тип «Макети»(Layout):

вибрати тип “Layout”

Тут виберемо потрібний тип «Макети« (Layout) та натиснемо «Next». Тепер ми перейшли на останній крок налаштувань:

останній крок налаштувань

Тут можна додати «Page title» для даної сторінки та додати нові блоки для відображення. Під кнопкою «Add new block» розміщена таблиця з макетами. Оскільки на попередньому кроці було вибрано тип «Layout» — «Two column», тому в таблиці відображається лише «Left side» і «Right side», при інших вибраних варіантах варіація таблиць буде відрізнятися. Давайте спробуємо додати блок з стандартних блоків Drupal. Натиснувши кнопку «Add new block» відкриється вікно:

Натиснувши кнопку “Add new block” відкриється вікно

Натиснемо, наприклад, на посилання «Search form». Відкриється наступне вікно:

Відкриється наступне вікно

Тут ми можемо в полі «Title» можна ввести назву блока, який ми додамо до сторінки панелі, чекбокс «Display title» відповідає за відображення назви блока. Та можемо вибрати регіон, де буде відображатися блок. Виберемо «Right side» та натиснемо «Add block». Тепер у нас з’явився блок у регіоні «Right side», що ми і бачимо:

з’явився блок у регіоні “Right side”

Тепер натиснемо «Finish» зберігши сторінку. 

Редагування створеної панелі

Далі ми перейдемо на сторінку редагування відповідної «Page»:

ерейдемо на сторінку редагування відповідної “Page”

Пункт «General» відповідає за налаштування конфігурації, у вкладці «Context» можна додати новий контекст. В наступному вікні показано форму додавання нового контексту для відповідного сутності або «entity».

форма додавання нового контексту

Наступний пункт «Selection criteria» відповідає за критерії вибору для сторінки. Якщо вибрати умову та натиснути клавішу «Add condition» нам відкриється вікно додавання умови.

вікно додавання умови

Виберемо до прикладу «User Role» та натиснемо «Add condition». Отримаємо вікно налаштування:

Отримаємо вікно налаштування

Виберемо ролі, для яких це буде працювати. Та натиснемо «Save». Тепер у нас з`явився новий критерій вибору:

з`явився новий критерій вибору.

Якщо нам потрібно якось видозмінити розташування блоку на сторінці, можемо скористатися пунктом «Макети» (Layouts). Відповідно, за контент відповідає пункт «Content». Після всіх виконаних змін можемо зберегти натиснувши кнопку «Update and save».

Додавання варіантів

Розглянемо також можливість додавати варіанти для відображення даної сторінки. Щоб додати варіанти необхідно натиснути на «Add variant»:

натиснути на “Add variant”

Нам відкриється форма створення нового варіанту відображення:

форма створення нового варіанту відображення

Додаємо нову панель для цієї сторінки та проходимо ті ж кроки щодо створення панелі, як і в пункті «Cтворення Panel». Проходимо до кінця, зберігаємо і бачимо, що з’явилось налаштування нової панелі.

з’явилось налаштування нової панелі

Виберемо «Selection criteria» для панелі «Test» та додамо критерії по «User role» і додаємо можливість переглядати це для ролі інакшої ніж ми вибирали тоді, коли налаштовували основу сторінку «Panel».

Виберемо “Selection criteria” для панелі “Test”

Тепер після збереження налаштувань ми отримали відображення різних панелей для різних типів юзерів.

Впорядкування варіантів

Впорядкування варіантів має важливе значення. Наприклад, якщо на сторінці є кілька панелей, і у першої з них немає критеріїв вибору, тоді вона завжди буде відображатися, а до інших панелей справа не дійде. Тому для цього існує можливість впорядкування варіантів відображення. Потрібно натиснути на посилання «Reorder variants»

натиснути на посилання “Reorder variants”

Після цього у нас відкриється вікно для впорядкування варіантів:

відкриється вікно для впорядкування варіантів

Тут ми можемо вказати потрібний нам порядок варіантів відображення панелей та натиснути кнопку «Update».

Плюси використання «Panels»

  1. Вивід поля контенту в іншому регіоні, або вставка блоку між полями. В панелях прямо з коробки доступні панелі з усіма окремими полями контенту. 
  2. Швидкодія.
  3. Вивід одного блоку одночасно до двох регіонів. Панелі дозволяють будь-який вміст вставляти в макет сторінки скільки завгодно раз. До слова, зовсім не обов'язково виводити блок на сторінку двічі, завдання може стояти так, щоб вивести блок на одних сторінках в одному регіоні, а на інших в іншому. Блокова система не дозволяє цього зробити, а панелі — запросто.
  4. Різні шаблони для різних словників таксономії. Якщо вам потрібно виводити блок на сторінках термінів одного словника, а на сторінках іншого не потрібно, то крім панелей, це нічим не вирішити.
  5. Робота з фасетами. По-перше, при використанні панелей не потрібно створювати блок для фасетів. По-друге, в інтерфейсі фасети йдуть окремою категорією, не змішуючись з іншими блоками.
  6. Можливість використання при наявності сайту великої кількості різних шаблонів зі складною структурою колонок. По-перше, панелі дозволяють використовувати гнучкі макети або легко створювати свої. По-друге, ми можемо виводити один блок в різних макетах в різні регіони, що не дозволяє робити блокова система. По-третє, при використанні CSS-фреймворків з сітками, ми можемо легко задавати панелям потрібні класи і id, щоб вибудувати їх по сітці.
  7. Можна виводити на сторінку щось кастомне. Панелі використовують «Ctools API», який дозволяє легко виводити, що завгодно і як завгодно при досить простому коді. 

Отже, ми використали «Page Manager» і «Panels», які відмінно підходять для створення користувацьких сторінок. За рахунок цього функціоналу варто встановлювати і використовувати дані модулі. Вони досить потужні і легкі у налаштуванні. Якщо ви хочете, щоб це завдання було виконано якісно та в короткі терміни, зв'яжіться з нами. Ми завжди раді допомогти.