Главная > Компьютер > Modx revo выпадающее меню wayfinder. Многоуровневое MODX меню с использованием Bootstrap

Modx revo выпадающее меню wayfinder. Многоуровневое MODX меню с использованием Bootstrap

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

Концепции верхнего меню

Система меню в Revolution имеет совершенно новую архитектуру. Она почти не имеет ничего общего с системой меню Evolution за исключением названий некоторых пунктов. Для настройки меню не обязательно понимать новую систему меню, но это понимание помогает в работе, особенно если вы собираетесь создавть Персональные страницы панели управления, доступ к которым будет выполняться через меню.

Дерево верхнего меню

Перейдите к разделу верхнего меню Система -> Действия и вы увидите основы системы меню. Дерево справа (Верхнее меню) содержит действительные элементы меню и подменю. Если вы раскроете различные разделы, то вы увидите, что это точная копия верхнего меню. Элементы верхнего уровня - это то, что вы видите в верхней части панели управления. Почти всегда это контейнеры для подменю. Каждое подменю в дереве соответствует действию в панели управления. Когда вы кликаете на подменю, в панели управления выполняется действие (например, очистка кэша сайта или переход к панели управления доступом). Фактически и пункты верхнего меню могут быть действиями, но ни один из пунктов верхнего меню не сконфигурирован таким образом.

То, что происходит, когда вы кликаете на элементе меню, фактически определяется здесь. Как вы увидите, вы можете легко переопределить то, что происходит при клике на пункте меню, а также можете переименовать, спрятать или удалить элементы списка меню. Вы также можете добавить элементы в меню и задать, что произойдет при клике на них. Фактически вы можете создать полностью новую систему меню для панели управления, которая заменит существующую и различные пользователи могут видеть различные меню. Все это можно делать без изменения ядра MODX.

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

Рассмотрим некоторые действия панели управления, но будьте осторожны, чтобы не изменить их - нажимайте кнопку "Отменить" после их просмотра.

В расположенном справа дереве (Верхнее меню) кликните правой кнопкой на пункте "Сайт" и выберите в выпадающем меню пункт "Редактировать". Появится диалоговое окно Редактирования с полями, которые определяют действие меню:

Имя - имя элемента меню

Описание - описание элемента меню

Действие - спецификация PHP-файла, который будет выполнен

Значок - дополнительный значок для пункта меню

Параметры - необязательные параметры $_GET для URL

Обработчик - JS код, который будет выполнен

Права доступа - разделенный запятыми список необходимых прав доступа

Отметим, что большинство полей пункта "Сайт" пустые. Это потому, что это контейнер для подменю, находящихся в нем. Если вы кликните на меню "Сайт" в верхнем меню, ничего не происходит.

Давайте посмотрим на подраздел меню, который что-то делает. Кликните на "Отмена" для завершения диалога, раскройте раздел "Сайт" дерева правой панели, кликните правой кнопкой на подменю "Обновить сайт" и выберите "Редактировать".

Отметим, что в открывшемся диалоговом окне имеется содержимое полей "Обработчик" и "Права доступа". Поле "Права доступа" говорит нам, что пользователь не может выполнить действие этого подпункта меню, если у него нет права доступа empty_cache. В поле "Обработчика" находится реальный код JS, который выполняется, когда вы выбираете этот подпункт. Все пункты, в которых действительно выполняются какие-то действия имеют заполненными поля или "Действие", или "Обработчик". Если заполнено поле "обработчик", то исполняется код, расположенный в этом поле, а поле "Действие" игнорируется. Если поле "Обработчик" не заполнено, то выполняется действие из поля "Действие". Поле "Действие" обычно является указателем или на файл-контроллер, или на одно из действий в дереве "Действия", расположенного слева (которые собственно указывают на соответствующие файлы-контроллеры). Закройте диалог, нажав кнопку "Отменить".

Давайте посмотрим на вариант пункта меню с действием. Загрузите и установите через Управление пакетами дополнение Batcher, перезагрузите страницу и снова зайдите в раздел Система -> Действия . В разделе "Компоненты" в правом дереве (раскройте его, если необходимо) кликните правой кнопкой на Batcher и выберите "Редактировать". Теперь мы видим заполненное поле "Действие, а не "Обработчик" : batcher - index. Завершите диалог редактирования, нажав кнопку "Отмена".

В левой панели все пункты верхнего уровня являются пространствами имен. В дереве "Действия" слева раскройте пространство имен "batcher". Вы должны увидеть действие index. Это действие, на которое указывает меню Batcher, которое мы видели на правой панели.

Рассмотрим, что мы можем делать с деревом "Верхнее меню". Элементы в дереве "Верхнее меню" могут быть перераспределены путем их перетаскивания. Если вы меняете местоположение пункта меню в дереве, также поменяется и фактическое верхнее меню, хотя для того, чтобы это увидеть, вам нужно будет перезагрузить страницу панели управления.

Для добавления пункта в верхнее меню вы можете кликнуть правой кнопкой где-нибудь в области дерева и выбрать "Добавить пункт меню". Для добавления пункта в меню верхнего уровня вы также можете нажать кнопку "Добавить пункт".

Пункты меню могут быть удалены путем клика на них правой кнопкой и выбора пункта "Удалить". Если вы удалите пункт меню, содержимое его полей будет утрачено также будут удалены любые дочерние элементы. Это действие необратимо.

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

Для изменения заголовка верхнего меню, уточните его описание. Затем перейдите в раздел меню Система-> Управление словарями. Выберите пространство имен "core" и тему "topmenu". Выпадающий список тем содержит более одной страницы, поэтому вам может потребоваться перейти ко второй странице, чтобы найти тему "topmenu". Найдите языковую строку для нужного элемента меню, дважды кликните на ее значении и измените ее. Любые изменения, которые вы выполните здесь, будут действовать и после обновления версии MODX и после обновления любой из компонент сторонних разработчиков.

Описанный выше метод будет работать только для встроенных в ядро пунктов меню. Для элементов меню сторонних разработчиков потребуется выбрать соответствующее пространство имен. Например, если вы хотите изменить соответствующий пункт меню для Batcher, вам нужно будет изменить значение строки управления словарями для пространства имен batcher.

Дерево "Действия"

Вернитесь к разделу Система -> Действия , если вы из него вышли. В левой панели кликните на действии "index" ниже имени "batcher" и выберите в выпадающем списке "Редактировать". Напомним, что это действие, на которое указывает элемент меню Batcher на правой панели. Вы увидите, что контроллером для этого действия будет index, а пространство имен batcher. Если мы сейчас перейдем в раздел Система->Пространство имен , мы увидим, что путем для пространства имени batcher будет:

{core_path}components/batcher

С привязкой к контроллеру, который будет выполняться при клике на этом пункте меню, MODX создаст полный путь, подобный этому:

путь_пространства_имен + имя_контроллера +.php

Другими словами, полагая, что core находится в месте по умолчанию, MODX инициирует выполнение файла-контроллера по адресу:

core/components/batcher/index.php

Если вы посмотрите на этот файл, то вы увидите, что он как раз содержит файл index.php в каталоге core/components/batcher/controllers, который загружает класс Batcher и инициализирует его, запуская Batcher в панели управления. Мы создадим новый пункт меню в разделе "Компоненты" немного позже, когда будем создавать пользовательские страницы панели управления.

Многие элементы меню в правой панели не имеют активных действий, показываемых в левой панели. Это происходит потому, что пути к их файлам-контроллерам хранятся в базе данных MODX и не должны редактироваться (по крайней мере это сделать сложнее). Эти пути хранятся в таблице modx_actions. Каждое действие имеет свой идентификаор (ID) и путь к его контроллеру. Действие также имеет вспомогательный URL для контекстно-зависимой помощи, когда контроллер активен и несколько других полей. Для действий, показанных в панели "Действия" слева, вы можете увидеть ID в скобках рядом с именем действия.

Добавление пункта меню в дерево для любого действия в панели управления выполняется, таким образом, путем создания пункта меню в правой панели и путем создания соответствующего действия (контроллера) или добавления обработчика. Если контроллер уже существует, вы можете просто выбрать его в выпадающем меню "Действия". Если нет, то вы должны создать действие в левой ппанели, которое указывает на контроллер. Например, нет пункта меню для создания нового пользователя, но поскольку для этого есть файл-контроллер, этот пункт может быть легко добавлен в верхнее меню. В этом случае нужно только создать пункт меню справа и для пространства имен "core" установить действие security/user/create. Как вы понимаете, пункт верхнего меню, который имеет обработчик, но не имеет соответствующего действия (подобно пункта меню "обновить сайт") в дереве "Действия". Ему не нужен пункт "Действие", поскольку обработчик содержит код для этого. Вместо запуска контроллера, MODX просто выполняет код в поле обработчика.

Обработка кликов в меню

Обратите внимание на действие index пространства имен Batcher в левой панели. Заметим его ID. Когда вы кликаете на пункте верхнего меню, MODX получает этот ID. Затем в панели управления генерируется URL этой страницы и пользователь попадает на нее. На нашем сайте этот ID равен 79. Когда мы кликаем на Batcher в верхнем меню, то видим в адресной строке браузера:

http://сайт/manager/index.php?a=79

Если вы кликаете на пункте меню Batcher, вы должны увидеть аналогичный URL, в котором вы увидите ID вашего index действия Batcher. Когда обработчик запросов получает этот URL, он проверяет наличие этого объекта меню в базе данных, наличие прав доступа у пользователя для его выполнения, устанавливает URL для помощи и выполняет файл-контроллер этого действия (если же имеется обработчик, то выполняется код JS обработчика).

Работа с верхним меню

Теперь, когда мы знаем как MODX обрабатывает элементы меню и связанные с ними действия, давайте модифицируем реальное верхнее меню в панели управления. Используемые методы достаточно просты и для их использования от вас не требуется понимания внутренних механизмов работы системы MODX меню/действие.

Будьте здесь осторожны, поскольку все ваши изменения будут по-прежнему в силе и при обновлении сайта и нет простого способа вернуться к меню по умолчанию. Большинство действий, которые мы будем предпринимать здесь, легко обратимы, но вам лучше записать первоначальную структуру меню до внесения изменений. Лучше вначале потренироваться на установке MODX, которая не будет использована для настоящего сайта.

Изменение порядка следования пунктов меню

Вы можете изменить порядок следования пунктов верхнего меню в панели управления или любых пунктов в их подменю. Перейдите в раздел Система->Действия и раскройте дерево меню справа (под заголовком "Верхнее меню").

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

Добавление и удаление пунктов меню

Добавить новый пункт меню достаточно просто. Перейдите в раздел Система->Действия и раскройте дерево меню справа (под заголовком "Верхнее меню"). Выберите часть меню, к которому вы хотите добавить пункт и кликните на кнопке "Добавить меню" (или же кликнуть правой кнопкой и выбрать "Добавить пункт меню"). Введите имя нужного вам пункта меню и кликните кнопку "Сохранить". Обычно пользователи MODX вводят новые пункты в меню "Компоненты", но вы можете добавлять их где угодно. Для удаления пункта меню вы можете кликнуть правой кнопкой на нем и выбрать "Удалить пункт меню".

Если вы добавляете новый пункт меню и затем перегружаете страницу в браузере, вы можете и не увидеть ваш новый пункт в верхнем меню. Пункты верхнего меню без дочерних элементов и без указания действия или обработчика не будут отображаться в меню. Вот почему меню "Компоненты", которое вы видите в дереве, не отображается в меню, когда вы вначале установите MODX Revolution - пока не установлено никаких компонент.

В качестве простого примера давайте создадим новое пользовательское меню, которое будет вести вас в наиболее часто используемые разделы панели управления. Давайте предположим, что ваша работа требует частых визитов в пункт настроек системы, создания/редактирования документа и контроля доступа. Мы создадим пункт верхнего меню под названием "Мое меню", в котором поместим указанные пункты. Отметим, что мы будем выполнять всю работу в правой панели (Верхнее меню).

Перейдите к разделу Система->Действия и (в дереве верхнего меню) кликните кнопку "Добавить меню". Введите в поле "Имя" название "Мое меню" и кликните на кнопке "Сохранить".

Имя - Новый документ

Действие - core-resource/create

Имя - Настройки системы

Действие - core-system/settings

Имя - Контроль доступа

Действие - core-security/permission

Убедитесь, что ваши три новые пункта меню являются подпунктами в меню "Мое меню". Если это не так, перетащите ихв нужное место мышью. Вы также можете изменить порядок следования меню и подменю.

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

Если вы хотите удалить любой пункт меню, который вы создали, просто перейдите к разделу Система->Действия , кликните на них правой кнопкой и выберите "Удалить". Хорошей идеей будет удаление всех подменю до удаления пункта главного меню, чтобы они не остались в базе данных.

Как спрятать пункты меню

Кроме изменения порядка следования пунктов меню вы также можете спрятать их, используя права доступа, прикрепленные к пункту меню. Перейдите к разделу Система->Действия и разверните дерево меню с правой стороны (под заголовком "Верхнее меню").

Кликните правой кнопкой на любом пункте или подпункте меню и выберите "Редактировать". Появится диалоговое окно с нижним полем "Права доступа". Будьте осторожны, чтобы не изменить никакого другого поля.

Если вы пытаетесь спрятать существующие пункты меню, вы увидите, что поле "Права доступа" у некоторых из них заполнено, а у некоторых нет. Какие действия необходимо предпринять, чтобы спрятать поле, зависит от того, заполнено ли это поле, или нет.

Если в поле "Права доступа" содержится список прав доступа, вы можете создать новую политику доступа (или отредактировать существующую) для блокировки этого права доступа и пункт меню будет спрятан. Эта операция может иметь побочные действия, поскольку другие пункты меню в панели управления могут зависеть от тех же прав доступа. Лучшим методом может быть добавление в это поле дополнительных спецификаций пользовательских прав доступа.

Поле "Права доступа" может содержать список прав доступа, разделенных запятыми. Данный пункт меню увидят только пользователи, имеющие все перечисленные права доступа.

Давайте посмотрим на пример. Предположим, что вам нужно спрятать от всех пользователей, за исключением пользователя с неограниченными правами Super User подменю "Управление пользователями" в меню "Безопасность".

Перейдите к разделу Система->Действия и раскройте дерево меню, а затем кликните правой кнопкой на подпункте "Управление пользователями" и выберите пункт "Редактировать". Поле "Права доступа" должно содержать view_user. Мы собираемся добавить другие права доступа под названием my_view_user_menu. Для этого отредактируйте это поле, чтобы оно содержало view_user,my_view_user_menu. Убедитесь, что во введенных данных нет пробелов. Теперь пользователям для того, чтобы увидеть подпункт "Управление пользователями", нужно иметь оба этих права доступа, и, поскольку ни у кого нет второго права доступа (поскольку мы только что его придумали), никто не увидит этот подпункт.

Для пунктов меню, которые не имеют прав доступа, процедура аналогична. Вы просто добавляете новые пользовательские права доступа в пустое поле "Права доступа".

Отметим, что после того, как мы добавили наши пользовательские права доступа, пользователь с неограниченными правами Super User также не будет видеть подменю "Управление пользователями". Для того, чтобы это поправить, нужно дать ему эти права доступа. Если вы планируете выполнять эти операции на реальном сайте, перед созданием пользовательских прав доступа всегда вначале давайте администратору с неограниченными правами эти права доступа.

Поскольку стандартная группа Administrator в панели управления защищена, вам требуется создать новый шаблон политики доступа, содержащий пользовательские права доступа и новую политику доступа, основанную на них. Вы можете поместить все ваши пользовательские права доступа в этот шаблон политики доступа. В разделе Безопасность->Контроль доступа кликните на "Создать шаблон политики доступа". Для диалога используйте следующие параметры:

Имя : CustomPermissionTemplate

Группа шаблонов : Admin

Описание :

После этого кликните правой кнопкой мыши на кнопке "Добавить разрешение". В диалоге используйте следующие параметры:

Имя : my_view_user_menu

Описание : Права доступа пользовательского меню

Затем кликните на закладке "Политика доступа", далее на кнопке "Создать политику доступа". В диалоге используйте следующие параметры:

Имя : CustomPermissions

Шаблон политики доступа : CustomPermissionTemplate

Описание : Мои пользовательские права доступа

Кликните на политике доступа "Custom permissions" и выберите "Редактировать". Прокрутите список вниз до права доступа my_view_user_menu и поставьте отметку в чекбоксе рядом. Кликните на кнопке "Сохранить" справа вверху.

Теперь нам нужно дать пользователю с неограниченными правами Super User это право доступа путем создания нового элемента списка управления доступом. Перейдите в раздел Безопасность->Контроль доступа->Группы пользователя ". Кликните правой кнопкой на пользовательской группе "Administrator" и выберите "Редактировать группу пользователей", кликните на закладке "Контекстный доступ" и затем на кнопке "Добавить контекст". Для диалога используйте следующие параметры:

Контекст : mgr

Минимальная роль : Super User - 0

Политика доступа : CustomPermissions

В верхнем меню выберите Безопасность->Контроль доступа . Никто не сможет увидеть этот пункт меню за исключением пользователя с неограниченными правами Super User (и еще пользователей с этой политикой доступа). Если вы зайдете в панель управления как один из редакторов сайта, подпункт "Управление пользователями" должен отсутствовать.

Вперёд

Дата публикации: 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 . Пока в содержимое чанка можно скопировать код меню, который вы сверстали. Для наглядности.

Зайдите в админке в «Сайт»-> “Просмотр” - чтобы проверить, что все нормально с путями к файлу стилей и картинкам.

Получилось? Ок, но это еще не меню. Вдохнём в него жизнь при помощи Wayfinder.

Шаг 4

Удалите все содержимое чанка menu и вместо этого вызовите сниппет Wayfinder.
Пока напишем так:

[[ Wayfinder? &startId=`0`]]

параметр 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:

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

В вызове Wayfinder добавляем &rowTpl=`parent` .
Не забываем проверять исходный код - уже почти все хорошо, осталось подменю.

Для настройки подменю используем переменную innerRowTpl .

Создаем чанк inner :

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

Добавляем в вызов Wayfinder переменную innerRowTpl=`inner` и переменную, которая указывает класс для контейнера подменю &innerClass=`sub` .

Окончательный вызов Wayfinder выглядит так:

[ ]

Всё, наше меню готово. Успехов!

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 мы будем при помощи сниппета 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 ( и , это для тех кто не уловил суть. Ну а далее сделаем .

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

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

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

Это можно реализовать с помощью специальных инструментов MODx – сниппетов.

Сниппет – это php код, который запускается в шаблоне MODx и позволяет выводить информацию из базы данных CMS.

Сниппеты разделяются на два вида:

кэшируемые;
не кэшируемые.

Их отличие в конструкции вызова. Так, например, если мы имеем сниппет с названием «SNIPNAME», то при не кэшируемом вызове конструкция будет иметь следующий вид:

[!SNIPNAME!]

При кэшированном варианте – она будет иметь вид:

[]

Тут может появиться вопрос, зачем же делать сниппет кэшируемым? Дело в том, что при использовании кэша конструкция сохраняется и не происходит постоянное обращение к базе данных, что в свою очередь увеличивает скорость загрузки страниц и уменьшает нагрузку на сервер. Но часто, можно столкнуться с тем, что после занесения в кэш, вебмастер производит какие-то действия, но они не отображаются на сайте, для их отображения нужно предварительно очищать устаревший кэш. Об этом расскажу немного позже. Мы же будем использовать именно не кэшируемый вариант меню.

Второй важной характеристикой сниппетов являются — дополнительные параметры , которые можно задавать непосредственно при вызове этой конструкции. Схема выглядит следующим образом:

[!Имя_сниппета? &параметр1=`значение параметра` &параметр2=`значение параметра` !]

Знак «?» — дает системе сигнал, что после него следуют параметры, которые нужно применить к сниппету. А сами сниппеты при этом разделяются знаком «&», а значения берутся в обратные кавычки. Если вы поставите неправильные кавычки, то ничего работать не будет.

Как же настроить динамический вывод структуры меню?

Для вывода меню в MODx мы будем использовать сниппет:

[!Wayfinder!]

Использовать его в «чистом виде» у нас не получиться, поскольку для этого нужно наличие вложенных материалов, и отображаться оно будет только на главной. Правильно будет указать id статьи, от которой стоит делать отсчет. С помощью данного метода мы сможем создавать много разных меню, используя для этого id. На практике будет более понятно.

Так как сейчас Родительским пунктом является «Главная» со значением id = 1. То конструкция должна иметь следующий вид:

Такой конструкцией вы сможете вывести меню из дочерных пунктов. Давайте реализуем это на практике.

Идем в раздел «Элементы» — «Управление элементами» — Вкладка «Чанки». Выбираем чанк «HEADER» и находим в нем код, который отвечает за вывод меню.

HOME

home
about us
services
projects
solutions
jobs
blog
contacts

Давайте вместо этого кода вставим конструкция вышеприведенного сниппета:

[!Wayfinder? &startId=`1`!]

Как видите, меню подключилось, в адресной строке меняется url, правда шаблон остается тот же, мы это поправим в следующих уроках.

Но вот существует две проблемы:

1.) Не выделяется активный пункт меню.

2.) Отсутствует пункт меню «Главная».

Давайте исправим эти недочеты.

Подключаем активный пункт меню

По умолчанию сниппет Wayfinder формирует активный пункт меню с классом «active». Так что нам не придется дописывать дополнительный скрипт, а всего лишь поменять класс в css файле. Для этого переходим в папку с нашим шаблоном — /assets/templates/retina/css/style.css. Учтите, что папка название папки шаблона у вас может отличатся, все зависит от того какое название вы вводили в первых уроках. Открываем этот файл и ищем строчку со стилями для активного пункта меню. У меня это строчка – 190, а вот и сам код:

#navigation a.nav-btn { margin-bottom: 15px; text-decoration: none; padding:0 36px 0 10px; line-height:30px; display:block; background: url(images/navigation.png) repeat-x 0 0; height: 30px; position: relative; }

Заменяем класс «.nav-btn» на «active».

Подключаем «Главная»

И так, как вы поняли, мы вывели дочерные пункты от пункта меню «Главная». Чтобы подтянуть сам этот пункт нужно, чтобы все наше меню было одинакового уровня вложенности.

Для начала проверяем, открыт ли доступ к корневой папке. Для этого переходим в раздел «Инструменты» — «Конфигурация» — Вкладка «Пользователи». В ней находим параметр – «Разрешить доступ к корневой папке » и ставим значение в «Да».

После этого выбираем пункт, допустим «Услуги», заходим на страницу его редактирования и внизу нажимаем на иконку, как показано на скриншоте.

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

Кликаем на ней и сохраняем нашу статью. Сам материал должен переместиться на один уровень с «Главной».

Это действие нужно проделать со всеми подпунктами. У вас должна выйти следующая структура.

Если вы сейчас обновите страницу вашего сайта, то ваше меню исчезнет. Все потому, что изменился id родительской категории. Давайте подправим его. Для этого идем в раздел «Элементы» — «Управление элементами» — Вкладка «Чанки». Выбираем чанк «HEADER» и находим в нем код:

[!Wayfinder? &startId=`1`!]

И изменяем на:

Все, меню полностью готово и соответствует шаблону.

Если вы заметили, то по шаблону можно увидеть, что в футере у нас есть меню, которое в точности повторяет пункты только что созданного нами варианта. Поэтому, я предлагаю сразу подправить и этот блок. Для этого идем в раздел «Элементы» — «Управление элементами» — Вкладка «Чанки» выбираем чанк «FOOTER». В нем находим код, отвечающий за вывод нижнего меню, и вместо него вставляем уже знакомую нам конструкцию.

[!Wayfinder? &startId=`0`!]