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

Опубликовано: 2022-02-16

Мегаменю больше не является тенденцией дизайна, а является неотъемлемой частью большинства веб-сайтов, связанных с новостями или электронной коммерцией.

Модуль Menu Item Extras для Drupal 8 улучшает систему меню по умолчанию в Drupal, позволяя конструктору сайта добавлять поля к пунктам меню. Таким образом, можно создать мегаменю за пару простых шагов.

Следуйте инструкциям, чтобы узнать, как использовать этот модуль. Давайте начнем!

Шаг № 1: Установите необходимые модули

В дополнение к модулю Menu Item Extras вам потребуется установить Viewfield. Поле просмотра предоставляет поле, которое содержит ссылку на представление и отображает его всякий раз, когда отображается сущность, содержащая поле.

Откройте терминальное приложение вашего ПК.
Тип :
- для композитора требуется drupal/viewfield
- композитор требует drupal/menu_item_extras

200414 пункт меню доп. 001

Включите оба модуля после загрузки.

Щелкните Продлить.
Проверьте оба модуля.
Щелкните Установить.

200414 пункт меню экстра 003

Шаг № 2: Создайте систему таксономии

Возможно, слово «система» не очень подходит, так как мы создадим только один словарь с десятью связанными терминами. Однако этот пример объяснит основы, так что в будущем вы сможете работать с более сложными системами таксономии.

Щелкните Структура > Таксономия > Добавить словарь.
Введите название «Темы» и нажмите «Сохранить».
Нажмите «Добавить термин» и добавьте все термины, описанные ниже, один за другим.
- Темы
  - Д8
  - Симфони
  - ВП
  - Мадженто
  - CSS
  - HTML
  - JS
  - PHP
  - питон
  - DevOps

200414 пункт меню экстра 004

Шаг № 3: Создайте типы контента

Для целей этого урока мы будем использовать 2 типа контента со следующими полями:

Услуги
- Изображение сервиса / Изображение / Допустимое количество значений: 1
- Вступительный текст / Текст (отформатированный) / Допустимое количество значений: 1
- Описание / Поле по умолчанию

200414 пункт меню доп. 005

Блог
- Категория / Термин таксономии / Допустимое количество значений: неограниченно
- Описание / Поле по умолчанию

200414 пункт меню доп. 006

Убедитесь, что вы выбрали тип ссылки (темы) при создании поля таксономии.

200414 пункт меню экстра 007

Шаг № 4: Создайте контент

Мы собираемся создать 3 узла типа Service:

Учебники
Видео
Книги

Каждый из этих узлов будет связан с элементом второго уровня в мегаменю. С другой стороны, мы собираемся создать около 10 узлов типа «Блог» с разными терминами, связанными с ними. Убедитесь, что вы используете 2 термина (например, D8, WP) с большей частотой, чем другие.

200414 пункт меню экстра 008

Экран содержимого должен выглядеть в конце этого процесса примерно так, как показано на изображении ниже.

200414 пункт меню экстра 009

Шаг № 5: Создайте пункты меню

Первый уровень главного меню будет иметь следующие пункты меню:

Домой
О
Ресурсы
Контакт

Каждый из пунктов меню будет иметь дополнительное (лишнее) поле. Это поле будет установлено на втором уровне меню, то есть на каждом из пунктов карты в мегаменю. Это поле позволит нам представить каждый из блоков просмотра.

Щелкните Структура > Меню.
Щелкните меню «Правка», чтобы отредактировать основную навигацию.

200414 пункт меню доп. 010

Нажмите Добавить ссылку 3 раза, чтобы добавить отсутствующие пункты меню первого уровня.
Нажимайте «Сохранить» каждый раз, когда вы вводите имя пункта меню.

Используйте специальный тег для отображения только текста ссылки.

200414 пункт меню доп. 011

200414 пункт меню экстра 012

После того, как вы создали и переставили ссылки вашего меню,

Щелкните Управление полями > Добавить поле, чтобы добавить поле в пункты меню.
Выберите поле типа Viewfield.
Дайте ему правильное имя и ярлык.
Нажмите Сохранить и продолжить.

200414 пункт меню доп. 013

Установите для параметра Разрешенное количество значений значение Неограниченно.
Нажмите Сохранить настройки поля.

200414 пункт меню экстра 014

У вас будет возможность связать представление по умолчанию с этим конкретным полем. Оставьте эти поля пустыми.

Прокрутите вниз и нажмите Сохранить настройки
Щелкните Управление отображением.

200414 пункт меню доп. 015

Скрыть метку карты меню.
Щелкните Сохранить.

Шаг № 6: Создайте представления

Щелкните Структура > Представления > Добавить представление.
Показать содержимое типа «Услуги».
Создайте блок с неформатированным списком полей.
Выберите отображение 3 элементов в блоке.
Щелкните Сохранить и изменить.

200414 пункт меню доп. 016

Добавьте поле изображения службы
Установите стиль изображения на «Миниатюра» и свяжите изображение с содержимым.
Нажмите Применить

200414 пункт меню экстра 017

Добавьте также текстовое поле Intro.
Переупорядочить поля.
Щелкните Сохранить.

200414 пункт меню доп. 018

Щелкните Структура > Представления > Добавить представление.
Показать содержимое типа Блог.
Создайте блок с неформатированным списком полей.
Выберите отображение 1 элемента в блоке.
Щелкните Сохранить и изменить.

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

Добавьте поле Категория.
Нажмите Добавить и настройте поля.
Щелкните Параметры нескольких полей.
Выберите Ненумерованный список.
Установите количество отображаемых значений на 3.
Нажмите Применить.

200414 пункт меню доп. 020

Удалить критерий сортировки
Нажмите Применить.
Щелкните Сохранить, чтобы сохранить вид.

Шаг № 7: Добавьте блоки просмотра в пункты меню

Щелкните Структура > Меню.
Отредактируйте основную навигацию.
Отредактируйте пункт меню Ресурсы.
Добавьте 2 блока, которые вы создали на шаге №5.
Щелкните Сохранить.

200414 пункт меню экстра 021

Шаг № 8: Стили CSS

Я не буду подробно объяснять этот код, поскольку он выходит за рамки данного руководства. Тем не менее, вы можете узнать больше о Drupal Views и CSS Grid в этой статье. Если вы хотите больше попрактиковаться с мегаменю, ознакомьтесь с этой статьей.

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .field--name-field-menu-card .field__items {
 display: flex;
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 top: 166px;
 width: 100%;
 z-index: 10;
 }

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-item {
 display: grid;
 align-content: center;
 justify-content: center;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 width: 100%;
 padding-top: 16px;
 background-color: rgba(141,139,132, 0.9);
 }

 .view-tutorials .view-content {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 }

 .view-tutorials .views-row {
 display: grid;
 justify-items: center;
 }

 .view-tutorials .views-row span > a {
 font-size: 1.3rem
 }

 .view-tutorials .views-row .views-field-field-intro-text {
 font-size: 1rem;
 }

ОТКРЫТЬ В ПОПАПЕ

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .field--name-field-menu-card .field__items {
 display: flex;
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 top: 166px;
 width: 100%;
 z-index: 10;
 }

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-item {
 display: grid;
 align-content: center;
 justify-content: center;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 width: 100%;
 padding-top: 16px;
 background-color: rgba(141,139,132, 0.9);
 }

 .view-tutorials .view-content {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 }

 .view-tutorials .views-row {
 display: grid;
 justify-items: center;
 }

 .view-tutorials .views-row span > a {
 font-size: 1.3rem
 }

 .view-tutorials .views-row .views-field-field-intro-text {
 font-size: 1rem;
 }

200414 пункт меню экстра 022

Надеюсь, вам понравился этот урок. Спасибо за чтение!