Главная » MODx Evolution » Урок 4. Создаем динамическое меню на MODx

Урок 4. Создаем динамическое меню на MODx

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

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

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

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

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

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

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

[!SNIPNAME!]

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

[[SNIPNAME]]

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

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

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

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

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

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

[!Wayfinder!]

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

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

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

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

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

<a href="#" class="nav-btn">HOME<span></span></a>
				<ul>
					<li class="active"><a href="#">home</a></li>
					<li><a href="#">about us</a></li>
					<li><a href="#">services</a></li>
					<li><a href="#">projects</a></li>
					<li><a href="#">solutions</a></li>
					<li><a href="#">jobs</a></li>
					<li><a href="#">blog</a></li>
					<li><a href="#">contacts</a></li>
				</ul>

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

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

menu1

Жмем «Сохранить» и идем на сайт и смотрим на результат.

menu2

Как видите, меню подключилось, в адресной строке меняется 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».

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

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

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

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

menu3

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

menu4

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

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

menu5

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

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

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

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

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

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

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

menu7

Вот, что у вас должно получится.

menu6

На этом сегодня все. Если будут вопросы, пишите их в комментариях, я постараюсь на них ответить. До следующих уроков.

2 комментария

  1. Не работает этот сниппет. Версия модх 1.1

  2. Доброго дня. Сейчас тренируюсь в изучении modx по вашим статьями. Подопытный — мой сайт:) Спасибо за понятные уроки. У меня вопрос по поводу вывода меню. Если раньше отображался путь к внутренним страницам: /assets/templates/artsmm/, то сейчас просто index/страница, но саму страницу не находит. Возможно я что-то не подключил?)
    Спасибо

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *