Начинаем 8 урок MODx Revolution для новичков. Напоминаю мы делаем сайт для изучения MODx Revolution. На последнем уроке мы рассмотрели концепцию сниппетов, которые являются кусками PHP кода, который позволяет добавить функциональности в наш вебсайт. В этом уроке мы рассмотрим особенный сниппет – Wayfinder, и будем использовать его для создания динамического меню нашего сайта.

Что такое Wayfinder?

Wayfinder – это сниппет, который выводит неотсортированный список ссылок на ресурсы в вашем дереве сайта, тип вывода списка зависит от вызова сниппета и параметров данного вызова. В общих словах это значит, что когда вы помещаете вызов Wayfinder‘а в вашем шаблоне, он начинает искать ресурсы, которые отвечают заданным в нём параметрам и возращает список ссылок к этим ресурсам в формате неотсортированного списка либо в определенном вами формате.

Для чего использовать Wayfinder?

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

Wayfinder довольно-таки гибкий инструмент и позволяет определить, какие ресурсы включить или исключить из меню, каков шаблон меню, как глубина меню вашего сайта. Граница ваших возможностей определяется вашим HTML/CSS кодом.

Как использовать Wayfinder?

Как мы уже упомянули в предыдущем уроке, синтаксис вызова сниппетов выглядит так: [[!somesnippet]]

Это всего лишь базовый вызов и его не достаточно, кроме этого мы должны определить некоторые свойства данного вызова. В случае с Wayfinder`ом самый минимум, который необходимо определить в свойствах: где в дереве ресурсов Wayfinder должен начинать строить список ресурсов. Таким образом в вызове сниппета Wayfinder необходимо задать по крайней мере один параметр – начальный ID. Базовый вызов сниппета Wayfinder в таком случае будет выглядеть вот так:

Этот вызов говорит Wayfinder‘у начинать с корня дерева (ID 0 значит корень сайта) и показывает все ресурсы, которые опубликованы и у которых не стоит галочка в чекбоксеHide from Menus (Спрятать от Меню).

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

Давайте взглянем на шаблон и код, который выводит данное меню:

Как вы видите, это вложенный неупорядочненный список. Давайте заменим этот код базовым вызовом Wayfinder и увидим, что у нас получится. Удалите код приведенный вверху и вставте вместо него:

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

Если вы используете тот же шаблон, что и я, то ваш код будет выглядет приблизительно вот так:

Сохраните шаблон и посмотрите на домашнюю страницу, она должна выглядет следующий вид:

Фантастика! Вы видите, что наше предыдущее меню, которое имело несколько пунктов, теперь заменено простым меню с одним лишь пунтктом – Home. Это говорит нам, что Wayfinder работает так как нужно и берет одну страницу из нашего сайта и выводит ее название в виде пункта меню.

Давайте создадим еще парочку ресурсов. Я собираюсь добавить страницу About с 3 дочерними страницами (MODx, страницы Tutorials, Contact и FAQ). Вы можете создать какие угодно ресурсы или страницы для вашего сайта. Цель этого упражнения – создать несколько ресурсов, чтобы Wayfinder‘у было что отображать.

Я закончил с созданием страниц и мое дерево ресурсов сайта выглядит вот так:

Теперь у нас есть несколько страниц, посмотрим как вызов Wayfinder‘а сгенерирует меню для нашего сайта:

Хорошей новостью является то, что все наши страницы появились в меню и нажимая на каждый пункт меню мы попадаем на соответствующую страницу. (Для тестирования этого элемента добавте какой-нибудь текст в каждую страницу, например на страницу About можете добавить “Это страница About” и эта сообщение появится при открытии страницы. Помните, что нам необходимо определять шаблон для каждой страницы, но в данный момент я не собираюсь об этом беспокоится).

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

• Home
• About
  • MODx CMS
  • The Coding Pad
    • The Blog
    • The Services
• Contact Us
• Tutorials
• FAQ

Как вы видите это выглядит очень похоже на наш начальный статичный код за некоторым исключением. Во-первых, Wayfinder сгенерировал

пункт без класса sf-menu который применялся в нашем статичном коде. Шаблону необходим этот класс для работы с CSS. Также видно, что
• пункты имеют параметр span , который относится к элементам текста ссылки в оригинальном статическом коде и его нет в сгенерированом Wayfinder‘ом коде. В дополнение, наш статический HTML код имеет класс acurrent-page-item , который не представлен в нашем коде сниппета Wayfinder. Все эти пропавшие куски делают вид нашего меню неприглядным.

  Как настроить стиль вывода сниппета Wayfinder

  Смотря на то, как Wayfinder генерирует код, у нас возникает вполне естественный вопрос: «Как нам добавить недостающие куски кода, чтобы мы хотели вывести меню в нужном для нас виде?» Ответ – очень легко, мы используем чанки шаблона для форматирования вывода сниппета Wayfinder.

  Wayfinder гибкий инструмент и при помощи параметров можно определить внешний вид вывода. Некоторые общие параметры позволяют вам определить с какого уровня начинать построение меню, какие пункты не включать в меню и т.д. Другие параметры – это параметры шаблона, которые позволяют вам задать html код шаблона для вашего меню и др. Описания последних можно найти в официальной документации –http://rtfm.modx.com/display/ADDON/Wayfinder.

  Возьмите на заметку: некоторые параметры Wayfinder имеют значение по умолчанию.

  Это об]ясняет, например, почему в сгенерированном Wayfinder меню, пункт страницы Home имеет название класса “first active ”. Это класс по-умолчанию, но мы можем перезаписать его обозначив собственные классы в чанках шаблона.

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

  Для начала работы над шаблоном меню давайте создадим несколько минишаблонов и сохраним их в чанках. Вы увидите, что в этих чанках мы используем код HTML, но заменяем динамические элементы заполнителями (или плейсхолдерами как их еще называют) синтаксис которых выглядит так:[[+placeholder]] . Заполнители, которые мы используем являются особенными в сниппете Wayfinder и их определение очевидно из названия, но вы всегда можете обратиться в документацию MODx за более полной справкой.

  

  Вот чанки, которые я буду использовать для создания нашего шаблона:

  7in1menuOuter – будет содержать HTML код для нашего внешнего ul контейнера.

  [[+wf.wrapper]]

  Вы видите, что я добавил класс для внешнего ul. Альтернативным способом сделать это является использование wf.classes заполнителя и далее добавить имя класса к текущему вызову wayfinder используя параметр outerClass . Но для простоты давайте будем использовать первый способ, но оба из них будут работать нормально…

  7in1menuRow – будет содержать HTML код пунктов меню первого уровня

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

Главной мыслью тут является та, что я добавил тег к тексту ссылки меню как в оригинальном статичном HTML коде. Я также включил wf.classes заполнитель и это позволит мне определить класс для текущей страницы, который перезапишет класс “active”, который стоит у нас по-умолчанию.

7in1menuInner – будет содержать HTML код внутренних ul контейнеров

[[+wf.wrapper]]

7in1menuInnerRow – будет содержать HTML код для строчек пунктов внутренних уровней

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

Всё, теперь наши чанки шаблона на месте, как вы видите (для порядка, я поместил их в отдельную категорию) :



Теперь мы можем изменить вызов Wayfinder, таким образом мы можем использовать эти мини шаблоны для вывода Wayfinder. Если вы взгляните на список параметров шаблонизации (было бы полезно иметь перед глазами http://rtfm.modx.com/display/ADDON/Wayfinder открытым либо же распечатать и держать возле экрана), вы увидите, что я называл мои чанки похожими на соответсвующие параметры вызова сниппета. Это я сделал для удобства, это помогает мне отслеживать что к чему, когда я начинаю конструировать мой вызов. Давайте добавим параметры и вызовем наши чанки. Вызов Wayfinder теперь будет иметь вид:

[[!Wayfinder? &startId=`0` &outerTpl=`7in1menuOuter` &rowTpl=`7in1menuRow` &innerTpl=`7in1menuInner` &innerRowTpl=`7in1InnerRow` &hereClass=`current_page_item` &firstClass=`` &lastClass =`` ]]

Значение параметров помещается в апострофы (`), а не в одинарные кавычки (’).

Отлично, давайте взглянем на этот вызов. Вы видите, что мы используем параметры шаблонизации для вызова наших чанков так, что Wayfinder выводит нужный нам HTML с корректными классами. Я определил вызываемый hereClass параметр и дал ему значение current_page_item , чтобы он соответствовал статическому HTML шаблону. Можно заметить, что я оставил параметры firstClass и lastClass пустыми. Причиной этого является то, что мой HTML шаблон не устанавливает класс для первого и последнего пункта меню, поэтому чтобы избежать накладок я перезаписал в них пустые строки.



Видно, что наше меню выглядит именно так, как мы хотели. Правильные стили используются в выпадающем меню. Если вы посмотрите на исходный код, то увидите, что сгенерированный Wayfinder ‘ом HTML код изменился до неузнаваемости:

• Home
• About
  • MODx CMS
  • The Coding Pad
    • The Blog
    • The Services
• Contact Us
• Tutorials
• FAQ

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

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

Сегодня мы сделаем меню для нашего блога с помощью сниппета Wayfinder (документацию по сниппету Wayfinder). Верхняя навигация и главная у нас на блоге состоит из двух частей:

• Мобильная
• Обычная

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

&outerTpl=` wayOuterTpl` - чанк обертка основного списка

[ [+wf.wrapper] ]

&innerTpl=` wayInnerTpl` - чанк обертка выпадающего списка

[ [+wf.wrapper] ]

&rowTpl=` wayRowTpl`- чанк вывод элементов списка

• [ [+wf.linktext] ]

&parentRowTpl=`wayHasChildTpl` - чанк вывод элементов списка-родителей

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

И привожу вызов сниппета в чанке header:

[ ]

&startId=`0` - задаем начало прохода сниппета, в нашем случае от корня сайта.
&level=`2` - количество уровней в нашем меню.

Следующий шаг – вывод нашего мобильного меню. Принцип подобный тому, что я выше изложил, здесь нам тоже понадобится 4 чанка.

&outerTpl=`wayOuterMobileTpl` - чанк обертка основного списка.

[ [+wf.wrapper] ]

&innerTpl=`wayInnerMobileTpl` - чанк обертка внутреннего списка.

[ [+wf.wrapper] ]

&rowTpl=`wayRowMobileTpl` - чанк вывод элементов списка.

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

&innerRowTpl=`wayInnerRowMobileTpl` - чанк вывод элементов внутреннего списка.

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

Вызов Wayfinder примет следующий вид:

[ ]

Все тоже самое, только изменились чанки. Теперь у нас есть мобильная навигация, проверить ее можете с помощью инструмента Responsive Web Design Tester для Opera и Chrome.

Привожу полный код чанка header:


Big Things... Small Packages
[ ]
[ ]

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

Вы можете изменить верхнее меню панели управления 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 (и еще пользователей с этой политикой доступа). Если вы зайдете в панель управления как один из редакторов сайта, подпункт "Управление пользователями" должен отсутствовать.

Назад

Вперёд

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

Создавать динамическое меню в 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 код выглядит так:

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

` &tplInner=`@INLINE

[[+wrapper]]

` &tplStart=`@INLINE [[+menutitle]][[+wrapper]]` ]]