Чанки, сниппеты и плейсхолдеры в MODX Revolution

Синтаксис тегов в MODx Revolution

Рассмотрим основной синтаксис встроенных тегов MODx Revo. Все встроенные теги должны обрамлятся двумя квадратными скобками с левой и правой стороны, к примеру [[test]]. Ниже приведена таблица с возможными применениями синтаксиса:

Элемент Синтаксис Пример
Поля ресурса ( Resource Fields )
стандартные поля страниц, типа заголовка или контента
[[*field]] [[*pagetitle]]
выведет заголовок страницы
TV-поле ( Template Variables )
дополнительные поля страниц
[[*templatevar]] [[*tags]]
выведет содержимое дополнительного поля tags
Чанк ( Chunk )
отдельные кусочки html-кода
[[$chunk]] [[$footer]]
выведет содержимое чанка footer
Сниппет ( Snippet )
отдельные скрипты php
[[snippet]] [[getResources]]
выведет закешированный результат работы сниппета getResources
Плейсходер ( Placeholder )
подставляет результаты работы какого-нибудь сниппета
[[+placeholder]] [[+modx.user.id]]
выведет id текущего авторизированого пользователя
Ссылка ( Link )
динамически генерирует ссылку до указанного документа по id
[[~link]] [[~1]]
Создаст ссылку до ресурса с id = 1
Настройки контекста ( System Settings )
выводит активный параметр используемого контекста
[[++system_setting]] [[++site_url]]
Выведет ссылку на сайт
Комментарий ( Comment )
комментрий для используемого тега
[[tag?-comment]] [[*id?-id текущей страницы]]
носит описательный характер для разработчика

Структура тегов

Каждый тег может содержать несколько частей, ниже тег разбит на возможные части:

В целом, как то так: [[!name:lcase?name=`Вася`-выводим приветствие]] — здесь мы обращаемся к сниппету с именемname, переводим регистр символов в нижний регистр с помощью phx ( lcase ), задаем параметр name равный «Вася» и комментируем для себя что это значит

Параметры

Параметры можно передавать не только в сниппеты, но и в чанки, например у нас есть чанк hello:

Привет, [[+name]]!

В шаблоне выведем чанк таким образом:

[[$hello?name=`мир`]]

Результат примера будет: Привет, мир!

При передаче параметра в снипет, данные записываются в массив $scriptProperties.

Self checking

Для автоматической проверки синтаксиса, можно установить плагин SyntaxChecker.

1906

Использование чанка

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

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

Второе наиболее частое использование чанка — шаблоны для сниппетов. Благодаря этому происходит разделение управляющего кода и оформления.

Основной синтаксис MODX

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

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

<li [+wf.classes+]>[+wf.linktext+]</li>

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

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

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

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

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

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

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

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

Назначение полей:

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

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

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

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

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

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

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

Сохранение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Удаление чанка

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

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

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

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

Вызов чанка

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

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

{{НазваниеЧанка}}

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

Через API

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

Пример вызова:

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

FAQ

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

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

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

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

Создаем новый материал в дереве ресурсов, для этого у меня есть специальная папка «служебные».
Заполняем поля:
Заголовок:  Поиск по материалам
Псевдоним: tag
Поставить галочку – Не показывать в меню и Опубликован

Обратите внимание на ID создаваемого ресурса (у меня 27) – он в последующем потребуется.

Переходим во вкладку Настройки страницы и убираем галочки Использовать HTML-редактор, Доступен для поиска и Кэшируемый

Нажимаем кнопку сохранить, чтобы изменения вступили в силу и возвращаемся на вкладку Создание/редактирование документа.
Заполняем поле содержимое ресурса:

[[!getResources?

Теги modx revolution

&parents=`1,4,10` &tpl=`shablon_for_block_anons` &tplLast=`shablon_for_block_anons_last`      &includeTVs=`1` &processTVs=`1` &includeContent=`1` &limit=`100`    &hideContainers=`1` &tvFilters=`tags==%[[GET]]%`  ]]

Думаю стоит пояснить значение этих строк. По первых, getResources – это такой сниппет для работы с ресурсами сайта, аналог Ditto. Он заключен в скобки [[! ]] – восклицательный знак говорит о том, что его вызов кэшироваться не будет.

Параметры:
Parents – указываем id ресурсов-папок, материалы которых будут выводиться при поиске.
tpl – шаблон вывода ресурсов
tplLast – шаблон вывода последнего ресурса
includeTVs – включаем обработку TV параметров
processTVs – тоже надо включить, чтобы TV параметры работали
includeContent – указываем, что надо выводить содержимое ресурсов, в противном случае будет выведен массив данных ресурсов (иногда так же является полезным)
limit – число документов для отображения, пока поставим 100, чтобы вывести все, потом можно будет выставить необходимое.
hideContainers – скроем (не будем выводить) ресурсы являющиеся папками
tvFilters – фильтр на основе, которого будем решать выводить ресурс или нет.

Примерное содержание чанка shablon_for_block_anons:

[[+pagetitle]]

[[+introtext]]

tplLast=`shablon_for_block_anons_last` — следует использовать, если шаблон последнего документа отличается от остальных, к примеру, у последнего нижний край закругленный или любое другое отличие. В остальном это точно такой же шаблон вывода как и shablon_for_block_anons.

На параметре tvFilters думаю стоит остановиться более подробно.
Есть материалы где в TV под именем tags будут храниться теги (метки) в таком виде: «метка1,метка2,метка3». При нажатии на ссылка к примеру метка2 в строке запроса (методом GET) будет передано имя этой метки, его мы получим с помощью специального сниппета GET. Результатом его работы как раз и будет слово метка2 при нажатии на соответствующую ссылку.

Теперь надо выбрать только те ресурсы, в которых в TV tags встречается слово метка2, для этого используется кострукция &tvFilters=`tags==%метка2%`, где % обозначает, что перед словом и после него могут быть другие символы, без них будет вестись поиск по точному совпадению.

Вывод тегов в шаблоне

[[tags_snippet? &input=`[[*tags]]`]]

Вроде почти всё готово.
Теперь можно заходить в материал и пробовать заполнять TV параметр tags

Для начала надо будет самому вписать нужные теги через запятую (без пробела), а вот потом в ресурсах появиться возможность выбора тегов из уже использованных.
К примеру, у меня на сайте уже есть ресурсы с тегами MODx Revo,MODx Evo иPHx, а для нового ресурса я хочу сделать теги MODx Revo и  TV.

Для это надо нажать на ссылку MODx Revo из уже имеющихся тегов и вписать новый тег TV в строку ввода. Конечно, можно было вписывать все теги вручную, но это не так удобно, да и могут возникнуть проблемы если в написании тегов будут допущены ошибки.
Вот что получилось у меня:

Не забываем сохраниться и можно переходить на сайт смотреть результат трудов.

По всем замечаниям и пожеланиям всегда можете обращаться ко мне. Как это сделать смотрите на странице Контакты.

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

Дополнительные поля являются просто полями, которые добавляются к вашему документу, и имеют такой же синтаксис как и поля по умолчанию: [[*имя_поля]] 

Перейдем во вкладку «Элементы» и создадим «Дополнительное поле» по тому же прицепу что и чанк или сниппет. Назовем его «Image» в поле «Имя», в поле «Заголовок» опишем его для нашего понимания его. Остальное нас пока не интересует.

Далее перейдем во вкладку «Параметры ввода» и в ней изменим «Тип ввода» на «Изображение».

И последнее что нам нужно будет сделать при создании Дополнительного поля, находится во вкладке «Доступно для шаблонов». Напротив «BootstrapTemplate» втавим галочку доступа и жмем на кнопку .

Использование Дополнительного поля

Отлично! Теперь заполним это поле с изображение. Перейдем к редактированию страницы любой страницы (например, к созданной ранее «Новости»), главное – нам нужно проверить какой шаблон подключен к этой странице. Если выбран не тот, к которому мы прикрепили дополнительное поле, измените на нужное. Перейдем на вкладку «Дополнительные поля» и в поле «Image» нажмем на иконку изображения и выберите изображение из каталога.

Но в нашем новом проекте его нет, т.ч. скопируйте любое изображение в любую папку . Либо загрузите через открывшееся окно браузера. Выберите папку и нажмите на иконку «Загрузить файлы» -> «Выбирите файл(ы)» -> «Загрузить» -> «ОК».

После того как Вы нажали на кнопку поле «Image» заполнилось и появилосьуменьшенное изображение. Не забудьте сохранить изменения нажав кнопку .

Теперь давайте отобразим это изображение в теле нашей «Новости».

Создание тегов материалов сайта

Для этого внизу «Содержимое ресурса» уберите галочку «Toggle Editor» и вставьте код:

<img src=»https://bit-digest.ru/wp-content/uploads/2018/06/53279.jpg»>

После сохранения страницы, перейдите на ее просмотр. Если Вы увидели ваше изображение, то сделали все правильно! На этом ознакомление с Дополнительными полями MODx Revolution.

Если у Вас появились ко мне вопросы по данной статье, задавайте их в комментариях ниже.

Дополнение ReturnLink для MODX Revolution предназначено для формирования ссылки на первый опубликованный родительский документ.

К примеру рассмотрим сайт со следующей структурой:

Поставлена задача: после текста новости (посетитель просматривает страницу, отмеченную стрелкой) сформировать ссылку на «родительский» документ.

Для этого примера простое использование html кода

Назад к <a href=»[[~[[*parent]]]]»>Назад</a>

не подойдет, так как родительские ресурсы «Фев (110)», и даже «2012 (108)» не опубликованы. Они не отражаются на сайте и служат лишь как контейнеры для удобства управления большим количеством (более тысячи) новостей на сайте.

Реализация тегов в MODx Revo — tagLister

Кроме того, текст ссылки «Назад» не очень хорошо смотрится на сайте.

Дополнение ReturnLink призвано решить подобную проблему, его вызов

[[returnLink]]

сформирует следующий html код:

Назад к <a href=»[[~9]]»>Новости</a>

ReturnLink «перепрыгивает» все неопубликованные документы, и формирует ссылку на первый родительский опубликованный документ. Если же его нет, то формируется ссылка на главную страницу сайта.

Установка и параметры

Установить дополнение можно, скачав его из репозитория MODX: http://modx.com/extras/package/returnlink

Типичный вызов:

[[returnLink]]

Список параметров:

resourceId — ресурс, для которого будет сформирована ссылка на родителя. По умолчанию — текущий ресурс. tpl — шаблон для вывода. По умолчанию returnLinkTpl. В шаблоне можно использовать любые поля родительского документа, например id, pagetitle и т.д.

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

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