Создание меню в October CMS из админки

Создание меню в October CMS

Из коробки October CMS достаточно аскетична. Я считаю это большим плюсом, т.к. мы можем внедрять на сайт новые инструменты и плагины только тогда, когда они необходимы. Поэтому после установки платформы вы не найдете интерфейса по созданию меню, который сразу присутствует, например, в Wordpress. Но это не беда, т.к. в любой момент мы можем восплолнить недостающий функционал при помощи готового плагина (или написать свой, если вдруг есть такое желание).

В данном уроке мы рассмотрим реализацию меню с помощью плагина Menu Manager.

Установка Menu Manager

В панели управления сайтом откроем настройки и выберем пункт Обновления во вкладке Система.

Затем нажмем кнопку Установить плагины и в строке поиска впишем название плагина - Menu Manager.

Установка плагина Menu Manager

После установки, в шапке появится соответствующий раздел:

Пункт в шапке

Работа с плагином

В демо-шаблоне October (который доступен сразу после установки движка) присутствует меню в шапке сайта. Оно выводится с помощью partial и подобный вариант вполне доспустим для простого сайта, где редко будет что-то меняться.

Демо-меню

Демо-меню на сайте

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

Создаем меню

Перейдем в раздел Menus и нажмем на кнопку «New Menu».

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

Я назову меню «Главное меню» и задам небольшое описание. Остальные настройки трогать не нужно.

Демо-меню

Теперь создадим пункты меню: для этого снова нажмем кнопку «New Menu» и перейдем к настройке ссылки.

Так как мы воссоздаем демо-меню, то первый пункт будет называться «Basic concepts». И поскольку это ссылка на внутренную страницу сайта, то Menu Type оставим как есть: Internal.

Второй вариант данной настройки - External - позволяет указать внешнюю ссылку или же вручную задать ссылку на внутренную страницу сайта.

Данная ссылка должна вести на главную, поэтому в File to link To выберем файл home.

File to link To

Остальные параметры оставим без изменений. Если вкратце, то:

  • Enable/disable this link - включает и отключает ссылку;
  • Open link in - определяет, как открыть ссылку: в новой вкладке или в текущей;
  • Extra URL parameters и Extra non-OctoberCMS query string parameters - позволяют добавлять к url-адресу различные параметры.

По аналогии создадим остальные ссылки и вернемся в раздел «Menus».

Список меню

Вы можете видеть, что и пункты меню и контейнер для них находятся в одном списке. Для того чтобы поместить пункты меню в нужную «категорию», необходимо нажать на кнопку Menu Manager Order (или перейти в раздел «Reorder Menus»).

Здесь мы можем распределить пункты меню по категориям, а так же создать нужную вложенность. Распределение пунктов меню

После этого в списке будет порядок: Порядок в списке меню

Вывод меню

Теперь займемся выводом меню на сайте. Для этого перейдем в раздел CMS и найдем фрагмент верстки, в котором должно выводиться меню. В демо-теме October меню находится во фрагменте «header.htm».

Откроем фрагмент и перейдем в Компоненты. Там будет находиться компонент Menu Manager, который нужно выбрать и перетащить в верстку рядом с блоком навигации.

Добавить компонент

В верстке должен появиться вызов компонента:

  {% component 'menu' %}

Теперь пройдемся по настройкам:

Настройка компонента

  • Parent node - родительская «категория»
  • Active node - активный пункт (если default, то определяет активный пункт автоматически)
  • List Item Classes - класс для элемента меню (тег <li>)
  • Primary Classes - класс для меню (тег ul)
  • Secondary Classes - класс для меню второго уровня
  • Tertiary Classes - класс для меню третьего уровня
  • Depth - уровни вложенности (доступно 3 уровня вложенности)

В данном примере верстка меню совпадает с той, которая формируется плагином (кроме того, что первый <li> в меню - это декоративный разделитель), поэтому как-то изощряться с выводом плагина не придется.

Кстати, если вы хотите гайд о том, как вывести нестандартное меню с помощью этого плагина, пишите об этом в комментариях.

После настройки плагина можно удалить старое меню (оно было нужно в качестве образца). Оставим только вызов компонента:

Окончательная верстка

Результат

Меню успешно вывелось и редактировать ссылки в нем теперь можно не залезая в код.

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