Урок 6 - Сниппеты MODx
Прежде чем приступить к дальнейшей работе над нашим первым сайтом на MODx, необходимо познакомиться еще с одной специфической для нашего движка терминологией – сниппет.
Сниппет – это кусок PHP кода, который мы можем вызвать из шаблона сайта или чанка, с помощью специальной конструкции .
По умолчанию при установке CMS устанавливается некоторые из сниппетов MODx, которые необходимы для первоначальной работы. Чтобы просмотреть эти сниппеты перейдите по вкладкам «Элементы»-«Управление элементами»-«Сниппеты»:
Все сниппеты разбиты на логические группы:
- Группа «Content» - отвечает за вывод контента.
- Группа «Forms» - отвечает за работу с сайтом.
- Группа «Login» - отвечает за работу с пользователями, авторизацию и персонализацию.
- Группа «Navigation» - отвечает за работу с навигацией.
- Группа «Search» - отвечает за поиск по сайту.
Если вы будете создавать свои собственные сниппеты, я рекомендую вам создать свою отдельную категорию, чтобы не создавать путаницу.
Вызов сниппета осуществляется по имени, дополнительно в вызове сниппета могут быть переданы дополнительные параметры, при этом после имени сниппета должен следовать знак «?», а имя каждого параметра должно начинаться со знака «&», значение параметра передается в скобках «``» (на клавиатуре буква ё). Сниппет может вызываться кэшируемым или некэшируемым.
К примеру, если сниппет называется Test и имеет два параметра parma1 и param2:
[ !Test? ¶m1=`param1` ¶m2=`param2`! ]
Кэшируемый вызов сниппета:
[ [Test? ¶m1=`param1` ¶m2=`param2`] ]
При кэшируемом вызове результаты работы сниппета записываются в кэш и при последующем вызове достаются из кэша, в результате снижая нагрузку на сервер.
Теперь вы знаете, что такое сниппеты MODx и настало время для практического его применения.
Реализация динамического меню сайта с помощью сниппета Wayfinder
Если посмотреть в шаблоне, то мы увидим, что наше меню представляет собой ненумерованный список, каждый пункт меню представляет собой элемент списка следующего вида:
<li><a href="about" title="О компании">О компании</a></li>
Сниппет Wayfinder при вызове его в шаблоне динамически генерирует точно такой же код.
Теперь давайте в перейдем к редактированию созданного нами чанка «HEADER», в который как вы помните из прошлых уроков мы вынесли всю шапку сайта вместе с основным меню. Замените кусок HTML кода отвечающего за вывод меню сайта (от начала списка тега ul и до конца списка закрывающего тега /ul) на следующую конструкцию:
[ !Wаyfinder? &startId=`0` &level=`1`! ]
Сохраните чанк и обновите главную страницу нашего сайта. Если вы все сделали правильно у вас ничего не должно измениться. Если посмотреть код, то вы увидите что сниппет Wayfinder генерирует класс active для активного элемента списка.
<li class="active"><a href="http://modx-evo.ru/" title="Главная">Главная</a></li>
Таким образом, нам даже ничего не пришлось править в стилях нашего сайта, однако бывают случаи, когда в шаблоне активный элемент отмечен другим классом, к примеру, current. В таких случаях приходится дополнительно править стили css для нашего шаблона.
А теперь поподробнее о вызове сниппета Wayfinder.
Вы обратили внимание, что в вызове я передал сниппету два параметра:
startId=`0` - указывает на родительский ресурс, источник ресурсов для меню (так как мы создали структуру, где все наши ресурсы лежат в корне я указал значение параметра равным 0);
level=`1` - указывает на глубину вывода ресурсов (так как у нас не будет выпадающего меню, я указал глубину вложенности равной 1, этого можно и не делать, но чтобы вы разобрались с параметрами сниппетов я это сделал).
Если вы обратили внимание, то вызов сниппета находится между тегами:
div id="topnav"
и закрывающим
/div
Вы можете скопировать вызов сниппета вместе с этими тегами и вынести его в отдельный чанк с названием MAINMENU и заменить конструкцию в чанке HEADER на вызов чанка MAINMENU.
Как это делается я писал в уроке – чанки modx.
В рамках данного урока вы получили динамическое меню:
У меня оно немного отличается, поскольку я поправил стили под свои нужды.
На этом наш урок закончен, в следующем уроке мы будем двигаться дальше, продолжим работу с нашей главной странице, познакомимся с еще одним сниппетом AjaxSearch и реализуем поиск по сайту.
Скачать файлы урока.
Будь в курсе!
Введите Ваш Email и имя.
Чтобы отписаться нажмите сюда ».