Lecaw

Учимся создавать Web-сайты

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

July 5, 2013 498hits

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

 

Что такое Wayfinder?

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

Почему используется Wayfinder?

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

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

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

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

[[!snippetName]]

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

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

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

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

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

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

<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="#"><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>

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

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

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

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

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

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

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

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

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

Как Вы можете заметить этот код похож на начальный статический код, но с небольшими исключениями. Во-первых, наш Wayfinder генерируется <ul> компоненту отсутствующий класс SF-меню, который применялся в статическом коде. Данный класс нужен для шаблона, чтобы в дальнейшем работать с ним в CSS. Вы также заметите, что <li> элементы применятся к элементу текста ссылки в оригинальном статическом коде, которого нет в нашем Wayfinder сгенерированного кода. Кроме того, статический HTML код имеет текущий элемент класса страницы, который не присутствует в нашем Wayfinder коде. Все эти недостающие элементы заставляют наше меню выглядеть так, как мы этого захотим.

Задаем стиль для Wayfinder

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

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

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

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

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

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

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

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

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

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

<li [[+wf.classes]]><a href="#" 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="#" 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, обновите главную страницу, чтобы посмотреть, как теперь выглядит наше меню:

Теперь наше меню преобретает вид, который мы и хотели! Применяется правильный стиль и наши выпадающие меню работают так, как должны. Если просмотреть исходный код страницы, Вы заметите, что 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="/index.php/html/2" title="About"><span>About</span></a>
    <ul>
      <li><a href="/index.php/html/3" title="MODx CMS"><span>MODx CMS</span></a></li>
      <li><a href="/index.php/html/4" title="The Coding Pad"><span>The Coding Pad</span></a>
        <ul>
          <li><a href="/index.php/html/5" title="The Coding Pad Blog"><span>The Blog</span></a></li>
          <li><a href="/index.php/html/6" title="Coding Pad Services"><span>The Services</span></a></li>
       </ul>
     </li>
    </ul>
  </li>
  <li><a href="/index.php/html/7" title="Contact"><span>Contact Us</span></a></li>
  <li><a href="/index.php/html/8" title="Tutorials"><span>Tutorials</span></a></li>
  <li><a href="#" title="Frequently Asked Questions"><span>FAQ</span></a></li>
</ul>

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

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

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

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

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

 

Дополнительная информация

Роман Воеводин

Воеводин Роман - дизайнер, модератор, соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(1 Голосовать)

1 Комментарий

Оставить комментарий