Сниппет pdoMenu предназначен для генерации навигационного меню любой сложности из дерева ресурсов MODX. Он является современной заменой устаревшего Wayfinder и позволяет более гибко указывать параметры построения меню. Основное преимущество pdoMenu заключается в высокой скорости работы благодаря использованию библиотеки pdoTools и возможности строить меню сразу из нескольких разделов сайта.
Сниппет автоматически определяет активные пункты меню, поддерживает неограниченную вложенность уровней и предоставляет гибкую систему CSS-классов для стилизации. В отличие от Wayfinder, pdoMenu работает существенно быстрее и имеет более понятную систему шаблонов оформления.
Параметры pdoMenu
По умолчанию pdoMenu принимает общие параметры pdoTools и некоторые свои:
Основные параметры
| Параметр | Значение по умолчанию | Описание |
|---|---|---|
&parents |
ID текущей страницы | Список родительских контейнеров для построения меню через запятую |
&level |
0 |
Уровень вложенности меню (0 = все уровни) |
&resources |
— | Конкретные ID ресурсов для включения в меню |
&templates |
— | Фильтр по ID шаблонов — показывать только ресурсы с указанными шаблонами |
&where |
— | Дополнительные SQL условия в JSON формате |
&context |
текущий | Контексты для выборки ресурсов меню |
&showHidden |
0 |
Отображать ресурсы скрытые от меню |
&showUnpublished |
0 |
Включать неопубликованные страницы |
&showDeleted |
0 |
Показывать удаленные ресурсы |
&hideSubMenus |
0 |
Скрывать подменю неактивных разделов |
&useWeblinkUrl |
1 |
Использовать целевой URL для weblink ресурсов |
&sortby |
menuindex |
Поле для сортировки пунктов меню |
&sortdir |
ASC |
Направление сортировки (ASC/DESC) |
&limit |
0 |
Ограничение количества пунктов меню (0 = без ограничений) |
&offset |
0 |
Пропустить указанное количество ресурсов |
&rowIdPrefix |
— | Префикс для атрибута id строк меню |
&hereId |
ID текущей страницы | ID активного пункта меню |
&hereTpl |
— | Чанк для активного пункта меню |
&firstClass |
first |
CSS класс для первого пункта уровня |
&lastClass |
last |
CSS класс для последнего пункта уровня |
&rowClass |
— | CSS класс для каждого пункта меню |
&webLinkClass |
— | CSS класс для weblink пунктов |
&innerClass |
— | CSS класс для пунктов с подменю |
&parentClass |
— | CSS класс для родительского контейнера |
&hereClass |
active |
CSS класс для активного пункта |
&activeParentClass |
— | CSS класс для родителей активного пункта |
Параметры шаблонов
Эти параметры устанавливают чанки, которые содержат шаблоны для генерации меню.
| Параметр | Значение по умолчанию | Описание |
|---|---|---|
&tplOuter |
@INLINE <ul [[+classes]]>[[+wrapper]]</ul> |
Обертка для всего меню с плейсхолдером [[+wrapper]]. |
&tpl |
@INLINE <li [[+classes]]><a href="[[+link]]" [[+attributes]]>[[+menutitle]]</a>[[+wrapper]]</li> |
Чанк для оформления обычного пункта меню. |
&tplInner |
— | Обертка для подменю. Если пуст — будет использовать &tplOuter. |
&tplParentRow |
— | Чанк для родительского пункта с подменю, не подпадающего под условия &tplCategoryFolder. Например: @INLINE |
&tplParentRowHere |
— | Чанк для активного родительского пункта |
&tplHere |
— | Чанк для текущей активной страницы |
&tplStart |
@INLINE <h2 [[+classes]]>[[+menutitle]]</h2>[[+wrapper]] |
Чанк для корневого элемента меню, при условии, что включен &displayStart. |
&tplParentRowActive |
— | Чанк оформления родителей с потомками в активной ветке меню. |
&tplCategoryFolder |
— | Специальный чанк оформления категории. Категорией считается родитель с потомками, у которого указан пустой шаблон или rel="category" в поле link_attributes. |
&tplInner |
— | Чанк оформления всего блока подпунктов меню. Если пуст — будет использовать &tplOuter. Например: @INLINE <ul class="submenu [[+classnames]]">[[+wrapper]]</ul> |
&tplInnerRow |
— | Чанк оформления подпункта меню. Например: @INLINE |
&tplInnerHere |
— | Чанк оформления активного подпункта меню. |
Параметры CSS классов
Эти параметры задают значение плейсхолдеров [[+classnames]] и [[+classes]] для различных элементов меню. Плейсхолдер [[+classnames]] выводит только название класса без атрибута class=»», в отличие от плейсхолдера [[+classes]].
| Название | Значение по умолчанию | Описание |
|---|---|---|
&firstClass |
first |
Класс для первого пункта меню. |
&lastClass |
last |
Класс последнего пункта меню. |
&hereClass |
active |
Класс для активного пункта меню. |
&parentClass |
- |
Класс категории меню. |
&rowClass |
- |
Класс пункта меню. |
>&outerClass> |
- |
Класс обертки блока меню. |
&innerClass |
- |
Класс обертки блока подпунктов меню. |
&levelClass |
- |
Класс уровня меню. Например если укажите «level», то будет «level1», «level2» и т.д. |
&selfClass |
- |
Класс текущего ресурса в меню. |
&webLinkClass |
- |
Класс ресурса-ссылки. |
Примеры
Простейший вызов меню из корня сайта в один уровень:
[[pdoMenu? &parents=`0` &level=`1`]]
Вывод двухуровневого меню с исключением определенных разделов:
[[pdoMenu? &parents=`-10,-15` &level=`2` &checkPermissions=`load,list,view`]]
Меню только из конкретных ресурсов:
[[pdoMenu? &level=`1` &resources=`2,3,4,5` &parents=`0`]]
Вывод меню с подсчетом количества дочерних элементов:
[[pdoMenu?
&parents=`0`
&level=`2`
&tplInner=`@INLINE [[+wrapper]]`
&tplParentRow=`@INLINE <li[[+classes]]><a href="[[+link]]" [[+attributes]]>[[+menutitle]]</a> ([[+children]])</li>[[+wrapper]]`
&countChildren=`1`
]]Навигационное меню Bootstrap 4/5 с выпадающими подменю:
[[!pdoMenu?
&level=`2`
&parents=`0`
&firstClass=`0`
&lastClass=`0`
&rowClass=`nav-item`
&parentClass=`dropdown`
&outerClass=`navbar-nav ms-auto mb-2 mb-lg-0`
&tplOuter=`@INLINE <ul[[+classes]] itemprop="about" itemscope itemtype="http://schema.org/ItemList">[[+wrapper]]</ul>`
&tpl=`@INLINE <li itemprop="name"[[+classes]]><a class="nav-link" href="[[+link]]"[[+attributes]]>[[+menutitle]]</a>[[+wrapper]]</li>`
&tplInner=`@INLINE <ul class="dropdown-menu" aria-labelledby="navbarDropdown" itemprop="itemListElement" itemscope itemtype="http://schema.org/ItemList">[[+wrapper]]</ul>`
&tplInnerRow=`@INLINE <li><a itemprop="url" class="dropdown-item" href="[[+link]]"[[+attributes]]>[[+menutitle]]</a></li>[[+wrapper]]`
&tplParentRow=`@INLINE <li[[+classes]]><a itemprop="url" class="nav-link dropdown-toggle" href="[[+link]]" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"[[+attributes]]>[[+menutitle]]</a>[[+wrapper]]</li>`
]]Обратите внимание на использование Schema.org разметки для семантической разметки меню.
Хотя для хлебных крошек лучше использовать pdoCrumbs, pdoMenu тоже может строить навигационную цепочку:
[[pdoMenu?
&parents=`[[*parent]]`
&level=`1`
&displayStart=`1`
&tpl=`breadcrumbItem`
&tplOuter=`@INLINE <ol class="breadcrumb">[[+wrapper]]</ol>`
]]Вывод меню с иконками из TV-параметра:
[[pdoMenu?
&parents=`0`
&level=`1`
&includeTVs=`menu_icon`
&tvPrefix=``
&tpl=`@INLINE <li[[+classes]]><a href="[[+link]]"><i class="[[+menu_icon]]"></i> [[+menutitle]]</a>[[+wrapper]]</li>`
]]Не забудьте включить нужные TV через &includeTVs для использования их значений в шаблонах.
Замена Wayfinder на pdoMenu
Типичный вызов Wayfinder:
[[Wayfinder? &startId=`0` &level=`2` &rowTpl=`menuRow`]]
Эквивалентный вызов pdoMenu:
[[pdoMenu? &parents=`0` &level=`2` &tpl=`menuRow`]]
Основные отличия в параметрах:
&startIdв Wayfinder →&parentsв pdoMenu&rowTplв Wayfinder →&tplв pdoMenu&outerTplв Wayfinder →&tplOuterв pdoMenu&innerTplв Wayfinder →&tplInnerв pdoMenu
Оптимизация производительности
Для ускорения работы pdoMenu используйте следующие приемы:
Ограничьте количество уровней вложенности:
[[pdoMenu? &parents=`0` &level=`2`]]
Отключите ненужные классы:
[[pdoMenu? &parents=`0` &firstClass=`0` &lastClass=`0`]]
Используйте файловые чанки вместо базы данных:
[[pdoMenu? &parents=`0` &tpl=`@FILE chunks/menu/item.tpl`]]
Кешируйте вызов если меню статическое:
[[pdoMenu? &parents=`0` &level=`2`]]
