Реализуем навигационное меню MODx Revo с помощью сниппета Wayfinder.
Обычно, создание любого сайта начинается с проектирования, определения будущей структуры и фундамента. Только после этого, на 80% можно определить из каких разделов, подразделов будет состоять ваш сайт, а также проработать навигационное меню.
Сниппет Wayfinder.
Ранее я рассказывал, о том как реализовать меню с помощью сниппета Wayfinder для редакции MODx Evo, сегодня речь пойдет о редакции Revo.
Сниппет Wayfinder выводит список ссылок на ресурсы, соответствующий указанным вами параметрам вызова.
Чаще всего Wayfinder применяется для формирования динамического навигационного меню на сайте. Благодаря поддерживаемым параметрам, шаблонам, а также назначаемым классам элементов вывода, Wayfinder становится весьма гибким и удобным инструментом.
Основные параметры сниппета Wayfinder.
Рассмотрим основные параметры, которые могут быть использованы в вызове:
- &debug=`1|0` - режим правки;
- &displayStart=`1|0` - выводить ли начальную папку, если значение параметра равно 1, то первым в выводимом списке будет ресурс, идентификатор которого задана в параметре «startId»;
- &excludeDocs=`1,2,3` - в данном параметре через запятую указываются идентификаторы ресурсов, которые необходимо исключить при выводе списка;
- &fullLink=`0|1` - выводить полную ссылку;
- &hideSubMenus=`0|1` - скрывать или не скрывать подменю;
- &IgnoreHidden=`0|1` - игнорировать или выводить ресурсы, для которых выставлено свойство «не показывать в меню»;
- &includeDocs = `1,2,3` - список ресурсов, которые должны быть включены в список в обязательном порядке;
- &level=`` - количество уровней в меню;
- &limit=`` - максимальное количество ресурсов в выводе;
- &ph=`` - вывод результатов в указанный плйсхолдер;
- &sortBy=`id|menutitle|pagetitle|introtext|menuindex|pub_date|published|hidemenu|parent|description|alias|longtitle|type|template|random` - задает поле по которому будет происходить сортировка;
- &sortOrder=`ASC|DESC` - порядок сортировки;
- &startId=`` - задает источник ресурсов;
- &textOfLinks=`id|pagetitle|description|longtitle|parent|alias|introtext` - задает текст ссылки;
- &titleOfLinks=`id|pagetitle|description|longtitle|parent|alias|introtext` - задает параметр для вывода в атрибуте title ссылки;
- &where=`` - задает дополнительные условия отбора;
Шаблоны Wayfinder.
Ниже показан список допустимых шаблонов:
- &activeParentRowTpl=`` – задает шаблон родителей активного (текущего) пункта меню;
- &categoryFoldersTpl=`` - задает шаблон вывода категории;
- &cssTpl=`` - задает имя чанка, содержащего стили;
- &hereTpl=`` - задает шаблон активного пункта;
- &innerHereTpl=`` - задает шаблон активного пункта подменю;
- &innerRowTpl=`` - задает шаблон для пункта подменю;
- &innerTpl=`` – задает шаблон для подменю содержащего дочерние элементы;
- &jsTpl=`` - задает имя чанка, содержащего скрипты JavaScript;
- &lastRowTpl=`` - задает шаблон последнего пункта меню;
- &outerTpl=`` - задает шаблон контейнера меню;
- &parentRowHereTpl=`` - задает шаблон вывода активного ресурса-контейнера;
- &parentRowTpl=`` - задает шаблон ресурса контейнера;
- &rowTpl=`` - задает шаблон пункта меню;
Классы Wayfinder.
- &firstClass=`` - задает CSS-класс первого пункта меню;
- &hereClass=`` - задает CSS-класс текущей цепочки пунктов меню;
- &innerClass=`` - задает CSS-класс для подпунктов меню;
- &lastClass=`` - задает CSS-класс последнего пункта меню;
- &levelClass=`` - задает CSS-класс для каждого уровня меню;
- &outerClass=`` - задает CSS-класс для контейнера меню;
- &parentClass=`` - задает CSS-класс ресурсов-контейнеров;
- &rowClass=`` - задает CSS-класс для всех пунктов меню;
- &selfClass=`` - задает CSS-класс текущего пункта меню;
- &webLinkClass=`` - задает CSS-класс для пунктов меню - ссылок.
Реализуем навигационное меню для MODx Revo с помощью сниппета Wayfinder.
Рассмотрим на примере, как реализовать меню.
На моем одном сайте навигационное меню представляет из себя следующую конструкцию:
Я специально пронумеровал и описал каждый из пунктов, чтобы вам было понятно.
Как мы видим по верстке моего макета, контейнер списков меню имеет класс «nav navbar-nav». Первый элемент меню задается классом «first», последнему присвоен класс «last». Пункту меню с подпунктами присвоен класс «dropdown». Контейнеру вложенного меню присвоен класс «dropdown-menu». Вложенность меню ровна 2.
Подобная конструкция с легкостью описывается вызов сниппета Wayfinder со следующими параметрами:
[ [Wayfinder? &startId=`0` &outerClass=`nav navbar-nav` &level=`2` &innerClass=`dropdown-menu` &parentClass=`dropdown`]]
Как видите, для реализации подобной конструкции мне даже не пришлось вводить шаблоны, а все обошлось с использованием классов для элементов списка меню.
Будь в курсе!
Введите Ваш Email и имя.
Чтобы отписаться нажмите сюда ».