Чем чанки отличаются сниппетов
Перейти к содержимому

Чем чанки отличаются сниппетов

Основы движка MODX — чанки, сниппеты и плейсхолдеры

Рассмотрим базовые элементы движка MODX — чанки, сниппеты и плейсхолдеры. Они являются неотъемлемой частью сайтов на этой CMS, поэтому следует четко понимать их отличие и назначение. Посмотрим следующую схему:

основные элементы modx

Шаблон является базовым элементом в MODX . Это площадка, на которой размещаются остальные элементы. Любая страница сайта (ресурс) обязана быть привязана к одному из шаблонов.

Чанки

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

Чанки могут быть вложены друг в друга, содержать сниппеты и плейсхолдеры:

чанки в modx

Сниппеты в modx revo

Сниппет — это программный код (PHP,SQL,XPDO), в результате выполнения которого возвращается результат (аналог функций в PHP). Чаще всего результатом является html код, но это не обязательно. Например, он может произвести действия с базой данных и при этом ничего не вывести на экран. Вызываться сниппет может в шаблоне, чанке и даже в содержимом ресурса:

[[pdoMenu]]

В примере используется стандартный вариант вызова сниппета с кешированием. В этом режиме при первом обращении к сниппету результат его работы кешируется, а при последующих обращениях — выдается сохраненный результат. Такой способ вызова ускоряет время генерации страницы и может применяться к элементам сайта, которые не требуют моментального обновления. Например, главное меню сайта, которое изменяется редко. Для запрета кеширования перед названием ставится восклицательный знак:

[[!pdoMenu]]

В MODX чаще всего используют готовые сниппеты, входящие в состав установленных компонентов (пакетов), но для лучшего понимания принципов их работы создадим свой.

сниппеты в 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, которые необходимы для первоначальной работы. Чтобы просмотреть эти сниппеты перейдите по вкладкам «Элементы»-«Управление элементами»-«Сниппеты»:

modx сниппеты

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

  • Группа «Content» — отвечает за вывод контента.
  • Группа «Forms» — отвечает за работу с сайтом.
  • Группа «Login» — отвечает за работу с пользователями, авторизацию и персонализацию.
  • Группа «Navigation» — отвечает за работу с навигацией.
  • Группа «Search» — отвечает за поиск по сайту.

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

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

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

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

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

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

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

сниппеты 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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *