Совершенные макеты (layouts) в Drupal 8 — блог Drudesk
050 640 98 44
support@drudesk.com

Макеты (Layouts) в Drupal 8

Как вам известно, содержащийся в хорошем состоянии веб-сайт — это ключ к успеху. Мы уже рассказывали вам о некоторых полезных модулях, которые способствуют плавной работы сайта, обеспечивают безопасность и т. п. . Когда дело доходит до макетов, модуль «Panels» может быть очень полезным. Тогда возникает вопрос: «Что такое модуль «Panels» и почему он отличный?» Без слов понятно, что лучше один раз увидеть, чем сто раз услышать. Итак, давайте попробуем, как это работает в Drupal 8.

Кратко о модуле Panels

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

В панели можно создавать контексты, которые представляют собой отображение объектов. Для пользовательского контекста можно отображать такие вещи, как картинка пользователя или профиль. Кроме того, информация этих контекстов может быть проверена и использовать не только доступен для отображения контент, но и выбрать панель инструментов для отображения. Вы также можете выбрать атрибуты типа «Ноды», независимо от того, имеет ли пользователь доступ к редактированию нод и многое другое.

Панели также могут быть использованы для элементов страниц поменьше. Что делать, если у вас нормальные боковые панели и есть две части содержания, остается много пространства, потому что они слишком узкие, а ваш проект выглядит значительно лучше, если они бок о бок? Это сложно делать в Друпал, потому что в конечном итоге вы создадите собственный блок с пользовательским кодом для показа этих двух единиц контента. С панелью мы можем просто создать «мини-панель» с двумя колонками. Добавьте один блок слева, другой — справа и готово. Эти мини-панели будут доступны в вашей системе, как обычный блок или как панели данных, чтобы зайти в другие панели.

Установка модулей

В первую очередь нам надо определиться с перечнем модулей для использования макетов на сайте на Drupal 8. В перечень таких модулей относятся:

  • Panels (ссылка) — для создания панелей.
  • Page manager (ссылка) — для создания страниц.
  • Chaos tools (ссылка) — требуют модули Page manager, Panels.
  • Layout Plugin (ссылка) — требует модуль Panels.

Скачиваем соответствующие модули в папку с модулями и переходим на страницу «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»

Нам откроется форма создания нового варианта отображения:

форма создания нового варианта отображения

Добавляем новую панель для этой страницы и проходим те же шаги по созданию панели, как и в пункте «Добавление 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», которые отлично подходят для создания пользовательских страниц. За счет этого функционала следует устанавливать и использовать данные модули. Они достаточно мощные и легкие в настройке. Если вы хотите, чтобы эта задача была выполнена качественно и в короткие строки, свяжитесь с нами. Мы всегда рады помочь.

Похожие материалы