Хозяину на заметку
30 Ноября 2020
Хочу научиться делать сайты! Часть 8 ModX Evolution - cоздание навигации по сайту с помощью сниппета Wayfinder

Хочу научиться делать сайты! Часть 8 ModX Evolution - cоздание навигации по сайту с помощью сниппета Wayfinder

При создании шаблонов страниц всегда возникает необходимость сделать универсальную для всех страниц функциональность. К этому относится и меню сайта.

Как должно работать меню сайта, с точки зрения программиста? Оно должно автоматически генерироваться исходя из структуры документов и даже если мы создали/написали/добавили новый документ/страницу на сайт, то пункт с названием этого документа должен появиться на сайте автоматически. И тоже самое, если мы решили удалить документ – из меню он должен исчезнуть автоматически, без дополнительных усилий с нашей стороны. В Evolution за это отвечает сниппет Wayfinder.

Сниппет – новое и непонятное слово, но его нужно запомнить. Говоря простым языком – сниппет это небольшая подпрограмма, написанная/созданная специально для Evolution которая способна выполнять некоторый стандартный набор действия. Каждый сниппет направлен на выполнения определённого круга задач, т.е. узко специфичен, но при этом может иметь очень большое количество различных параметров, которые задаются специальным образом и используя эти параметр сниппет выполняет свою работу. Параметры в каждом шаблоне или сайте могут быть абсолютно разные, но сниппет везде один и тот же. В Evolution существует несколько базовых сниппетов, а точнее всего 3. Первый генерит элементы навигации по сайту – меню (Wayfinder), второй делает «хлебные крошки», так же облегчающий навигацию и последний, самый важный – выводит контент.

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

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

ModX Evolution - Заполняем заголовки

Теперь установим сам сниппет Wayfinder и для этого зайдём в репозитарий, где собрано достаточное количество необходимых сниппетов для большинства случаев, которые могут возникнуть в процессе создания сайта. В верхнем меню выбираем «Модули» и далее «Extras».

ModX Evolution - Репозиторий

Вы увидите весь список различных модулей для Evolution которые могут быть установлены в нашу CMS. В верхнем поле «поиска» начните писать Wayfinder и сразу появится то что нужно.

ModX Evolution - Wayfinder

Нажимаем на зелёную кнопку «установить» и через пару секунд нужный сниппет у нас уже установлен. Открывем чанк header (Элементы/чанки) и смотрим код.

ModX Evolution - шаблон header

Выделенный красным блок и является меню нашего сайта. В HTML5 меню заключают в теги <nav> – от слова навигация, и всё что находится внутри <nav> нас и интересует. Там мы можем увидеть ещё несколько HTML тэгов ul, li, a и span. Немного подучим HTML и запомним:

ul – родительский тег для списка (бывает ещё ol), внутри него всегда должен быть li, это сам элемент списка, т.е. выглядит это всё вот так:

<ul>
   <li>что-то раз</li>
   <li>что-то два</li>
   <li>что-то три</li>
</ul>

 

В свою очередь, в нашем случае, внутри элемента списка располагаются ссылки на разделы сайта. Это же меню!. Ссылки в HTML заключаются в тэг <a> у которого есть обязательный атрибут href в котором и содержится сама ссылка. Выглядит это так:

<a href=’www.mysite.com’>Посетите мой сайт</a>

Расшифровывается этот код так: тэг <a> - значит это ссылка, href содержит саму ссылку, в данном случае адрес сайта, а между открывающим тегом <a> и закрывающим </a> написан текст который увидит посетитель сайта.

Как вы понял между текстом, который вы видите и тем куда вы попадёте если ткнёте по ссылке нет ничего общего, т.е. написано может быть «получить миллион» а при клике вы попадёте на сайт или страницу где вам предложат купить слона)).

Последний тэг, который тут есть это <span> – технический тэг который призван дать возможность стилевого оформления некоторых элементов.

Внимательный читатель уже заметил, что теги <ul> могут быть расположены также внутри <li>. Не надо пугаться и путаться – это обычный вложенный список, один внутри другого. Главное не забывать правило: открыл тэг - не забудь его закрыть. Выглядит это так:

<ul>
   <li>что-то раз</li>
   <li> что-то два
      <ul>
         <li>внутри что-то раз</li>
         <li>внутри что-то два</li>
      </ul>
   </li>
   <li>что-то три</li>
</ul>

 

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

ModX Evolution - структура сайта

Даём название вновь созданному документу согласно нашего дизайн макета «Категории». Шаблон для визуального отображения на сайте пока не указываем, т.к. мы его пока не сделали и сохраняем.

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

Теперь создаём все документы внутри «Категории». Вот так это будет выглядеть в админке:

ModX Evolution - создаём структуру

Аналогично добавим структуру и создадим раздел «Посты» и в самом конце добавим «Стили», «О себе» и «Контакты». В итоге мы получим вот такую структуру сайта:

ModX Evolution - установка шаблона

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

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

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

Запустить любой сниппет (а запускается он автоматически при генерации страницы браузером) можно одним из 4-х способов и их комбинациями. Простейший вызов делится на 2 части:

[[Wayfinder]]

Или

[!Wayfinder!]

Разница лишь в том, что в случае с «!» сниппет будет запущен некэшируемый. Что это значит? Кэш – это некая оперативная память у сайта и с одной стороны, как и с обычной памятью у компьютера, кэшированные данные при повторном запросе к ним обрабатываются быстрее, а с другой стороны это повышает требование к ресурсам хостинга где расположен сайт. Таким образом, мы не будем злоупотреблять вызовом кэшированных сниппетов и примем по умолчанию, что вызов сниппета всегда будет обрамлён квадратной скобкой «[» и восклицательным знаком «!»:

[!Название Сниппета!]

Так же сниппет можно вызвать, используя дополнительные параметры (уникальные для каждого сниппета), например, вот так:

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

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

Параметров у различных сниппетов может быть очень много, у некоторых более сотни! Но не стоит пугаться, практически к каждому сниппету есть документация, где описывается название параметра и его возможные значения. Я не буду перечислять все параметры сниппета Wayfinder, а остановлюсь лишь на тех, которые понадобятся нам. А как узнать, что понадобится? – а давайте попробуем запустить сниппет вообще без параметров!

Удаляем весь код, из нашего шаблона, который отвечает за меню и вместо него пишем

[!Wayfinder!]

ModX Evolution - wayfinder

Будьте внимательны, в нашем чанке header в котором находится меню есть два блока <ul> (вложенные в <nav>) со списками пунктов внутри и нам нужен только первый блок, где идут ссылки на страницы. Второй блок отвечает за ссылки на социальные сети и его мы трогать не будем, просто пропишем свои ссылки на свои сети.

Сохраняем наш чанк и пытаемся посмотреть что у нас получилось (открываем наш сайт) и видим что меню вообще пропало. Это значит что наш сниппет не смог сгенерировать меню. Теперь самое время разобраться с необходимыми нам параметрами. Попробуем указать сниппету более конкретно относительно чего генерировать разделы сайта, т.е. укажем ему, что нужно построить список документов начиная прям с корня сайта. За это отвечает параметр «&startId», а корень сайта всегда имеет ID (уникальный идентификатор) 0, т.е. нам нужен параметр &startId=`0`. Так и запишем:

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

И посмотрим что получилось.

ModX Evolution - Wayfinder-

Вау! Меню появилось, хоть и выглядит не так как надо, но оно есть, а значит сниппет работает. Теперь разберёмся почему дочерние пункты нашего меню не скрываются как в оригинальном шаблоне? Ответ прост – за визуальное представление меню, помимо стилевых файлов отвечает ещё и скрипт, именно он плавно открывает и закрывает дочерние пункты. Но как нам это восстановить? Как я уже говорил выше, скрипты позволяют динамически менять HTML код страницы. А чтобы они смогли это сделать им нужно точно указать какой элемент кода нужно изменить. Есть 2 способа указания – через класс элемента или через уникальный id HTML элемента. Это всё относится к HTML и не имеет никакого отношения к Evolution, а мы сейчас занимаемся интеграцией одного в другое!

Если мы ещё раз посмотрим в шаблоне на оригинальный код, который отвечает за меню, то увидим различные классы у различных элементов, например, <ul class="header__nav">. Добавление записи class="header__nav" сообщает браузеру что этот элемент должен быть «украшен» согласно правилу «header__nav», которое в свою очередь описано в стилевом файле. Скрипт, отвечающий за работу меню так же использует эти классы, по-другому ему никак не найти элемент в коде страницы.

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

&outerTpl – шаблон контейнера меню, а значит нужно сделать этот шаблон (по умолчанию он не тот который нам нужен) и там мы должны указать class="header__nav". Приступим и создадим новый чанк с именем wf_outerTpl (здесь и далее я использую в названиях чанков оригинальные параметры и добавляю к ним сокращённое название сниппета):

ModX Evolution - Wayfinder- dsphd с параметрами

Из документации мы узнаем что код этого шаблона вот такой:

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

Где вместо [+wf.classes+] нужно прописать наш класс «header__nav», а [+wf.wrapper+] оставить как есть, т.к. в этом плейсхолдере (новое слово) будет генерироваться вся внутренность нашего меню.

Как вы уже заметили, мы опять делаем новую «матрёшку», но в этот раз для вывода меню и в качестве параметров сниппета подставляем кусочки кода с нужными нам классами. В результате вызов нашего сниппета будет выглядеть уже вот так:

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

И наше меню уже будет выглядеть немного по-другому, но пропали дочерние элементы:

ModX Evolution - Wayfinder- чанки шаблонов

Поскольку мы указали класс только для родительского тега <ul>, а в исходном коде есть классы и для дочерних элементов, то продолжим поиск нужных нам параметров сниппета для указания этих классов:

&parentRowTpl – этот параметр отвечает за вывод пунктов меню внутри которых есть дочерние группы с уже своими пунктами, т.е. список вложенный в другой список и шаблон у этого параметра вот такой:

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

Всё что нам нужно, это лишь прописать свой класс вместо [+wf.classes+]

<li class="has-children"><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>

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

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

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

[!Wayfinder? &startId=`0` &outerTpl=`wf_outerTpl` &parentRowTpl=`wf_parentRowTpl` &innerTpl=`wf_innerTpl`!]

И смотрим как это выглядит вживую на сайте:

ModX Evolution - Wayfinder- вызов со своими шаблонами

Меню для сайта готово. Если пройтись по ссылкам в меню, то вы увидите пустые страницы, т.к. шаблонов отображения для них мы ещё не делали. Так же, немного не аккуратно выглядит первый пункт меню, он очень длинный и мы его укоротим до банального «Главная». Для этого откроем этот документ и в поле «пункт меню» просто впишем «Главная»

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

  • &outerClass - CSS-класс для контейнера меню
  • &innerClass - CSS-класс для подпунктов меню
  • &parentClass - CSS-класс документов-контейнеров

И тогда вызов сниппета был бы таким:

[!Wayfinder? &startId=`0` &outerClass=`header__nav` &parentClass=`has-children` &innerClass=`sub-menu`!]

А результат был бы точно таким же. И последнее, что нам нужно сделать для меню – добавить класс для отображения активного пункта:

&selfClass=`current`

ModX Evolution - Wayfinder- динамическое меню для сайта

Вот теперь всё, как и должно быть. окончательный код чанка header будет вот таким:

<header class="s-header">
            <div class="header__top">
                <div class="header__logo">
                    <a class="site-logo" href="index.html">
                        <img src="images/logo.svg" alt="Homepage">
                    </a>
                </div>
                <div class="header__search">
                    <form role="search" method="get" class="header__search-form" action="#">
                        <label>
                            <span class="hide-content">Search for:</span>
                            <input type="search" class="header__search-field" placeholder="Type Keywords" value="" name="s" title="Search for:" autocomplete="off">
                        </label>
                        <input type="submit" class="header__search-submit" value="Search">
                    </form>
                    <a href="#0" title="Close Search" class="header__search-close">Close</a>
                </div>  <!-- end header__search -->
                <!-- toggles -->
                <a href="#0" class="header__search-trigger"></a>
                <a href="#0" class="header__menu-toggle"><span>Menu</span></a>
            </div> <!-- end header__top -->
            <nav class="header__nav-wrap">
               	[!Wayfinder? &startId=`0` &outerClass=`header__nav` &parentClass=`has-children` &innerClass=`sub-menu` &selfClass=`current`!]
                <ul class="header__social">
                    <li class="ss-facebook">
                        <a href="https://facebook.com/">
                            <span class="screen-reader-text">Facebook</span>
                        </a>
                    </li>
                    <li class="ss-twitter">
                        <a href="#0">
                            <span class="screen-reader-text">Twitter</span>
                        </a>
                    </li>
                    <li class="ss-dribbble">
                        <a href="#0">
                            <span class="screen-reader-text">Dribbble</span>
                        </a>
                    </li>
                    <li class="ss-pinterest">
                        <a href="#0">
                            <span class="screen-reader-text">Behance</span>
                        </a>
                    </li>
                </ul>
            </nav> <!-- end header__nav-wrap -->
</header> <!-- end s-header -->

Я не буду давать ссылки на официальную документацию по Wayfinder, она вся на английском, а русская легко «гуглится».

Ну а дальше мы с вами будем заниматься футером и шаблонами для остальных страниц сайта.

Комментарии (показать/скрыть)

Maxim.Zone

Ещё статьи по теме "Интернет"