Основы движка MODX — чанки, сниппеты и плейсхолдеры
Рассмотрим базовые элементы движка MODX — чанки, сниппеты и плейсхолдеры. Они являются неотъемлемой частью сайтов на этой CMS, поэтому следует четко понимать их отличие и назначение. Посмотрим следующую схему:
Шаблон является базовым элементом в MODX . Это площадка, на которой размещаются остальные элементы. Любая страница сайта (ресурс) обязана быть привязана к одному из шаблонов.
Чанки
Чанк это мини-шаблон для отдельного блока сайта. Например, требуется для разных страниц использовать разные шаблоны, а шапка сайта должна быть одинаковой. В таком случае её лучше вынести в отдельный чанк и подключить его в нужных шаблонах. При необходимости поправить код шапки, не придется редактировать все имеющиеся шаблоны. Достаточно будет поправить один чанк.
Чанки могут быть вложены друг в друга, содержать сниппеты и плейсхолдеры:
Сниппеты в modx revo
Сниппет — это программный код (PHP,SQL,XPDO), в результате выполнения которого возвращается результат (аналог функций в PHP). Чаще всего результатом является html код, но это не обязательно. Например, он может произвести действия с базой данных и при этом ничего не вывести на экран. Вызываться сниппет может в шаблоне, чанке и даже в содержимом ресурса:
[[pdoMenu]]
В примере используется стандартный вариант вызова сниппета с кешированием. В этом режиме при первом обращении к сниппету результат его работы кешируется, а при последующих обращениях — выдается сохраненный результат. Такой способ вызова ускоряет время генерации страницы и может применяться к элементам сайта, которые не требуют моментального обновления. Например, главное меню сайта, которое изменяется редко. Для запрета кеширования перед названием ставится восклицательный знак:
[[!pdoMenu]]
В MODX чаще всего используют готовые сниппеты, входящие в состав установленных компонентов (пакетов), но для лучшего понимания принципов их работы создадим свой.
Передача параметров сниппету
Создадим сниппет «CountChar», который будет в качестве параметров получать строку и цвет, а на выходе выдавать количество букв в строке и выделять это число указанным цветом.
[[!CountChar? &word=`Hello world` &color=`red`]]
В коде сниппета получаем параметры. При этом, можно задать значение, которое будет присваиваться переменной, если параметр не указывался (», ‘black’). Далее производим вычисления и возвращаем результат.
//получаем параметры $word = $modx->getOption('word', $scriptProperties, ''); $color = $modx->getOption('color', $scriptProperties, 'black'); //подсчитываем количество символов $CountChar = strlen($word); $output = ''.$CountChar.''; //возвращаем результат return $output;
Передача плейсхолдеров в чанк
Мы реализовали задуманное, но при этом нарушили негласное правило — смешали программный код и теги оформления. Если кому-то потребуется обернуть результат не в тег «span», а в «div», то могут возникнуть проблемы. Конечно, хорошо когда в коде всего десять строк, а если их будет тысяча? Для избежания таких проблем отделим «мух от котлет».
Создадим чанк «tplCountChar», внутрь которого поместим плейсхолдеры:
[[+CountChar]] символов!
Осталось доработать сам сниппет. Разбирать его подробно не будем, так как он содержит в себе комментарии:
//получаем параметры $word = $modx->getOption('word', $scriptProperties, ''); $color = $modx->getOption('color', $scriptProperties, 'black'); $chank = $modx->getOption('tpl', $scriptProperties, 'tplCountChar'); //подсчитываем символы $CountChar = strlen($word); //устанавливаем плейсхолдеры $modx->setPlaceholder('CountChar', $CountChar); $modx->setPlaceholder('color', $color); //возвращаем чанк с установленными плейсхолдерами $output = $modx->getChunk($chank); //возвращаем результат return $output;
Результат работы: 11 символов!
Запуск сниппета из сниппета
Про тонкости разработки сниппетов в MODX Revolution можно написать целую книгу, поэтому я ограничусь ещё только одной «фишкой» — возможностью запускать из своего сниппета сторонние. При создании сайтов такой функционал будет требоваться крайне редко, поэтому считайте эту информацию лишь небольшим бонусом.
$modx->runSnippet('CountChar', array('word'=>'Hello world','color'=>'yellow'));
Синтаксис вызова отличается от используемого в чанках или шаблонах, но результат будет тот же самый.
Плейсхолдеры в MODX
Из предыдущих примеров Вы, наверно, уже поняли что такое плейсхолдеры. Фактически, плейсхолдер это переменная , которую генерирует сниппет. Вызывается он следующим образом:
[[+color]]
Есть ещё системные плейсхолдеры. Они берутся из системных настроек MODX и доступны для вызова в любом месте сайта:
- [[++site_name]] возвращает название сайта
- [[++site_url]] возвращает доменное имя сайта
- [[++modx_charset]] возвращает установленную кодировку
Таких переменных насчитывается несколько десятков, но большинство из них не требуется при разработке сайта.
Чанки
Чанк в Evolution — это небольшой кусок HTML-кода или другой информации, который можно многократно использовать в шаблоне, другом чанке или сниппете.
Использование чанков
Вариант 1
Чанк создаётся для любого куска кода, который будет использоваться несколько раз. Например, можно вынести шапку, подвал, основное меню, крошки. Благодаря этому изменения можно вносить в одном чанке, а не нескольких шаблонах. Это проще и нет риска оставить какой-то шаблон без важного изменения.
Вариант 2
Второе наиболее частое использование чанка — шаблоны для сниппетов. Благодаря этому происходит разделение управляющего кода и оформления. В зависимости от сложности сниппета количество чанков-шаблонов может отличаться. Например для создания формы обратной связи может потребоваться 3 основных шаблона — форма, текст об успешном приеме формы, текст письма администратору с полученной информацией. Для того, чтобы чанк был не просто куском HTML-кода, а работал как шаблон, необходимо отметить в нем соответствующие места, куда сниппет запишет свою информацию. Роль таких мест выполняют плейсхолдеры.
Пример содержимого чанка с плейсхолдерами:
Это шаблон, который используется для пунктов меню. Соответственно [+wf.classes+] и [+wf.linktext+] — плейсхолдеры, которые будут заменены сниппетом Wayfinder на используемый CSS-класс и название пункта меню.
Кроме указанных двух вариантов, чанк можно использовать для хранения какой-то специальной информации. Например можно хранить некий набор параметров для сниппета (допустим список файлов), который может формироваться вручную или другими средствами.
Создание и редактирование чанка
Все чанки находятся в следующем месте:
Элементы → Чанки
Для создания необходимо нажать «Новый чанк», а для редактирования существующего чанка достаточно нажать на ссылку с его названием.
Назначение полей:
Название чанка — используется для вызова чанка. Можно использовать как английский и русский язык, а также дефис и знак подчеркивания. Пробел использовать нельзя!
Описание — выводится рядом с названием чанка в общем списке. Используется только для описания назначения чанка и для заполнения не обязательно.
Создать категорию — позволяет выбрать существующую категорию, в которую будет помещен чанк. Категория позволяет отделить чанк от остальных в общем списке. Если ни одна категория не выбрана, то чанк попадет в общую категория «Без категории».
Новая категория — если в списке существующих категорий нет подходящей, то можно создать ее, просто написав название в этом поле.
Ограничить доступ к редактированию чанка — если включить флажок, то никто, кроме администраторов, не сможет редактировать этот чанк.
Код чанка (html) — сюда размещается само содержимое чанка.
Редактор — позволяет выбрать визуальный редактор. По умолчанию он отключен, но при необходимости можно включить. Есть также редакторы, которые позволяют подсветить синтаксис.
Сохранение
С основными кнопками все понятно:
Сохранить — создаст новый чанк
Отмена — вернет нас в список чанков без сохранения результата.
Сделать копию — появляется только в режиме редактирования.
Удалить — появляется только в режиме редактирования.
Evolution позволяет определить еще действия после сохранения чанка:
Создать новый — сразу после сохранения чанка откроется форма для создания нового. Таким образом можно быстро создать серию чанков.
Продолжить редактирование — после сохранения чанк снова откроется для редактирования. В этом режиме удобно вносить небольшие правки в чанк и проверять конечный результат.
Закрыть — после сохранения мы вернемся в общий список чанков.
Создание копии чанка
Иногда бывает необходимо создать копию существующего чанка. Сделать это очень просто. Для этого необходимо зайти в редактирование нужного чанка и нажать на кнопку «Сделать копию».
После этого откроется для редактирования копия чанка. Копия отличается тем, что к ее названию добавляется строка «Duplicate of . «. Вам остается только исправить название на более подходящее и внести другие необходимые правки.
Копия создается сразу после подтверждения, поэтому если вы нажмете отмену, то в списке чанков копия все равно останется.
Удаление чанка
Для удаления необходимо зайти в режим редактирования соответствующего чанка и нажать кнопку Удалить. Внимание! Чанки удаляются полностью и возможности их восстановить нет.
Вызов чанка
Существующий чанк в шаблоне (или другом чанке) вызывается очень просто. Для этого используется конструкция в виде названия чанка окруженного фигурными скобками:
Вызов чанка с параметрами
Начиная с Evolution 1.4.0 в чанки можно передавать параметры.
Внутри чанка переданные параметры можно получить вызовом одноимённого плейсхолдера.
[+firstparam+] и [+secondparam+]
Стоит помнить, что название чувствительно к регистру (Mychank и myChank — разные чанки с точки зрения системы).
Пример шаблона с вызовом чанка:
Этот пример шаблона содержит только чанки, но на практике в нем также встречаются TV-параметры и сниппеты. Поэтому не стоит предполагать, что чанки использовать необходимо обязательно и в большом количестве.
API
Для получения содержимого чанка через API используется метод getChunk.
Пример вызова:
$chunk = $modx->getChunk('НазваниеЧанка');
FAQ
Я сделал чанк, но он не работает. Из-за чего это может быть?
Проверьте название чанка. Оно не должно содержать пробела, а регистр букв при вызове точности должен совпадать с названием чанка.
Можно ли вызывать чанк в чанке?
Урок 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
Если посмотреть в шаблоне, то мы увидим, что наше меню представляет собой ненумерованный список, каждый пункт меню представляет собой элемент списка следующего вида:
Сниппет Wayfinder при вызове его в шаблоне динамически генерирует точно такой же код.
Теперь давайте в перейдем к редактированию созданного нами чанка «HEADER», в который как вы помните из прошлых уроков мы вынесли всю шапку сайта вместе с основным меню. Замените кусок HTML кода отвечающего за вывод меню сайта (от начала списка тега ul и до конца списка закрывающего тега /ul) на следующую конструкцию:
[ !Wаyfinder? &startId=`0` &level=`1`! ]
Сохраните чанк и обновите главную страницу нашего сайта. Если вы все сделали правильно у вас ничего не должно измениться. Если посмотреть код, то вы увидите что сниппет Wayfinder генерирует класс active для активного элемента списка.
Таким образом, нам даже ничего не пришлось править в стилях нашего сайта, однако бывают случаи, когда в шаблоне активный элемент отмечен другим классом, к примеру, current. В таких случаях приходится дополнительно править стили css для нашего шаблона.
А теперь поподробнее о вызове сниппета Wayfinder.
Вы обратили внимание, что в вызове я передал сниппету два параметра:
startId=`0` — указывает на родительский ресурс, источник ресурсов для меню (так как мы создали структуру, где все наши ресурсы лежат в корне я указал значение параметра равным 0);
level=`1` — указывает на глубину вывода ресурсов (так как у нас не будет выпадающего меню, я указал глубину вложенности равной 1, этого можно и не делать, но чтобы вы разобрались с параметрами сниппетов я это сделал).
Если вы обратили внимание, то вызов сниппета находится между тегами:
Вы можете скопировать вызов сниппета вместе с этими тегами и вынести его в отдельный чанк с названием MAINMENU и заменить конструкцию в чанке HEADER на вызов чанка MAINMENU.
Как это делается я писал в уроке – чанки modx.
В рамках данного урока вы получили динамическое меню:
У меня оно немного отличается, поскольку я поправил стили под свои нужды.
На этом наш урок закончен, в следующем уроке мы будем двигаться дальше, продолжим работу с нашей главной странице, познакомимся с еще одним сниппетом AjaxSearch и реализуем поиск по сайту.
Вопрос по управлению чанками в MODx
Есть более 40 чанков, в которых прописаны промокоды различных рекламодателей. Сейчас возникла необходимость поменять содержимое чанков. Возможно потом придется восстановить первоначальный вариант. Может быть есть какие-то средства, с помощью которых этот процесс можно было бы проводить более комфортно?
Аудит сайтов — главная часть это тщательная ручная работа, а не отчеты сервисов и программ (https://vold57.com/audit). Продвижение сайтов (https://vold57.com/seo)
- Google о том, как улучшить ранжирование сайта с типовым контентом
- В аккаунтах Adwords появилась возможность отслеживания статуса промокода
- Google: низкий трафик не всегда говорит о низком качестве
На сайте с 04.03.2013
23 марта 2013, 19:27
Нет, стандартного решения через модуль/сниппет вы, увы, не найдете.
На сайте с 20.04.2007
23 марта 2013, 20:06
vold57:
Возможно потом придется восстановить первоначальный вариант.
Сделать бэкап таблицы чанков
vold57:
Может быть есть какие-то средства, с помощью которых этот процесс можно было бы проводить более комфортно?
Если phpmyadmin с inline-редактированием (двойной щелчок по ячейке таблицы) достаточно удобен — ?
Или любой другой mysql-клиент..
. 🙂 Облачные серверы от RegRu — промокод 3F85-3D10-806D-7224 ( http://levik.info/regru )
На сайте с 01.10.2007
23 марта 2013, 20:21
ivan-lev:
Сделать бэкап таблицы чанков
vold57,
Если phpmyadmin с inline-редактированием (двойной щелчок по ячейке таблицы) достаточно удобен — ?
Или любой другой mysql-клиент..
Да, удобен был бы такой вариант, если подскажите куда идти и на что щелкать 🙂
На сайте с 21.07.2010
23 марта 2013, 20:26
а просто копии чанков в админке не хочется сделать и прописывать их?
аська 45два48499два записки на работе (http://memoryhigh.ru) помогу с сайтом, удалю вирусы, настрою впс -> отзывы ТУТ (/ru/forum/836248) и ТАМ (http://www.maultalk.com/topic140187.html) . всегда проверяйте данные людей, которые сами пишут вам в аську или скайп.
На сайте с 01.10.2007
23 марта 2013, 20:29
kgtu5:
а просто копии чанков в админке не хочется сделать и прописывать их?
Если более удобных вариантов не будет, то придется так, даже если не хочется
На сайте с 02.08.2008
24 марта 2013, 01:23
у всех сущностей Revo есть волшебная кнопка-галка «Is Static». ну это если с копированием и восстановлением файлов проблем нет 😉 .
show must go on .
На сайте с 01.10.2012
24 марта 2013, 01:44
vold57:
Да, удобен был бы такой вариант, если подскажите куда идти и на что щелкать 🙂
чанки тут лежат modx_site_htmlsnippets
в целом, если они используют ещё что-то из TV, то можно сразу так http://forums.modx.com/?action=thread&thread=70100
а вообще, все ваши чанки только этими промо-кодами что-ли отличаются? тогда проще иметь только один чанк, а коды определять в качестве набора свойств, передавая нужное свойство при его вызове (хотя, всё зависит от того, как у вас оно там используется), и когда нужно будет поменять коды — просто создаёте новый Property Set