Контакты | E-mail: info@modx-evo.ru | Заказать обратный звонок



Урок 6 - Сниппеты MODx

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

Сниппет – это кусок PHP кода, который мы можем вызвать из шаблона сайта или чанка, с помощью специальной конструкции .

По умолчанию при установке CMS устанавливается некоторые из сниппетов MODx, которые необходимы для первоначальной работы. Чтобы просмотреть эти сниппеты перейдите по вкладкам «Элементы»-«Управление элементами»-«Сниппеты»:

modx сниппеты

Все сниппеты разбиты на логические группы:

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

Вызов сниппета осуществляется по имени, дополнительно в вызове сниппета могут быть переданы дополнительные параметры, при этом после имени сниппета должен следовать знак «?», а имя каждого параметра должно начинаться со знака «&», значение параметра передается в скобках «``» (на клавиатуре буква ё). Сниппет может вызываться кэшируемым или некэшируемым.

К примеру, если сниппет называется Test и имеет два параметра parma1 и param2:

[ !Test? &param1=`param1` &param2=`param2`! ]

Кэшируемый вызов сниппета:

[ [Test? &param1=`param1` &param2=`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.

В рамках данного урока вы получили динамическое меню:

сниппеты modx

У меня оно немного отличается, поскольку я поправил стили под свои нужды.

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

Скачать файлы урока.


Просмотров: 3339


Статьи по теме:


Написать комментарий

Поля помеченные * обязательны для заполнения.



Будь в курсе!

Введите Ваш Email и имя.

Digital Newsletter

Чтобы отписаться нажмите сюда ».