Инструкция по созданию сайта на MODx. Урок 7 — Реализация динамического меню

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

В этом уроке мы создадим главное меню сайта. В MODx есть встроенное решение, для организации динамических меню на сайте — делается это с помощью сниппета Wayfinder. Ах да, совсем забыл. Я же не рассказал вам еще об одном основополагающем термине MODx. Этот термин «сниппет».

Сниппет — это PHP код, который мы можем вызывать из шаблона сайта. Результат работы сниппета вставляется в место вызова. Чтобы посмотреть список сниппетов, которые идут в комплекте MODx по умолчанию, проследуйте по вкладкам в администраторской панели:Элементы → Управление элементами → Сниппеты. Все они доступны для редактирования. Но пока вы не разберетесь что к чему, советую ничего не редактировать. Для чего же нужны эти самые сниппеты? А нужны они для обеспечения динамической логики на сайте. Например, для генерации динамических меню, вывода контента из базы данных по некоему условию, организации формы обратной связи, вообще, для любых действий, доступных через MODx API. Сейчас на примере вы все поймете.

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

[!Name!]

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

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

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

Обратите внимание на вопросительный знак после имени сниппета, он говорит о том, что далее следуют объявление передаваемых параметров. Названию каждого передаваемого параметра предшествует знак «&», а его значение заключено в обратные одинарные кавычки. Это те кавычки, которые на русской клавиатуре добавляются нажатием клавиши с буквой «Ё». Не перепутайте, один неверный знак, и вы долго будете мучиться и разбираться, почему ничего не работает.

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

[[Name]]

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

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

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

то, если мы вызовем на главной странице сниппет

[!Wayfinder!]

результатом его работы будет список из 4 ссылок на дочерние страницы. Список будет иметь вид:

<ul>
   <li><a href="/about.html" title="О нас" >О нас</a></li>
   <li><a href="/contact.html" title="Контактная информация" >Контактная информация</a></li>
   <li><a href="/novosti.html" title="Новости" >Новости</a></li>
   <li class="last"><a href="/uslugi.html" title="Услуги" >Услуги</a></li>
</ul>  

Внимание: при таком вызове обязательно наличие дочерних элементов, ведь если их не будет, то сниппет не выведет ничего. Нам этот вызов не подходит для организации меню на сайте, так как главное меню мы хотим видеть не только на главной, но так же и на всех дочерних страницах сайта. При этом, мы хотим, чтобы меню на всех страницах состояло из одних и тех же пунктов. Для того чтобы это сделать, мы вызываем сниппет Wayfinder и одновременно передаем ему параметр startId, в который записываем ID того документа, ссылки на дочерние страницы которого мы будем выводить. Напомню, что ID документа это цифра, указанная в скобках в дереве документов MODx.

Вызов будет выглядеть следующим образом:

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

В этом случае на какой бы странице мы не вызывали сниппет Wayfinder, список будет формироваться из ссылок на дочерние элементы главной страницы (ID=1), а не той, на которой мы сделали вызов.

Сейчас давайте посмотрим, что же представляет из себя главное меню сайта в нашем шаблоне. Если вы помните меню у нас хранится в одном чанке с логотипом под названием HEADER. И что мы видим?

 <div id="topnav">
      <ul>
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="style-demo.html">Style Demo</a></li>
        <li><a href="full-width.html">Full Width</a></li>
        <li><a href="#">DropDown</a>
          <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
          </ul>
        </li>
        <li class="last"><a href="#">A Long Link Text</a></li>
      </ul>
    </div>

Меню представляет из себя обычный ненумерованный список, помещенный в контейнер с id="topnav". Это значит, что HTML разметка меню будет представлять из себя обычный список, а всю задачу по внешнему виду берет на себя CSS файл, который мы подключали ранее. Но мы с вами уже в курсе, как можно этот ненумерованный список динамически вывести в MODx. Поэтому удаляем из чанка HEADER вот этот код

 <ul>
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="style-demo.html">Style Demo</a></li>
        <li><a href="full-width.html">Full Width</a></li>
        <li><a href="#">DropDown</a>
          <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
          </ul>
        </li>
        <li class="last"><a href="#">A Long Link Text</a></li>
      </ul>

А на его месте вызываем сниппет Wayfinder с передаваемым ему параметром startId=`1`.

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

Вызов сниппета должен находиться в контейнере с  id="topnav" для того, чтобы наше динамическое меню в итоге отображалось так же, как указано в шаблоне. После сохранения можете посмотреть, что у вас получилось. На вкладке Сайт → Предпросмотр.

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

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

Давайте посмотрим на исходный код получившегося главного меню:

<div id="topnav">

<ul>
  <li class="active"><a href="/about.html" title="О нас" >О нас</a></li>
  <li><a href="/contact.html" title="Контактная информация" >Контактная информация</a></li>
  <li><a href="/novosti.html" title="Новости" >Новости</a></li>
  <li class="last"><a href="/uslugi.html" title="Услуги" >Услуги</a></li>
</ul>  

</div>

Обратите внимание, что сниппет Wayfinder автоматически генерирует класс для активного пункта меню class="active" и его название даже совпало с прописанным в нашем случае в CSS классом "active". Поэтому при переходе по меню, активный пункт у нас подсвечивается зеленым цветом, так как и было изначально в шаблоне.

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

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

Чтобы это сделать заходим на страницу редактирования ресурсов и в поле «Папка» указываем название сайта, в нашем случае это «Мой бизнес» т.е. документ с ID=0. Посмотреть как это делал я, можно в видео к этому уроку.

Может быть, надо было сразу создавать такую структуру, но зато вы отработаете процесс изменения родительских документов для ресурсов и лучше поймете, как работает вывод Wayfinder. И так, после того, как вы изменили структуру документов, нам нужно изменить значение параметра startId. Сейчас в него записан ID ресурса «Главная страница», т.е. сниппет будет пытаться вывести дочерние документы этой страницы, которых, как мы видим, уже нет. Результатом работы сниппета будет пустота. Можете сами в этом убедиться: при просмотре сайта в браузере меню отображаться не будет.

Для того чтобы меню отображалось, мы в startId записываем идентификатор самой корневой папки. Он всегда будет равен «0». Делаем это, как и в прошлый раз в чанке HEADER:

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

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

И так, чтобы меню не сползало под логотип нам нужно изменить длину одного или двух пунктов меню. В нашем случае лучше всего вместо названия пункта «Главная страница» написать просто «Главная». Это можно сделать не изменяя название самого ресурса. Просто идем на страницу редактирования ресурса с именем «Главная страница» и в поле «Пункт меню» вписываем короткое название нашего пункта — «Главная».

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

Вот теперь у нас уже есть готовое главное меню, с помощью которого мы можем переходить по страницам, созданным в дереве документов MODx.

Для того, чтобы познакомить вас с работой сниппета Wayfinder более подробно, давайте разберем еще парочку примеров.

Что вам чаще всего может пригодиться при работе с меню? Конечно же его сортировка. Допустим, вам хочется чтобы пункты меню располагались в следующем порядке: «Главная», «О нас», «Услуги», «Контактная информация» и в конце «Новости». По умолчанию выставлена сортировка по параметру menuindex, который вы устанавливаете при редактировании ресурсов в поле «Позиция в меню».

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

«Главная» — 0, «О нас» — 1, «Услуги» —2, «Контактная информация» — 3 и в конце «Новости» — 4.

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

После этого в дереве документов название ресурса «Новости» будет светло-серого цвета.

На этом, собственно, организация меню окончена. Мы научились выводить динамическое меню в MODx c помощью встроенного сниппета Wayfinder. При этом вы уже на практике попробовали отсортировать пункты меню и убирать из показа в меню выборочные пункты.

Единственное, что еще хочется посоветовать, это вынести главное меню в отдельный чанк. Для этого создайте чанк MAIN-MENU и в его содержимое вставьте конструкцию вызова сниппета, обрамленную контейнером <div id="topnav">

А после этого в чанке HEADER, где до этого находился вызов меню, вместо контейнера  <div id="topnav"> с его содержимым вставьте вызов чанка MAIN-MENU.

Подробнее о разбиение на чанки написано в 5 уроке, если пропустили, можете почитать.

Видео по организации динамического меню в MODx c помощью Wayfinder 

Вы можете посмотреть видео урок, в котором показывается процесс создания меню на MODx. Я буду проделывать все описанные выше действия. Если что-нибудь не уловили — смотрите и разбирайтесь.

Автор: Ефимов Виктор

Вы можете также посмотреть другие уроки по созданию сайта на MODx: