Многоуровневое MODX меню с использованием Bootstrap. PdoMenu — создание меню в MODX Как настроить вертикальное меню в modx evo

Сниппет генерации меню. Может заменять Wayfinder, и позволяет более гибко указывать параметры.

Например, умеет строить меню сразу из нескольких родителей, отображая их как вместе, так и отдельными ветками.

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

Параметры

По умолчанию pdoMenu принимает общие параметры pdoTools и некоторые свои:

Название	По умолчанию	Описание
&parents	Текущий ресурс	Список родителей для поиска результатов, через запятую. Если поставить &parents=`0` - выборка не ограничивается. Если id родителя начинается с дефиса, он и его потомки исключаются из выборки.
&level	0 (не ограниченно)	Уровень генерируемого меню.
&resources		Список ресурсов для вывода в результатах, через запятую. Если id ресурса начинается с дефиса, этот ресурс исключается из выборки.
&templates		Список шаблонов для фильтрации результатов, через запятую. Если id шаблона начинается с дефиса, ресурсы с ним исключается из выборки.
&where		Массив дополнительных параметров выборки, закодированный в JSON.
&displayStart	0	Включить показ начальных узлов меню. Полезно при указании более одного «parents».
&context		Ограничение выборки по контексту ресурсов.
&showHidden	0	Показывать ресурсы, скрытые в меню.
&showUnpublished	0	Показывать неопубликованные ресурсы.
&previewUnpublished	0	Включить показ неопубликованных ресурсов, если у пользователя есть на это разрешение.
&hideSubMenus	0	Спрятать неактивные ветки меню.
&select		Список полей для выборки, через запятую. Можно указывать JSON-строку с массивом, например &select=`{"modResource":"id,pagetitle,content"}`
&sortby	menuindex	Любое поле ресурса для сортировки, включая ТВ-параметр, если он указан в параметре &includeTVs , например &sortby=`{"tvname":"ASC","pagetitle":"DESC"}` . Можно указывать JSON-строку с массивом нескольких полей. Для случайной сортировки укажите &sortby=`RAND()`
&sortdir	ASC	Направление сортировки: по убыванию или по возрастанию. Если оставить параметры &sortby и &sortdir пустыми, то сортировка будет идти по порядку ресурсов в &resources .
&limit	0	Ограничение количества результатов выборки.
&offset	0	Пропуск результатов от начала. Необходимо использовать вместе с явно указанным &limit
&checkPermissions		Укажите, какие разрешения нужно проверять у пользователя при выводе ресурсов, например &checkPermissions=`list` .
&countChildren	0	Точный подсчет количества дочерних ресурсов каждой категории и вывод их в плейсхолдер [[+children]] . Делает дополнительные запросы в БД, поэтому по умолчанию отключен.
&toPlaceholder		Если не пусто, сниппет сохранит все данные в плейсхолдер с этим именем вместо вывода на экран.
&plPrefix	wf.	Префикс для выставляемых плейсхолдеров.
&showLog	0	Показывать дополнительную информацию о работе сниппета. Только для авторизованных в контекcте «mgr».
&fastMode	0	Быстрый режим обработки чанков. Все необработанные теги (условия, сниппеты и т.п.) будут вырезаны.
&cache	0	Кэширование результатов работы сниппета.
&cacheTime	3600	Время актуальности кэша, в секундах.
&scheme	-1	Схема формирования url, передаётся в modX::makeUrl(), поэтому возможные варианты нужно . Особый тип uri подставляет значение uri ресурса, без запуска функции.
&useWeblinkUrl	1	Генерировать ссылку с учетом класса ресурса.
&rowIdPrefix		Префикс id="" для выставления идентификатора в чанк.
&hereId		id текущего ресурса для генерируемого меню. Нужно указывать только если скрипт сам его неверно определяет, например при выводе меню из чанка другого сниппета.
&includeTVs		Список ТВ-параметров для выборки, через запятую. Например &includeTVs=`action,time` дадут плейсхолдеры [[+action]] и [[+time]] .
&prepareTVs		Список ТВ-параметров, с файлами из источников медиа, для которых нужно сгенерировать полные пути. Если установить &prepareTVs=`1` , будут подготовлены все ТВ, указанные в &includeTVs .
&processTVs		Список ТВ-параметров, которые нужно обработать и вывести согласно их настроек в менеджере системы. Если установить &processTVs=`1` , будут обработаны все ТВ, указанные в &includeTVs . Замедляет работу.
&tvPrefix		Префикс для ТВ-параметров.

Параметры шаблонов

Эти параметры устанавливают чанки, которые содержат шаблоны для генерации меню.

Название	Описание
&tplOuter	Чанк оформления всего блока меню. По умолчанию: @INLINE [[+wrapper]]
&tpl	Чанк оформления пункта меню. Если не указан, то содержимое полей ресурса будет распечатано на экран. По умолчанию: @INLINE [[+menutitle]][[+wrapper]]
&tplHere	Чанк оформления текущего пункта меню.
&tplStart	Чанк оформления корневого пункта, при условии, что включен &displayStart . По умолчанию: @INLINE [[+menutitle]] [[+wrapper]]
&tplParentRow	Чанк оформления родителя с потомками, не подпадающего под условия &tplCategoryFolder . Например: @INLINE [[+menutitle]][[+wrapper]]
&tplParentRowHere	Чанк оформления текущего документа, если он содержит потомков.
&tplParentRowActive	Чанк оформления родителей с потомками в активной ветке меню.
&tplCategoryFolder	Специальный чанк оформления категории. Категорией считается родитель с потомками, у которого указан пустой шаблон или rel="category" в поле link_attributes .
&tplInner	Чанк оформления всего блока подпунктов меню. Если пуст - будет использовать &tplOuter . Например: @INLINE [[+wrapper]]
&tplInnerRow	Чанк оформления подпункта меню. Например: @INLINE [[+menutitle]][[+wrapper]]
&tplInnerHere	Чанк оформления активного подпункта меню.

Параметры CSS классов

Эти параметры задают значение плейсхолдеров [[+classnames]] и [[+classes]] для различных элементов меню. Плейсхолдер [[+classnames]] выводит только название класса без атрибута class="" , в отличие от плейсхолдера [[+classes]] .

Примеры

Обычный вывод меню из корня сайта в один уровень:

[]

Вывод с исключением определенных родителей и проверкой разрешений пользователя:

[]

Вывод меню сразу из двух родителей, с показом корневых точек:

[]

Вывод двух уровней ресурсов с подсчетом количества вложенных:

[]` &tplParentRow=`@INLINE

[[+menutitle]] ([[+children]])

[[+wrapper]]` &countChildren=`1` ]]

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

Создавать динамическое меню в MODX мы будем при помощи сниппета PdoMenu из пакета pdoTools . Перед тем как начать ознакомьтесь с основной документацией.

Документация по pdoMenu

Параметры

Параметры шаблонов

Параметры CSS классов

Официальные примеры

официальную документацию можете почитать здесь . А сейчас разберем самые типовые вызовы меню.

Вызов PdoMenu

Вариант 1 . На месте этого статического меню вызовем сниппет pdoMenu , для этого в дереве ресурсов, на вкладке “Элементы ” в разделе сниппеты разверните ветку pdoTools , далее нажмите на pdoMenu левой кнопкой мыши (не отпускайте кнопку) и перетащите этот сниппет в место, где вы хотите вызвать меню, далее в открывшемся окошке заполните необходимые параметры и нажмите «Сохранить «.

Вариант 2 . Просто вручную пишем вызов.

Типовые примеры

Обычное одноуровневое меню

К примеру у нас самое обычное меню, со следующей html разметкой.

Получился вот такой код с вызовом меню:

&parents=`0` — список родителей (в моем случае я не ограничиваю выборку, так как я все равно выведу только определенные страницы);
&level=`1` — уровень вложенности (в данном случае ее нет);
&resources=`2,3,4,5` — список ресурсов которые нужно вывести в меню;
&firstClass=`0` — класс для первого пункта меню (не какого);
&lastClass=`0` — класс последнего пункта меню (не какого);
&outerClass=`top-menu` — класс обертки меню (подставляется в ul);
&hereClass=`current-menu-item` — класс для активного пункта меню (подставляется в li);
&rowClass=`menu-item` — класс одной строки меню (подставляется в li).

Двухуровневое кастомное bootstrap меню

Статический html код выглядит так:

Код его вывода будет таким:

Так же в следующем уроке я приведу еще пару выводов выпадающих меню, на основе bootstrap ( и , это для тех кто не уловил суть. Ну а далее сделаем .

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

Wayfinder служит для организации списков ссылок для MODX. Благодаря поддержке шаблонов позволяет выводить списки в любом необходимом виде:

Меню в виде списка, таблицы, изображений, с иконками и т.д.
Статичные меню
Меню с различными эффектами (выпадающие, раскрывающиеся и т.д.)
Карта сайта

Пример вызова:

&rowTpl=`rowTpl`
&outerTpl=`outerTpl`
&hereClass=`active`
&rowClass=`eNav_li`]]

Параметры снипета:

&startId - id родительской страницы, если указать 0 будет от корня сайта. По умолчанию стоит значение id активной страницы

&displayStart - показывать документ со startId в заголовке меню, по умолчанию false

&level - глубина вложенности, по умолчанию 0 - все уровни

&limit - ограничение количества страниц в выводе (по умолчанию 0 - без ограничений)

&ignoreHidden - игнорировать чек бокс страницы "Показывать в меню", т.е. если указать 1, выведет все страницы. По умолчанию 0. Выводятся только те страницы, у которых отмечен чек бокс "Показывать в меню"

&ph - имя подстановщика, заменяющего непосредственно выводимые результаты. По умолчанию 0.

&debug - режим отладки (по умолчанию 0)

&hideSubMenus - раскрывать только активное подменю (по умолчанию 0)

&removeNewLines - убирает символ переноса строки при выводе (по умолчанию 0)

&textOfLinks - для названия ссылки меню. Возможные варианты: menutitle, id, pagetitle, description, parent, alias, longtitle, introtext . По умолчанию menutitle

&titleOfLinks - для title ссылки меню.Варианты: menutitle, id, pagetitle, description, parent, alias, longtitle, introtext. По умолчанию pagetitle

&rowIdPrefix - устанавливает id (rowIdPrefix + docId)для каждого элемента. По умолчанию 0

&includeDocs - id документов через запятую, которые будут включены в меню (по умолчанию не указывается)

&excludeDocs - id документов через запятую, которые будут исключены из меню (по умолчанию 0)

&contexts - контекст для генерации меню. По умолчанию текущий.

&startIdContext - Индентификатор контекста из которого берутся документы для формирования результата.

&config - Внешний PHP файл, для хранения конфигурации Wayfinder (пример: core/components/wayfinder/configs).

&scheme - Формат для генерации URL. Возможные значения (основанны на вызове makeURL API):

1: (значение по умолчанию) URL по отношению к site_url;

0: смотрите http;

1: смотрите https;

full: абсолютный URL начинающийся с site_url;

abs: абсолютный URL начинающийся с base_url;

http: абсолютный URL, заданный принуждённо в http-схеме;

https: абсолютный URL, заданный принуждённо в https-схеме.

&sortBy - Поле, по которому происходит сортировка. (по умолчанию menuindex)

Варианты:

id, menutitle, pagetitle, introtext, menuindex, published, hidemenu, parent, isfolder, description, alias, longtitle, type, template

&sortOrder - Порядок сортировки. "ASC" или "DESC". По умолчанию ASC

&where - JSON-стиль параметров фильтрации (Соответствует where в MySQL) . Например, когда необходимо скрыть блог или новости из дополнения Articles: &where=`[{"class_key:!=": "Article"}]`
Примеры:
вывод только папок: & where = `isfolder = 1

&hereId - Определять текущий ID для использования в сниппете. Используйте значение [[*id]] если шаблон указан с помощью параметра hereTpl и activeRowParentTpl не применяеться корректно в пункте меню. По умолчанию текущий ид.
Нужно указывать только если скрипт сам его неверно определяет, например, при выводе меню из чанка другого сниппета.

&hereTpl - Шаблон hereTpl используется в момент, когда текущий пункт отображается в меню.
Возможные плэйсхолдеры:
[[+wf.classes]] - место для указания используемого CSS-класса (включает class=" ")
[[+wf.classnames]] - содержит только название CSS-класса (не включает class=" ")
[[+wf.link]] - адрес (href) для ссылки
[[+wf.title]] - текст для title ссылки
[[+wf.linktext]] - текст названия ссылки
[[+wf.wrapper]] - место для вывода подменю
[[+wf.id]] - вывод уникального идентификатора (id)
[[+wf.attributes]] - вывод дополнительных атрибутов ссылки
[[+wf.docid]] - идентификатор документа для текущего элемента
[[+wf.subitemcount]] -количество элементов в папке
[[+wf.description]] - выводит значения поля описания
[[+wf.introtext]] - выводит значения поля интротекста

Пример шаблона: [[+wf.linktext]][[+wf.wrapper]]

Параметры шаблона

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

В текущей версии Wayfinder для MODX Revolution, вы можете получить доступ к вашим кастомным TV используя плейсхолдеры префикса wf. , например [[+my_TV]]

На момент написания статьи, будут возвращены только исходные значения TV - они не будут форматироваться. Например, если вашим TV является изображение - обычное использование такое TV внутри вашего шаблона будет возвращать полный полный тег изображения, но внутри шаблона Wayfinder - будет возвращён только путь к изображению.

Если вы хотите обрабатывать TV, вы можете сделать это вызовом сниппета в пределах шаблона ряда Wayfinder (&rowTpl . Например ваш TV изображения называется icon и обычно для вывода в шаблоне используется примерно такой код:

... ...

Но так как это не позволит вам обрабатывать TV, нужно заменить его на:

... ...

И теперь внутри сниппета processTV помещаем следующий PHP код:

getObject("modResource", $myId); return $doc->getTVValue($myTV);

В результате возвращается полностью обработаное TV изображения.

&outerTpl

Название чанка содержащий шаблон внешнего контейнера.

Доступные плейсхолдеры:

wf.classes - выводит классы взятый с набора параметров Wayfinder (включая атрибут class="")
wf.classnames - вывод названия классов (без class="")
wf.wrapper - вывод внутреннего содержимого (row).

[[+wf.wrapper]]

Параметр &innerTpl содержит такой же набор плейсхолдеров что и &outerTpl .

&rowTpl

Название чанка содержащий шаблон для элементов ряда меню.

Доступные плейсхолдеры:

wf.classes - вывод классов (включая атрибут class="")
wf.classnames - вывод соответствующих классов (без class="")
wf.link - значение атрибута href="" для ссылки меню
wf.title - имя текста заголовка для ссылки от поля указанного в параметре &titleOfLinks
wf.linktext - текст для действующей ссылки, указанном в поле, переданным в параметре &textOfLinks
wf.wrapper - вывод внутреннего содержимого, например подменю
wf.id - вывод уникального ID атрибута. Вам нужно указать параметр &rowIdPrefix для того чтобы этот заполнитель мог получить значение. Значением является префикс + docId.
wf.attributes - выводит ссылку атрибутов для текущего элемента
wf.docid - идентификатор документа текущего элемента
wf.description - описание для текущего элемента
wf.level - текущий уровень вложенности

Пример использования:

[[+wf.linktext]][[+wf.wrapper]]

Ещё один вариант:

[[+wf.linktext]] - [[+wf.description]] [[+wf.wrapper]]

Примеры

Первого уровня

[[!Wayfinder? &startId=`0` &level=`1`
&rowTpl=`rowTpl`
&outerTpl=`outerTpl`
&hereClass=`active`
&rowClass=`eNav_li`]]

Код чанка outerTpl

Код чанка rowTpl

Второго уровня (в этом примере меню и пункты подменю были визуально на одном уровне

[[!Wayfinder? &startId=`0` &level=`2`
&rowTpl=`rowTplFooterMenu`
&outerTpl=`outerTplFooterMenu`
&innerTpl=`innerTplFooterMenu`
&innerRowTpl=`innerRowTplFooterMenu`
&hereClass=`active`]]

Код чанка outerTplFooterMenu

[[+wf.wrapper]]

код чанка rowTplFooterMenu

[[+wf.title]]

код чанка innerTplFooterMenu

[[+wf.wrapper]]

код чанка innerRowTplFooterMenu

[[+wf.title]]

В прошлых уроках мы уже создавали MODX меню: 1й — и 2й — Вывод стандартного выпадающего MODX меню с использованием Bootstrap. Сегодня мы научимся выводить многоуровневые Bootstrap меню с неограниченно степенью вложенности (3х уровневое меню, 4х, 5ти и т.д.).

Для примера я выведу 5-ти уровневое Bootstrap меню, вы же его сможете сделать и 3х уровневым и 7ми уровневым, хоть 10, поменяв значение level на нужное вам!

Вывод многоуровневого Bootstrap меню (с неограниченной вложенностью) в MODX при помощи PdoMenu.

Вывод многоуровневого меню будет таким:

[]>[[+wrapper]]` &tplInner=`@INLINE

` &tplParentRow=`@INLINE

[[+menutitle]][[+wrapper]]

` ]]

Из коробки оно работать не будет. так как Bootstrap 3 по умолчанию поддерживает только 2 уровня вложенности, и для того что бы расширить уровень вложенности bootstrap 3 меню, необходимо подключить js файл со следующим содержанием.

После того начнется открываться 3й, 4й и т.д. уровни вложенности. В принципе все, но есть одно но, данное меню будет открываться вниз все уровни, а это по-моему не особо правильно и красиво, но это поправимо при помощи CSS.

В моем случае получилось 2 строки CSS кода, чтобы уровни выпадали в бок.

Ul.dropdown-menu {left: 100%;top: -8px;} li.submenu1.dropdown.open>ul.dropdown-menu {left: 0%; top: 100%;}

У вас может получить немного другой (но идентичный этому) код и количество его строчек может быть больше в случае если у вас несколько веток меню с подменю. Ну и еще по мелочи придется поправить css под свой вкус, моя цель показать основу. Как найти нужные css классы в коде, к которым нужно применить стили показано в видео, ну а если быть точнее то там показан весь процесс создания многоуровневого меню.

В моем видео вышло вот такое меню

Если вам нужно повернуть треугольнички в выпадающем меню (они направлены в низ, когда выпадают элементы влево), что бы получилось вот так.

Тогда добавьте следующий css код:

Li.submenu2.dropdown>a>span.caret { -moz-transform: rotate(-95deg); -ms-transform: rotate(-95deg); -webkit-transform: rotate(-95deg); -o-transform: rotate(-95deg); transform: rotate(-95deg); } li.submenu3.dropdown>a>span.caret { -moz-transform: rotate(-95deg); -ms-transform: rotate(-95deg); -webkit-transform: rotate(-95deg); -o-transform: rotate(-95deg); transform: rotate(-95deg); } li.submenu4.dropdown>a>span.caret { -moz-transform: rotate(-95deg); -ms-transform: rotate(-95deg); -webkit-transform: rotate(-95deg); -o-transform: rotate(-95deg); transform: rotate(-95deg); }

Документация по pdoMenu

Параметры

Параметры шаблонов

Параметры CSS классов

Официальные примеры

официальную документацию можете почитать здесь . А сейчас разберем самые типовые вызовы меню.

Вызов PdoMenu

Вариант 2 . Просто вручную пишем вызов.

Типовые примеры

Обычное одноуровневое меню

К примеру у нас самое обычное меню, со следующей html разметкой.

Получился вот такой код с вызовом меню:

&parents=`0` — список родителей (в моем случае я не ограничиваю выборку, так как я все равно выведу только определенные страницы);
&level=`1` — уровень вложенности (в данном случае ее нет);
&resources=`2,3,4,5` — список ресурсов которые нужно вывести в меню;
&firstClass=`0` — класс для первого пункта меню (не какого);
&lastClass=`0` — класс последнего пункта меню (не какого);
&outerClass=`top-menu` — класс обертки меню (подставляется в ul);
&hereClass=`current-menu-item` — класс для активного пункта меню (подставляется в li);
&rowClass=`menu-item` — класс одной строки меню (подставляется в li).

Двухуровневое кастомное bootstrap меню

Статический html код выглядит так:

Код его вывода будет таким:

Многоуровневое MODX меню с использованием Bootstrap. PdoMenu — создание меню в MODX Как настроить вертикальное меню в modx evo

Параметры

Параметры шаблонов

[[+menutitle]]

Параметры CSS классов

Примеры

Документация по pdoMenu

Параметры

Параметры шаблонов

Параметры CSS классов

Официальные примеры

Вызов PdoMenu

Типовые примеры

Обычное одноуровневое меню

Двухуровневое кастомное bootstrap меню

Параметры шаблона

&outerTpl

&rowTpl

Примеры

Вывод многоуровневого Bootstrap меню (с неограниченной вложенностью) в MODX при помощи PdoMenu.

Документация по pdoMenu

Параметры

Параметры шаблонов

Параметры CSS классов

Официальные примеры

Вызов PdoMenu

Типовые примеры

Обычное одноуровневое меню

Двухуровневое кастомное bootstrap меню

Мы в соцсетях

Категории