Переход с MODX на October CMS. Часть 4-я: Меню

Меню в October CMS работает по принципу, схожему с созданием меню в WordPress.
Т.е. вместо вывода всего дерева или директории как в MODX мы сами настраиваем пункты и при необходимости выводим дочерние элементы.

Первым наперво создаем меню: Pages - Menus - Add. В поле Code пишем название меню: main-menu.
Добавляем необходимые пункты меню и сохраняем.

Далее создаем паршл (чанк) под названием menu-items



<ul class="{{ class }}">
    {% for item in items %}
        

<li class="{{ item.isActive or item.isChildActive ? 'active' : '' }} {{ item.items ? 'dropdown' : '' }}" >
            <a {% if item.items %}class="dropdown-toggle" data-toggle="dropdown"{% endif %} href="{{ item.url }}" class="{{ item.viewBag.cssClass }}" >
                {{ item.title }}

                {% if item.items %}<span class="caret"></span>{% endif %}
            </a>

            {% if item.items %}
                {% partial 'menu-items' items=item.items class='dropdown-menu' %}
            {% endif %}
        </li>


    {% endfor %}
</ul>


Добавляем вызов компонента Static Menu в нужном лейауте (layout). Либо его перетаскиванием на layout в админке, либо прописываем вызов в коде этого лейаута.
Не забываем указать название меню, которое мы создали ранее: main-menu.

[staticPage]
useContent = 1
default = 0

[staticMenu]
code = "main-menu"
==

Ниже в лейауте добавляем строку, которая и рендерит наше меню:

{% partial 'menu-items' items=staticMenu.menuItems class='nav navbar-nav' %}

menu-items, как мы помним, – это название нашего паршла с кодом меню. Он вызывается рекурсивно, так что при смене путей или названия нужно поменять их в нем самом, а также в лейауте. Далее в параметре items мы передаем ему пункты меню из компонента, который по-умолчанию имеет название staticMenu, а также имя класса в class для ненумерованного списка <ul>, который используется для вывода меню в HTML-коде.

При необходимости можно создать несколько разных меню на странице. Для этого нужно всего лишь дать им разные имена и поправить параметры вызова паршла.
В качестве пунктов меню можно выбрать обычные страницы (Pages), статические (плагин Static Pages), а также все статические. Либо указать URL напрямую.

Хлебные крошки

Хлебные крошки (breadcrumbs) добавляются еще легче и не имеют никаких параметров, кроме alias. Также перетаскиваем наш компонент в нужное место лейаута или паршла.

{% component 'staticBreadcrumbs' %}

Если нужно кастомизировать внешний вид крошек, то устанавливаем текстовый курсор на слово component и в правом верхнем углу редактора в админке October нажимаем значок ветки.

Итог

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

Данный функционал не уступает MODX. Однако следует отметить: слабым местом плагина Static Pages является то, что все файлы страниц размещаются на диске. При количестве страниц от нескольких сотен по тестам заметно некоторое снижение производительности, несмотря на наличие кэширования.

Поэтому под большие объемы данных рекомендуется создать свои плагины October под конкретные задачи. Именно это сильное место October. А за счет плагина Builder, скаффолдинг приложений становится доступен практически для всех. Его использование мы рассмотрим в следующих уроках.

Комментарии читателей

  1. Ростислав 03.06.2018
    • zooks 07.06.2018

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