Двухуровневое меню modx revo wayfinder. Многоуровневое MODX меню с использованием Bootstrap
Для создания динамического меню мы воспользуемся готовым сниппетом Wayfinder . Сниппет, как вы, надеюсь, помните из предыдущих уроков, это кусок Php кода, который мы можем включать в наш шаблон. Отличие от чанков только в коде и методе вызова. Если чанк мы вызываем с помощью двойных фигурных скобок, то сниппеты вызываются с помощью таких [!Имя_сниппета!] - некэшируемый вызов, или таких [[Имя_сниппета]] - кэшируемый вызов. Код каждого сниппета должен начинаться с а заканчиваться ?> . Помимо этого, каждому сниппету можно передавать специальные значения параметров, которые он будет обрабатывать. В MODx уже есть несколько готовых сниппетов, которые мы будем в дальнейшем использовать.
Сниппет Wayfinder служит для организации списков ссылок для MODx. Меню нашего сайта и есть список таких ссылок. Давайте для начала найдем кусок кода, отвечающего за вывод нашего меню. Меню находится в чанке HEADER , вот оно:
Давайте вырежем этот код, вместо него напишем:
{{MENU}}
А код вставим в новый чанк MENU , в описании чанка напишем Меню сайта . Теперь давайте изучим этот код.
Меню нашего сайта представляет собой простой, ненумерованный список, находящийся в контейнере с id="templatemo_menu" . Давайте вырежем этот список из контейнера и вместо него вставим вызов нашего сниппета:
&startId=`0` - это параметр со значением 0, который указывает сниппету ID папки, в которой лежат обрабатываемые документы. Все наши документы, которые мы будем отображать в меню, лежат в корневой папке, ID корневой папки равен нулю. Давайте посмотрим, что у нас получилось.
Наше меню заработало, только активный пукнт перестал выделяться белым цветом:
Чтобы понять, почему это произошло, нам надо посмотреть исходный код страницы. В Mozilla Firefox это делается таким образом: Вид >> Исходный код страницы или просто нажав сочетание клавиш Ctrl+U . Находим код нашего меню:
Обращаем внимание на то, что в исходном коде у активного пункта был class="current"
, а наш сниппет автоматически присваивает активному пункту class="active"
. Замечаем еще тот момент, что в исходном коде класс применялся к тегу
, а теперь к тегу
Находим в папке C:/xampp/htdocs/site/www/assets/templates/ файл templatemo_style.css и открываем его с помощью Notepad++. Ищем в этом файле описание класса current, оно находится в 198 строке:
#templatemo_menu li .current{
padding-left: 40px;
color: #ffffff;
}
заменяем класс current на active , не забывая переназначить его тегу :
#templatemo_menu li.active a {
padding-left: 40px;
color: #ffffff;
}
Сохраняем файл. Смотрим, что получилось.
Наше меню заработало точно так, как это задумывали дизайнеры. Теперь мы можем переходить по страницам нашего сайта с помощью нашего главного меню. При добавлении в корневую папку других документов, они автоматически будут отображаться в нашем меню. Чтобы нежелательные документы не отображались в меню, у них следует убрать галочку с Показывать в меню
. Можно принудительно исключить нежелательный пункт с помощью параметра &excludeDocs=`список id исключаемых документов, через запятую`
.
Чтобы в меню не отображались дочерние документы, которые мы будем создавать на следующих уроках, давайте добавим в вызов сниппета параметр level , который определяет количество уровней в меню, по умолчанию будут отображаться все уровни, ограничим только одним уровнем:
Сниппет генерации меню. Может заменять 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
|
&tpl | Чанк оформления пункта меню. Если не указан, то содержимое полей ресурса будет распечатано на экран. По умолчанию: @INLINE |
&tplHere | Чанк оформления текущего пункта меню. |
&tplStart | Чанк оформления корневого пункта, при условии, что включен &displayStart
. По умолчанию: @INLINE [[+menutitle]][[+wrapper]] |
&tplParentRow | Чанк оформления родителя с потомками, не подпадающего под условия &tplCategoryFolder . Например: @INLINE |
&tplParentRowHere | Чанк оформления текущего документа, если он содержит потомков. |
&tplParentRowActive | Чанк оформления родителей с потомками в активной ветке меню. |
&tplCategoryFolder | Специальный чанк оформления категории. Категорией считается родитель с потомками, у которого указан пустой шаблон или rel="category" в поле link_attributes . |
&tplInner | Чанк оформления всего блока подпунктов меню. Если пуст - будет использовать &tplOuter . Например: @INLINE |
&tplInnerRow | Чанк оформления подпункта меню. Например: @INLINE |
&tplInnerHere | Чанк оформления активного подпункта меню. |
Параметры CSS классов
Эти параметры задают значение плейсхолдеров [[+classnames]] и [[+classes]] для различных элементов меню. Плейсхолдер [[+classnames]] выводит только название класса без атрибута class="" , в отличие от плейсхолдера [[+classes]] .
Примеры
Обычный вывод меню из корня сайта в один уровень:
[]
Вывод с исключением определенных родителей и проверкой разрешений пользователя:
[]
Вывод меню сразу из двух родителей, с показом корневых точек:
[]
Вывод двух уровней ресурсов с подсчетом количества вложенных:
[]` &tplParentRow=`@INLINE
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]] - выводит значения поля интротекста
Пример шаблона:
Параметры шаблона
Эти параметры указывают чанки, которые содержат шаблоны, которые будут генерировать вывод 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).
Параметр &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 - текущий уровень вложенности
Пример использования:
Ещё один вариант:
Примеры
Первого уровня
[[!Wayfinder? &startId=`0` &level=`1`
&rowTpl=`rowTpl`
&outerTpl=`outerTpl`
&hereClass=`active`
&rowClass=`eNav_li`]]
Код чанка outerTpl
[[+wf.wrapper]]
Код чанка rowTpl
[[+wf.wrapper]]
Второго уровня (в этом примере меню и пункты подменю были визуально на одном уровне
[[!Wayfinder? &startId=`0` &level=`2`
&rowTpl=`rowTplFooterMenu`
&outerTpl=`outerTplFooterMenu`
&innerTpl=`innerTplFooterMenu`
&innerRowTpl=`innerRowTplFooterMenu`
&hereClass=`active`]]
Код чанка outerTplFooterMenu
[[+wf.wrapper]]
код чанка rowTplFooterMenu
[[+wf.title]]
[[+wf.wrapper]]
код чанка innerTplFooterMenu
[[+wf.wrapper]]
код чанка innerRowTplFooterMenu
[[+wf.title]]
Дата публикации: 07.02.2011
В этом несложном уроке я покажу, как настраивается меню.
Однажды меня попросили исправить баг с меню на одном сайте - некоторые пункты упорно не хотели выстраиваться в ряд, а вместо этого вылезали в неожиданных местах страницы при наведении курсора. Баг заключался не в кривом css, как я предположила сначала, а в криво настроенном вызове Wayfinder.
Что такое Wayfinder - это сниппет, который используется, когда нужно вывести список документов раздела/ов. В результате работы сниппета генерируется ненумерованный список. При помощи различных параметров с этим списком можно сделать все, что угодно:) Подробнее вы можете почитать в документации , или набрав в Google - “wayfinder modx wiki”.
Важные примечания:
1. О том, что такое MODx, как установить MODx, как организовать структуру документов, как из html сделать шаблон, что такое чанк и проч. вопросы новичков в этом уроке я не рассматриваю.
2. Плейсхолдеры, которые я буду использовать в уроке, указаны в том формате, который «понимает» Evo версия. В чем разница, смотрите пример:
Итак, разберем создание меню по шагам.
Шаг 1
Для урока набросала вот такое меню:
Здесь для наглядности я применила разные стили к разным уровням меню. На том сайте, где фиксила баг с меню, было примерно так же - у каждого уровня меню свой стиль.
Верстаем - подробности верстки в рамки данного урока не входят, вот такой код у меня получился:
Полюбовавшись кодом, определяем для себя, какой класс в нашем меню за что отвечает (это если ковыряетесь в чужом коде, в своем и так должно быть ясно ):
ul class="menu" - класс всего меню
li class="top" - класс пунктов меню верхнего уровня
a class="top_link" - класс для ссылок в пунктах верхнего уровня
ul class="sub" - класс для подменю
ну и span class="down" для оформления пунктов верхнего уровня
Шаг 2. Создаем три документа
Продукция
- Доставка
- Поставщики
У документа «Продукция» создаем дочерние документы: «Сыворотка правды», «Средство Макропулоса», «Универсальные средства».
Шаг 3. Выносим меню в отдельный чанк
В шаблоне, в том месте где у вас должно быть меню, убираем весь лишний код (сам html код меню), вместо него пишем
{{ menu}}Тем самым мы выносим меню в отдельный чанк. Потом создаем новый чанк и называем его menu . Пока в содержимое чанка можно скопировать код меню, который вы сверстали. Для наглядности.
Зайдите в админке в «Сайт»-> “Просмотр” - чтобы проверить, что все нормально с путями к файлу стилей и картинкам.
Получилось? Ок, но это еще не меню. Вдохнём в него жизнь при помощи Wayfinder.
Шаг 4
Удалите все содержимое чанка menu и вместо этого вызовите сниппет Wayfinder.
Пока напишем так:
параметр startId - указывает, с какого документа начинать формировать список. У нас указан 0 - это значит, что список формируется с корня дерева документов.
Посмотрим, что получилось:
Это - рабочее и живое меню. Переименовывайте документы, удаляйте, добавляйте - меню будет формироваться в соответствии с деревом документов.
Шаг 5
5.1. Tеперь приводим внешний вид меню в норму
Wayfinder по умолчанию формирует простой код () , все классы списков и элементов задаются специальными параметрами при вызове.
В начале урока мы определяли, какие css-классы в нашем меню за что отвечают. У Wayfinder имеются нужные нам параметры: outerClass - класс для контейнера меню. Сопоставив с нашей вёрсткой, получаем такой вызов Wayfinder:
[[ Wayfinder? &startId=`0` &level=`2` &outerClass=`menu`]]помимо параметров с классами указываем уровень вложенности - &level=`2` .
Отмечаем недостатки - нет классов для пунктов меню верхнего уровня, нет тегов и класса для подменю.
Все эти недостатки исправляются добавлением соответствующих параметров к вызову Wayfinder.
5.2. Добавляем классы к пунктам верхнего уровня и теги
Для этого есть переменная rowTpl , которая описывает шаблон для пункта меню, делаем такой шаблон, для этого создаем чанк под названием parent:
В вызове Wayfinder добавляем &rowTpl=`parent`
.
Не забываем проверять исходный код - уже почти все хорошо, осталось подменю.
Для настройки подменю используем переменную innerRowTpl .
Создаем чанк inner :
Добавляем в вызов Wayfinder переменную innerRowTpl=`inner` и переменную, которая указывает класс для контейнера подменю &innerClass=`sub` .
Окончательный вызов Wayfinder выглядит так:
[ ]Всё, наше меню готово. Успехов!