Меню
Бесплатно
Регистрация
Главная  /  Программы  /  Многоуровневое MODX меню с использованием Bootstrap. PdoMenu — создание меню в MODX Modx меню на определенных страницах

Многоуровневое MODX меню с использованием Bootstrap. PdoMenu — создание меню в MODX Modx меню на определенных страницах

Сегодня мы сделаем меню для нашего блога с помощью сниппета 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` - чанк обертка основного списка.

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

    [ [+wf.wrapper] ]

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

    [ [+wf.wrapper] ]

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

    [ [+wf.wrapper] ]

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

    [ ]

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

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

    [ ]
    [ ]

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

    Начинаем 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 сгенерировал