Урок MODx Revolution для начинающих. Использование Wayfinder для создания меню

В этом уроке мы воспользуемся шаблоном 7 in 1 Business Success Site Theme купленного на ThemeForest, конечно вы можете использовать любой другой шаблон, на свое усмотрение. В этой статье мы посмотрим на конкретный компонент - Wayfinder и при помощи него добавим на наш сайт динамическое меню.

Что такое Wayfinder?

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

Почему выбрали Wayfinder?

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

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

Как используется Wayfinder?

Все фрагменты вызываются с помощью синтаксиса:

[[!snippetName]]

Однако, для некоторых фрагментов, этого вызова недостаточно, и мы должны определить отдельные свойства для работы c фрагментами. В случае с Wayfinder мы должны определить как минимум в каком дереве Wayfinder должен получать список ресурсов. Поэтому даже минимальный вызов Wayfinder нуждается по крайней мере в одном параметре - начальный ID. Главный вызов Wayfinder будет выглядеть следующим образом:

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

Этот вызов Wayfinder начинается в корне дерева (ID=0 обозначает корень сайта) и отображает ил скрывает все ресурсы, при нажатии соотвествующего чекбокса.

modx revolution

В теории всё конечно просто. Давайте посмотрим, что же будет на практике.

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

wayfinder меню

Ниже представлен код, который генерирует данное меню в нашем шаблоне:

<div class="clear"></div>
<div id="dropdown-holder" class="grid_16">
<div class="nav_bg pngfix">

<ul class="sf-menu">
  <li class="current_page_item"><a href="/index.html"><span>Home</span></a></li>
  <li><a href="/about.html"><span>About</span></a>
       <ul>
      <li><a href="#"><span>History</span></a></li>
      <li><a href="#"><span>Our Team</span></a></li>
      <li><a href="#"><span>Employment</span></a>
          <ul>
                <li><a href="#"><span>Internal Staffing</span></a></li>
                <li><a href="#"><span>Consulting</span></a></li>
                <li><a href="#"><span>Child Item</span></a></li>
                <li><a href="#"><span>Child Item</span></a></li>
             </ul>
      </li>
          <li><a href="#"><span>Our Company</span></a></li>
       </ul>
     </li>
  <li><a href="/portfolio.html"><span>Portfolio</span></a></li>
  <li><a href="/features.html"><span>Features</span></a>
      <ul>
     <li><a href="/preset-styles.html"><span>Preset Styles</span></a></li>
     <li><a href="/full-width.html"><span>Full-width Page</span></a></li>
    <li><a href="/help-prettyPhoto.html"><span>Help with prettyPhoto</span></a></li>
     </ul>
    </li>
 <li><a href="/typography.html"><span>Typography</span></a></li>
 <li><a href="/blog.html"><span>Blog</span></a></li>
 <li><a href="/contact.php"><span>Contact</span></a></li>
</ul>

</div>
</div>
<!-- конец выпадающего меню -->
<div class="clear"></div>

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

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

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

<div class="clear"></div>
<div id="dropdown-holder" class="grid_16">
<div class="nav_bg pngfix">

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

</div>
</div>
<!-- конец выпадающего меню -->
<div class="clear"></div>

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

modx wayfinder

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

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

Чтобы создать дочерний фрагмент, необходимо правой кнопкой мыши щелкнуть на фрагмент, который необходимо использовать в качестве родителя, затем выбрать Create Document Here.

wayfinder parent

После создания дерева страниц сайта, меню выглядит следующим образом:

modx menu

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

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

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

<ul>
<li class="first active"><a href="http://learnmodxrevolution.maryspad.com/" title="Home">Home</a></li>
<li><a href="/html?id=2" title="About">About</a>
  <ul>
   <li class="first"><a href="/html?id=3" title="MODx CMS">MODx CMS</a></li>
   <li class="last"><a href="/html?id=4" title="The Coding Pad">The Coding Pad</a>
     <ul>
       <li class="first"><a href="/html?id=5" title="The Coding Pad Blog">The Blog</a></li>
       <li class="last"><a href="/html?id=6" title="Coding Pad Services">The Services</a></li>
    </ul>
   </li>
  </ul>
</li><li><a href="/html?id=7" title="Contact">Contact Us</a></li>
<li><a href="/html?id=8" title="Tutorials">Tutorials</a></li>
<li class="last"><a href="/html?id=9" title="Frequently Asked Questions">FAQ</a></li>
</ul>

Обратите внимание что этот код похож на начальный, статичный код, но с небольшими изменениями. Во-первых, Wayfinder генерирует <ul> без класса sf-menu. Данный класс нужен для шаблона, чтобы в дальнейшем работать с ним в CSS.

Стиль для Wayfinder

Код Wayfinder генерируется динамически, возникает вопрос, как же добавить недостающие части меню? Это достаточно просто, используя готовые блоки шаблона, мы модифицируем меню до конечного вида Wayfinder.

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

Обратите внимание, что некоторые параметры Wayfinder имеют значения по умолчанию, и если вы специально не назначаете эти параметры, Wayfinder задает их афтоматически. Это объясняет, почему Wayfinder при генерирации меню, присваивает главной странице класс first active. Это стандартные классы, но мы можем изменить их, указав наши собственные классы для данного шаблона.

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

Для создания меню под свой шаблон, сначала создадим несколько мини шаблонов и сохраним эти части. В последующем мы будем использовать HTML код в этих шаблонах, но при этом, заменяем динамические элементы, которые используют синтаксис [[+ placeholdername]]. Shortcodes, которые мы здесь используем, очень специфичны для Wayfinder. Их назначение достаточно очевидно исходя из названия, но вы также можете найти их описание в документации к MODx.

Начнем создавать отдельные блоки для нашего шаблона:

7in1menuOuter - будет содержать HTML код нашего внешнего контейнера:

<ul class="sf-menu">[[+wf.wrapper]]</ul>

Вы можете заметить, что я добавил класс к внешнему контейнеру, благодаря шорткоду wf.classes, а затем добавил имя класса с вызовом параметра Wayfinder OuterClass.

7in1menuRow – будет содержать HTML код для первой строки элементов:

<li [[+wf.classes]]><a href="/[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]><span>[[+wf.linktext]]</span></a>[[+wf.wrapper]]</li>

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

7in1menuInner - будет содержать HTML код внутреннего контейнера:

<ul>[[+wf.wrapper]]</ul>

7in1menuInnerRow - будет cjдержать HTML код для строк пунктов на внутренних уровнях:

<li [[+wf.classes]]><a href="/[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]><span>[[+wf.linktext]]</span></a>[[+wf.wrapper]]</li>

Снова добавляем тег <span> и включаем wf.classes.

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

wayfinder категории

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

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

Обратите внимание, что значения параметров должны быть заключены внутри тильды (`), а не в одинарных кавычках (').

Хорошо, давайте взглянем на получившийся вызов. Обратите внимание, что мы используем параметры шаблона для вызова отдельных блоков, чтобы в Wayfinder выводил нужную HTML разметку, к тому же с правильным применением классов. Для параметра hereClass зададим значение current_page_item, чтобы соответствовать статичному HTML шаблону. Также для параметра FIRSTCLASS зададим значение lastClass, чтобы его очистить. Это необходимо для того, чтобы наш HTML шаблон не задавал классы в первом или последнем пункте меню, для этого и задаются значения по умолчанию Wayfinder, чтобы не перепутать, я поставил их в пустые строки.

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

modx меню

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

<ul class="sf-menu">
  <li class="current_page_item"><a href="http://learnmodxrevolution.maryspad.com/" title="Home"><span>Home</span></a></li>
  <li><a href="/html?id=2" title="About"><span>About</span></a>
    <ul>
      <li><a href="/html?id=3" title="MODx CMS"><span>MODx CMS</span></a></li>
      <li><a href="/html?id=4" title="The Coding Pad"><span>The Coding Pad</span></a>
        <ul>
          <li><a href="/html?id=5" title="The Coding Pad Blog"><span>The Blog</span></a></li>
          <li><a href="/html?id=6" title="Coding Pad Services"><span>The Services</span></a></li>
       </ul>
     </li>
    </ul>
  </li>
  <li><a href="/html?id=7" title="Contact"><span>Contact Us</span></a></li>
  <li><a href="/html?id=8" title="Tutorials"><span>Tutorials</span></a></li>
  <li><a href="/html?id=9" title="Frequently Asked Questions"><span>FAQ</span></a></li>
</ul>

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

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

Домашнее задание, для забавы

Используйте полученные знания и попробуйте разработать выпадающие меню для своего шаблона. Не бойтесь экспериментироватать.

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

Перевод статьи MODx Revolution for Complete Beginners Part 8 – Using Wayfinder to Create Menus

Тэги: CMSModXWayfinder

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.