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

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

  • автор:

Основы движка 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]] возвращает установленную кодировку

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

Что такое чанк в MODX Evo ✈ Evolution CMS

Чанк в MODX — это небольшой кусок HTML-кода или другой информации, который можно многократно использовать в шаблоне, другом чанке или сниппете.

Как правило в шаблонах используется несколько чанков, которые содержат совпадающее оформление. Например можно вынести шапку, подвал, основное меню, крошки. Благодаря этому изменения можно будет вносить в одном чанке, а не нескольких шаблонах. Это и проще и нет риска оставить какой-то шаблон без важного изменения.

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

Пример содержимого чанка с плейсхолдерами:

Это шаблон, который используется для пунктов меню в MODX-cms.ru. И соответственно [+wf.classes+] и [+wf.linktext+] — плейсхолдеры, которые будут заменены сниппетом Wayfinder на используемый CSS-класс и название пункта меню.

Кроме указанных двух вариантов, чанк можно использовать для хранения какой-то специальной информации. Например можно хранить некий набор параметров для сниппета (допустим список файлов), который может формироваться вручную или другими средствами MODX.

Создание и редактирование чанка

Все чанки находятся в следующем месте:

Ресурсы → Управление ресурсами → Чанки
Список чанков выглядит примерно так:

Список чанков в MODX EVO

Для создания необходимо нажать на ссылку Новый чанк, а для редактирования существующего чанка достаточно нажать на ссылку с его названием. Появится следующая форма:

Новый чанк в MODX EVO

Название чанка — используется для вызова чанка. Можно использовать как английский так и русский язык, а также дефис (-) и знак подчеркивания (_). Пробел использовать нельзя!

Описание — выводится рядом с названием чанка в общем списке. Используется только для описания назначения чанка и для заполнения не обязательно.

Создать категорию — позволяет выбрать существующую категорию, в которую будет помещен чанк. Категория позволяет отделить чанк от остальных в общем списке. Если ни одна категория не выбрана, то чанк попадет в общую категория Без категории.

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

Ограничить доступ к редактированию чанка — если включить флажок, то никто кроме администраторов не сможет редактировать этот чанк.

Код чанка (html) — сюда размещается само содержимое чанка.

Редактор — позволяет выбрать визуальный редактор. По умолчанию он отключен, но при необходимости можно включить. Есть также редакторы, которые позволяют подсветить синтаксис.

Обратим внимание на возможности при сохранении. Для этого есть следующие управляющие кнопки:

Управление чанком в MODX EVO

С основными кнопками все понятно:

Сохранить — создаст новый чанк

Отмена — вернет нас в список чанков без сохранения результата.

Сделать копию — появляется только в режиме редактирования. Смотрите пункт Создание копии чанка.

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

Но MODX позволяет определить еще действие после сохранения чанка:

Создать новый — сразу после сохранения чанка откроется форма для создания нового. Таким образом можно быстро создать серию чанков.

Продолжить редактирование — после сохранения чанк снова откроется для редактирования. В этом режиме удобно вносить небольшие правки в чанк и проверять конечный результат.

Закрыть — после сохранения мы вернемся в общий список чанков.

Создание копии чанка

Иногда бывает необходимо создать копию существующего чанка. Сделать это очень просто. Для этого необходимо зайти в редактирование нужного чанка и нажать на кнопку Сделать копию.

Управление чанком в MODX EVO

На всякий случай система попросит от вас подтверждение:

Копия чанка в MODX EVO

После этого откроется для редактирования копия чанка. Копия отличается тем, что к ее названию добавляется Duplicate of. Вам остается только исправить название на более подходящее и внести другие необходимые правки.

Копия создается сразу после подтверждения, поэтому если вы нажмете отмену, то в списке чанков копия все равно останется.

Для удаления необходимо зайти в режим редактирования соответствующего чанка и нажать кнопку Удалить.

Управление чанком в MODX EVO

После этого система попросит от вас подтверждение:

Внимание! Чанки удаляются полностью и возможности их восстановить нет.

В шаблоне и другом чанке

Существующий чанк в шаблоне (или другом чанке) вызывается очень просто. Для этого используется конструкция в виде названия чанка окруженного фигурными скобками:

При этом стоит помнить, что название чувствительно к регистру (НазваниеЧанка и названиеЧанка — разные чанки с точки зрения MODX).

Для получения содержимого чанка через API используется метод getChunk.

$chunk = $modx->getChunk('НазваниеЧанка');

Я сделал чанк, но он не работает. Из-за чего это может быть?

Проверьте название чанка. Оно не должно содержать пробела, а регистр букв при вызове точности должен совпадать с названием чанка.

Можно ли вызывать чанк в чанке? — Да.

Базовые понятия MODX Revolution

Базовые понятия в MODX

К ресурсам относятся документы, веб-ссылки, символьные ссылки и статические ресурсы.

Элементы состоят из шаблонов, дополнительных полей, чанков, сниппетов и плагинов.

Файлы есть файлы – программный код, таблицы стилей, java-скрипты, медиа-контент и т. д.

Ресурсы (Resources)

Ресурс – это один из объектов MODX, доступ к которому можно осуществить посредством уникального идентификатора ресурса (URL/URI – Uniform Resource Locator/Identifier).

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

Существует четыре встроенных типа ресурсов:

  • Документ – самый распространённый ресурс, веб-страница. Состоит из заголовка, описания, аннотации, подробного содержимого, дат и других полей ресурса;
  • Веб-ссылка – ресурс MODX, который содержит URL (единый указатель ресурсов), ссылку на внешний ресурс или веб-страницу. Основное назначение ресурса – использование в качестве ссылок в меню MODX;
  • Символьная ссылка – ресурс , указывающий на другой документ MODX, однако поле символьной ссылки содержит только идентификатор ресурса (ID) документа, на который она ссылается. Основное назначение символьных ссылок – как и в предыдущем случае;
  • Статический ресурс – ресурс, содержащий в поле контента путь к определенному файлу. Если на сайте имеется контент, который не должен изменяться динамически, можно использовать для его отображения статический ресурс.

Шаблоны (Templates)

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

В шаблонах можно использовать любые теги, включая чанки, сниппеты, переменные шаблона.

Переменные шаблона (TV)

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

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

Чанки (Chunks)

Чанк – это фрагмент статического HTML-кода, содержит какую-либо часто повторяемую часть контента.

Стоит запомнить, что чанк не может содержать в себе исполняемый PHP-код (для этого служат сниппеты MODX).

В качестве примера можно привести стандартно применяемый чанк head, содержащий мета-теги страницы, ссылки на таблицы стилей и пр.

В шаблоне чанк вызывается так:

[[$имя_Чанка]]

Чанк обладает свойствами шаблона, но не содержит TV-параметры и не может быть назначен ресурсу напрямую.

Сниппеты (Snippets)

Сниппет в MODX – это элемент, который содержит в себе PHP-код, выполняемый во время обработки шаблона.

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

Если в системе уже присутствует какой-либо установленный сниппет, вызывается он так:

[[имя_Сниппета]] //Кэшируемый вызов

При вызове кэшируемого сниппета результат будет подсчитан и выведен один раз. В дальнейшем при загрузке страницы, где вызывается данный сниппет, результат останется неизменным, повторный вызов сниппета не произойдет. Экономия ресурсов сервера в действии.

[[!имя_Сниппета]] //Некэшируемый вызов

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

Плагины (Plugins)

Плагин в MODX представляет собой PHP-код, который в отличие от работы сниппета исполняется при наступлении какого-то определенного системного события. Само событие для срабатывания плагина определяется вами.

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

Категории (Categories)

Категории – это обычные метки, или каталоги, которые можно применять к элементам MODX для того, чтобы упорядочить их наиболее удобным для вас образом.

Присвоить категорию элементу можно как путем перетаскивания элемента в нужную категорию, так и присваиванием элементу категории в специальном поле элемента.

Использование категорий в MODX необязательно.

Вот теперь можно вдумчиво и планомерно начинать чтение документации по CMS/CMF MODX Revolution.

Изучайте, экспериментируйте, создавайте.

  • Хостинг для MODX
  • Расширенная установка MODX

Урок 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 и реализуем поиск по сайту.

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

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