Создание сайтов на MODx: Плейсхолдеры (параметры) чанков
Всем привет, друзья! Сегодня мы рассмотрим использование плейсхолдеров (параметров) чанков в MODx Revolution. Данная возможность позволит нам предотвратить дублирование чанков с минимальными отличиями, сделать проект более целостным, избежать путаницы в работе и дальнейшей поддержке.
Поделиться
Твитнуть
Поделиться
Класснуть
Запинить
Базовый урок по MODx Revolution: Ознакомиться.
Давайте рассмотрим на реальном примере. Допустим, у нас есть чанк head, который содержит доктайп, тег и содержимое тега head и открывающийся тег body. Обычно для главной страницы тег body должен содержать класс, идентифицирующий его принадлежность к определеной странице сайта. Например, class=»ishome», указанный для тега
Как решить задачу по распределению классов между страницами? Неопытный разработчик, скорее всего, создаст копию чанка head с тем лишь отличием, что тег body будет иметь разные классы и использовать разные чанки в разных шаблонах сайта. Вроде ничего странного и необычного, но мы получим 4 практически одинаковых чанка. Опытный разработчик почувствует неладное, ведь копирование/дублирование чего бы то ни было в разработке с высокой степенью вероятности является моветоном.
Задачу расширения чанка параметром (плейсхолдером) можно решить довольно таки просто — вместо класса class=»ishome», мы напишем:
<body> ... </body>
Всё! Боже, это так элементарно, но позволяет сэкономить кучу времени, не допустить ошибок и избежать путаницы в будущем при работе и кастомизации сайта. Вывод чанка в шаблоне будет звучать так:
[[$head? &bodyClass=`ishome`]]
Изящно и просто, не правда ли?
Соответственно, мы можем задать параметр по-умолчанию для дефолтного вывода $head. Для этого в редактируемом чанке head перейдем на вкладку «Параметры», нажмем кнопку «Параметры по умолчанию заблокированы» и «Создать параметр». Имя, соответственно, bodyClass, Значение — isnohome. Таким образом, мы зададим всем страницам, кроме главной bodyClass = isnohome.
Благодаря этой возможности, вы можете создавать более сложные условия для вывода чанков в ваших проектах.
Бонус: Настройка Material Theme в редакторе Ace MODx
MODx Ace Material Theme
1. Системные настройки > Пространство имен "ace":
Размер шрифта: 15px
Высота области редактирования: 560
Невидимые символы: Да
Мягкая табуляция: Нет
Размер табуляции: 2
Тема редактора: tomorrow_night
2. Файлы: Filesystem > super > templates > default > css > index.css:
(Добавить в конце)
.ace_editor{line-height: 1.4!important;font-family: 'Menlo','Ubuntu Mono','Consolas','source-code-pro',monospace!important}
.ace_gutter{color:#666E79!important}
.ace_active-line,.ace_gutter-active-line{background-color:#2A2F38!important}
.ace_scroller,.ace_gutter {background-color: #272B33!important}
.ace_meta.ace_tag{color:#A6B2C0!important}
.ace_meta.ace_tag.ace_tag-name{color:#DF6A73!important}
.ace_entity.ace_other.ace_attribute-name{color:#D2945D!important}
.ace_string{color:#90C378!important}
3. Очистить кеш через меню.
Премиум уроки от WebDesign Master
Другие уроки по теме «MODx»
Синтаксис тегов / Основы / Система / docs.modx.pro
Теги — это основные рабочие элементы MODX для пользователя сайта.
Указывая теги на странице, вы можете вызвать какой-то кусок HTML или PHP кода, текст из словаря, или переменные документа.
Для упрощения логики работы парсера, увеличения производительности и избежания путаницы с составными тегами синтаксис тегов разных элементов сведен к одному принципу: все теги объявляются в квадратных скобках, а тип тега определяется символом перед наименованием.
Синтаксис тегов
Для элементов и полей
| Элемент | В Evolution (Старый) | В Revolution (Новый) | Пример (для Revolution) |
|---|---|---|---|
| Шаблоны | Нет | Нет | |
| Поля ресурсов | [*field*] | [[*field]] | [[*pagetitle]] |
| Дополнительные поля | [*templatevar*] | [[*templatevar]] | [[*tags]] |
| Чанки | {{chunk }} | [[$chunk]] | [[$header]] |
| Сниппеты | [[snippet]] | [[snippet]] | [[getResources]] |
| Плагины | Нет | Нет | |
| Модули | Нет | В Revo нет модулей |
Для вывода контента
| Элемент | В Evolution (Старый) | В Revolution (Новый) | Пример (для Revolution) |
|---|---|---|---|
| Плейсхолдеры | [+placeholder+] | [[+placeholder]] | [[+modx.user.id]] |
| Ссылки | [~link~] | [[~link]] | [[~[[*id]]? &scheme=`full`]] |
| Системные настройки | [(system_setting)] | [[++system_setting]] | [[++site_start]] |
| Языковые теги | Нет | [[%language_string_key]] | |
| Комментарии | Нет | [[-this is a comment]] |
Для системных значений парсера MODX
| Описание | Тэг |
|---|---|
| Выводит время потраченное на запросы к базе данных | [^qt^] |
| Выводит количество запросов к базе данных | [^q^] |
| Выводит время потраченное на работу PHP скриптов | [^p^] |
| Выводит общее время потраченное на генерацию страницы | [^t^] |
| Выводит источник содержимого (база данных или кэш) | [^s^] |
Принятие такого упрощенного формата позволяет новому парсеру быть полностью рекурсивным и не зависеть от регулярных выражений.
Раньше каждый набор тегов анализировался самостоятельно в определенном порядке, по уровням вложенности, и обработка внутреннего тега откладывалось до следующего прохода. Сейчас теги обрабатываются по мере их появления, независимо от типов элементов, которые они представляют, и встроенные теги обрабатываться перед внешним тегом (то есть обработка сложных тегов идет изнутри), что позволяет прописывать гораздо более сложные составные теги.
Комментарии в тегах
Обсуждения на форумах показывают, что некоторые люди чувствуют необходимость в комментариях. По умолчанию при обнаружении тега, который представляет собой элемент, которого не существует, парсер отбрасывает весь тег. Используя это поведение, вы можете добавить комментарии в шаблоны, чанки и поля ресурсов, и этот комментарий не будет отображен во фронтенде. Однако, если тег составной, то все внутренние теги обработаются прежде чем парсер отбросит значение.
В MODX Revolution 2.2 любой тег, начинающейся с дефиса (-) игнорируются парсером, и любые теги внутри такого комментария будут отбрасываться. Это позволяет вставлять в комментарии любые составные теги, не влияя на нагрузку.
[[- Это комментарий. Он будет удален из вывода страницы. ]]Структура тегов
Каждый тег состоит из нескольких частей. Давайте разберем тег на составляющие:
[[ // открываем тег
! // указание, что тег НЕкешируемый (необязательно)
elementToken // тип элемента $ - чанк, * - поле элемента или ТВ, + - плейсхолдер, и т. д.
elementName // имя элемента
@propertyset // можно указать набор параметров для этого элемента (необязательно)
filterName=`modifier` // один или несколько фильтров вывода (необязательно)
? // указание того, что дальше идут параметры элемента (необязательно если параметры отсутствуют)
&propertyName=`propertyValue` // любой параметр элемента, начинающийся с &
&propertyName2=`propertyValue2` // параметров может быть сколько угодно, и все начинаются с &
]] //закрываем тегЭти теги могут прописываться в одну линию или располагаться на нескольких строках для удобства. Оба варианта однозначны:
[[!getResources? &parents=`123` &limit=`5`]]
[[!getResources?
&parents=`123`
&limit=`5`
]]Параметры
Все теги (а не только сниппеты) могут иметь параметры. Например, у нас есть чанк Hello:
Привет, [[+name]]!В чанке есть плейсхолдер. Мы хотим задать значение для этого плейсхолдера. Раньше нужно было использовать сниппет, который установит это значение. Но не теперь. Просто укажите нужное значение в параметрах чанка:
[[$Hello? &name=`Сергей`]]На выходе мы получим:
Привет, Сергей!Кэширование
Мы можем указать, что тег нужно обрабатывать после каждого запроса страницы. Для этого нужно просто поставить восклицательный знак сразу после открывающихся квадратных скобок:
[[!snippet]]
[[!$chunk]]
[[!+placeholder]]
[[!*template_var]]и т. д.
Плейсхолдеры
Если вам необходимо, чтобы сниппет каждый раз при запросе страницы устанавливал какой-то плейсхолдер, то плейсхолдер тоже нужно вызывать некэшируемым:
[[!Profile]]
Привет, [[!+username]].Проверка синтаксиса
Для новичков синтаксис тегов кажется сложноватым, поэтому вы можете использовать плагин SyntaxChecker для проверки правильности написания тегов.
Также можно использовать замечательный редактор Ace, который хорошо подсвечивает синтаксив тегов MODX.
Другие элементы — Создание сайта на MODX Revolution
Приведенные ниже элементы не находятся в дереве элементов в панели управления, но они служат для хранения и представления контента вашего сайта. Они включают в себя плейсхолдеры, ссылки, системные настройки, теги и поля.
Плейсхолдеры, ссылки и системные настройки
Плейсхолдеры не отображаются в дереве элементов панели управления, но они являются элементами, поскольку содержат контент и могут отображаться, используя теги ресурсов. Причина, по которой они не показаны в дереве элементов заключается в том, что их значение всегда устанавливается в сниппетах или плагинах, а не вводится в панели управления. Сниппет или плагин устанавливает плейсхолдер при помощи следующего кода PHP :
$modx->setPlaceholder('имя плейсхолдера','значение')
После установки плейсхолдера это значение заменит любой соответствующий тег плейсхолдера :
[[+имя плейсхолдера]]
Многие сниппеты MODX устанавливают плейсхолдеры. Вы можете отображать значения, установленные для этих плейсхолдеров при помощи тегов плейсхолдеров. Эти теги могут находиться в поле контента ресурса, в чанке, в TV-параметре или в шаблоне. Если у вас есть сниппет (давайте назовем его SetAutor), который, например, устанавливает плейсхолдер под названием autor_name в соответствии с именем автора текущего документа, вы можете поместить следующий тег сниппета в ваш шаблон : [[SetAutor]]. Данный тег сниппета не создает никакого вывода, поскольку он не печатает ничего и не возвращает никакого значения — он только устанавливает плейсхолдер, который будет заменен именем автора :
Автор данного документа : [[+autor_name]]
Отметим, что для того, чтобы работал тег [[+autor_name]], тег сниппета должен находиться в коде ранее, тогда плейсхолдер будет установлен.
MODX установит для вас пару плейсхолдеров при каждом запросе страницы, которые вы можете использовать для отображения идентификатора или имени пользователя текущего пользователя, который ввел логин и пароль (если таковые в настоящее время есть).
Идентификатор текущего пользователя :[[+modx.user.id]]
Имя текущего пользователя :[[+modx.user.username]]
Ссылки представляют собой URL страницы сайта и основаны на использовании одного из полей ресурсов — идентификатора ресурса. В большинстве случаев ссылки используются для обращения к документам. Идентификатор ресурса документа иногда называется идентификатором документа. Данный идентификатор отображается в скобках в поле ресурсов панели управления рядом с именем ресурса. Вы можете разместить ссылку используя тег ссылки :
[[~##]]
В приведенном выше коде, чтобы получить ссылку на нужный вам ресурс (документ), нужно подставить вместо ## идентификатор соответствующего ресурса. На первый взгляд это может показаться сложным, но на самом деле очень просто. Давайте посмотрим на пример. Предположим вам нужна страница «Контакты» нашего сайта, которая имеет идентификатор ресурса 8 (отображается в панели управления сайта правее имени ресурса в дереве ресурсов). Используя указанный способ создания ссылок, вы можете везде вместо http://modx4you/contacts.html указывать
Подобно плейсхолдерам установки не отображаются в дереве элементов, но могут отображаться, используя теги (точнее, теги установки). Установка в большинстве случаев является переменной, значение которой доступно на сайте MODX. Установки включают в себя системные настройки, контекстные настройки и пользовательские настройки (более подробно об этом далее). Все настройки можно отображать при помощи тега настроек :
[[++имя_настройки]]
Вы можете использовать теги настроек для отображения или использования значений любых системных, контекстных или пользовательских настроек. Некоторые системные настройки очень важны для работы MODX, поэтому не изменяйте системные настройки, если вы не уверены.
Теги
Мы уже обсуждали некоторые теги MODX, а сейчас давайте рассмотрим их подробнее. Все теги MODX заменяются объектами, которые они представляют. Вот краткий список, показывающий чем будет заменен каждый тег :
- Тег чанка — содержимое чанка.
- Тег ресурса — значение поля ресурса или TV-параметра, которое он представляет.
- Тег сниппета — возвращаемое значение кода PHP в сниппете.
- Тег ссылки — URL ресурса, на который он ссылается.
- Тег плейсхолдера — значение плейсхолдера (часто устанавливаемое в сниппете или плагине).
- Тег настройки — значение контекстной, пользовательской или системной настройки (переменной).
- Языковой тег — определенная языковая строка из текущего лексикона.
В версиях MODX Revolution все теги начинаются с [[ и заканчиваются]]. Мы рассмотрели большинство тегов и в таблице 1-1 дается перечень новых стилей тегов, используемых в MODX Revolution, а также теги, используемые в более ранних версиях MODX :
Таблица 1-1. Старые и новые стили тегов
| Тип тега | MODX Evolution (старая версия) | MODX Revolution |
| Ресурс | [*поле ресурса/TV параметр*] | [[*поле ресурса/TV параметр]] |
| Чанк | {{имя_чанка}} | [[$имя_чанка]] |
| Сниппет | [[имя_сниппета]] | [[имя_сниппета]] |
| Настройка | [(имя_настройки)] | [[++имя_настройки]] |
| Плейсхолдер | [+имя_плейсхолдера+] | [[+имя_плейсхолдера]] |
| Ссылка | [~идентификатор_ресурса~] | [[~идентификатор_ресурса]] |
| Язык | Тег отсутствует | [[%клавиша_языковой_строки]] |
Отметим, что символы после открывающих скобок ($, +, ++, *, ~ и %) в MODX называются токенами. Они говорят MODX какой тип тега обрабатывается.
Новички в MODX не всегда понимают, что теги могут использоваться в MODX практически везде и то, что вы можете использовать вложенные теги. Тег сниппета, например, может содержать в качестве свойства чанк, а чанк может содержать теги ресурсов, которые могут содержать теги ссылок. Ниже приведен пример тега настройки, вложенного в тег ссылки. Он отобразит ссылку на домашнюю страницу сайта :
[[~[[++site_start]]]]
Давайте разберем эту конструкцию и вначале посмотрим на внешний тег, который является тегом ссылки.
[[~X]] является тегом ссылки, где элемент X обозначает идентификатор ресурса документа, на который вы хотите поставить ссылку. Этот элемент будет заменен на URL, связанный с этим документом. Другими словами, например тег [[~12]] будет заменен на URL документа, чей идентификатор ресурса 12.
| В использовании домашней страницы нет ничего сложного. Системная переменная site_start может указывать на любую страницу сайта и MODX обрабатывает эту страницу подобно другим. |
[[++site_start]] является тегом настройки, который будет заменен идентификатором ресурса главной страницы вашего сайта. Поэтому, если идентификатор ресурса вашей домашней страницы равен 1 (и часто так оно и есть), этот тег будет заменен числом 1.
Поэтому конструкция [[~[[++site_start]]]] будет заменена на [[~1]] и далее на что-то вида http:///ваш_сайт.ru/home.html. Для того, чтобы вам действительно установить ссылку на главную страницу, вы можете использовать следующий код (X)HTML :
<a href="[[~[[++site_start]]]]">Home</a>
| При создании вложенных тегов в MODX всегда обращайте внимание на количество квадратных скобок слева и справа. Это количество должно быть одинаково и в MODX Revolution должно быть четным числом. |
imageHERE MODX Revolution. Плейсхолдер изображений
Что такое imageHERE?
imageHERE – обычный, простой в использовании инструмент для ускоренной разработки, прототипирования программ, он вставляет плейсхолдер изображений в разметку страницы во время разработки. Для своей работы он использует скрипт Ивана Малопинского (Ivan Malopinsky) holder.js
Текущая версия
Версия: 1.0.0-beta
Доступность: со 2 ноября 2012
Испльзование
Используйте imageHERE для вызова чанка в и вставки в шаблон или контент с использованием следующего синтаксиса:
[[$imageHERE]]
Пример с использованием опций:
[[$imageHERE? &w=`600` &h=`400` &bg=`#555` &fg=`#fff` &text=`Произвольный текст` &alt=`alt текст` ]]
- &w => ширина плейсхолдера. По умолчанию 300.
- &h => высота плейсхолдера. По умолчанию 200.
- &bg => Фоновый цвет в шестнадцатеричном (hex) формате. Для получения эффекта ДОЛЖЕН использоваться с &fg .
- &fg => Цвет символов (текстаxt) в шестнадцатеричном (hex) формате. Для получения эффекта ДОЛЖЕН использоваться с &bg.
- &text => Произвольный текст. По умолчанию «width x height».
- &alt => Добавляет текст alt, нужен, если его наличии важно при прототипировании 😉
Здесь не указана опция &attr, которая позволяет вставить любой нужный атрибут в элемент изображения. Пример: &attr=`class=»myClass»`.
Эти опции также можно задать на вкладке Свойства чанка (Chunk properties), и в дальнейшем при каждом использовании чанка по умолчанию будут использоваться данные значения. Задать несколько значений и затем вызывать их можно следующим образом:
[[$imageHERE@myPropertySet]]
После окончания прототипирования отключите плагин imageHERE, чтобы holder.js не вмешивался в работу страницы. Или деинсталлируйте imageHERE с помощью Package Management.