Урок 6. Переменные шаблона

Добро пожаловать на 6 урок Переменные шаблона. В предыдущем занятии мы исследовали концепцию чанков. Мы создали несколько чанков и научились как использовать для конструирования шаблона. Также мы упомянули несколько других методов использования чанков и обучились синтаксису и способу вызова чанков в шаблоне. В этом занятии мы будем исследовать крутые элементы MODx – Переменные шаблона – Template Variables (TVs).

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

Работа с контентом в MODX Revolution

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

 Области шаблона, которые будут преобразованы в Переменные шаблона MODX Revolution

Моя цель сводится к тому, чтобы в конце занятия мы заменим содержимое этих трех областей содержимым, которое мы будем вводить на домашней странице во вкладке ресурсы. В процессе мы начнем изучать основы переменных шаблона (ПШ или ТВ). Ну что ж, поехали.

Создание контента в MODX Revolution

Давайте посмотрим на базовый ресурс в MODX Revolution. Если вы зайдете на вкладку ресурсы и откроете ресурс Home для редактирования, вы увидите несколько полей. Мы их уже коротко рассматривали на 4 уроке. Давайте освежим их в своей памяти:

 Редактирование ресурса в MODX Revolution

На этой картинке видно, что по умолчанию для редактирования доступно 14 полей. Каждое поле имеет подсказку, которая объясняет для чего тот или иной тег предназначен. Вы можете увидеть эти подсказки, когда наведете курсором на любое поле.

 Подсказки для полей ресурса

Вы можете заполнять эти поля или несколько из них, когда вы создаете новый ресурс. Потом к этим полям можно обратится используя соответствующий тег шаблона. Например, вы можете выбрать поле description для мета описания и потом вызвать это поле в теге мета описания в начале вашего шаблона и так далее. Вы увидите, что поле Menu title важно, когда мы начнем работать со сниппетом Wayfinder для создания навигации сайта (это будет очень скоро)

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

 Область контента

Важно определится куда попадет этот контент в нашем сайте. Мы можем вызывать данный введенный здесь контент ресурса используя тег [[*content]]. В простой странице шаблона с одной областью контента всё было бы очень просто и ясно. Например, если мы посмотрим на страницу About, которая идет вместе с шаблоном над которым мы работаем, то видна лишь одна область контента:

 Страница About

Теперь для нашей домашней страницы мы можем скопировать код, который отвечает за вывод трех областей контента в наше окно ресурса и таким образом сделать вывод домашней страницы. Но мне кажется всё же более разумным сделать эти три области независимыми со своими собственными областями контента. Мы сделаем это используя переменные шаблона. Что такое переменные шаблона (TV)?

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

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

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

Лучший способ изучения курса, это пробовать все на практике. С открытым для редактирования ресурсом Home перейдите на закладку переменных шаблона Template Variables:

 Переменные шаблона MODX Revolution

Обратите внимание на поле по-умолчанию Resource Content, которое мы видели на основном табе как переменную шаблона. Теперь мы будем использовать это поле контента основного ресурса для области 1 в нашем шаблоне (см 1 изображение). Далее создадим две ПШ для других областей контента – 2 области и 3 области. Давайте вначале наполним первую область каким-либо содержанием, чтобы мы могли отслеживать изменения.

Для справки, вот эти три области:

 Области для замены Переменными шаблона

Откройте шаблон для редактирования и прокрутите вниз к коду, который отвечает за 1 область. Вы можете использовать для нахождения этого кода Firebug (плагин Mozilla). В моем случае, этот код будет выглядеть вот так:

Заметим этот статический код, моим тегом контента и в результате получим:

И теперь моя страница будет выглядеть приблизительно вот так:

 Новый вид страницы

Как вы видите 1 область пуста. Это из-за того, что нет никакого контента в нашем поле ресурса Home. Давайте введем какой-нибудь контент. Откройте ресурс Home для редактирования и добавте какое-нибудь содержание на ваш выбор:

 Добавление контента в ресурс MODX Revolution

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

 Смена контента на 1й странице

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

Создание переменных шаблона в MODX Revolution

Для создания переменных шаблона перейдите во вкладку Элементы (Elements) и нажмите правой кнопкой мыши на Переменные шаблона (Template Variables) для создания новой ПШ. Вы также можете нажать на иконку ярлыка Новая переменная шаблона (New TV).

 Создание переменной шаблона в MODX Revolution

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

 Описание переменной шаблона в MODX Revolution

Также можно добавить описание к переменной шаблона. Мы же хотим, чтобы в будущем редактор сайта смог использовать редактор текста, когда вводит контент в этом поле и мы обозначаем, что тип ввода в этом поле – Rich Text. Как я уже упомянул, есть еще другие типы ввода и вывода, которые мы рассмотрим в дальнейшем. Недостающую информацию можно всегда почерпнуть в официальной документации.

 Редактирование переменной шаблона MODX Revolution

Давайте теперь сделаем переменной шаблона для 3 области.

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

В моём случае области 2 и 3 очень схожи. Нажмём на переменной шаблона, которую нужно продублировать и выберем Duplicate TV:

 Быстрое создание копии переменной шаблона

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

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

 Области новых переменных шаблона

Теперь нам доступны для редактирования эти две области (и для контент-редактора нашего сайта), давайте вставим их в шаблон так, чтобы их содержимое автоматически парсировалось в нашу главную страницу. Отроем шаблон и посмотрим на контент во 2 и 3 областях, чтобы знать что заменить нашими тегами шаблона (можно для этих целей использовать firebug).

В моем случае код:

После редактирования приобретёт следующий вид:

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

 Переменные шаблона в действии

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

Можно добавлять неограниченное количество переменных шаблона к шаблону, я добавлю еще 3 переменных шаблона, каждую по названию областей, поэтому у меня будут следующие переменные шаблона: Theme Features, Success Theme, и MODX Rocks, которые не являются статическими, а могут быть введены через вкладку Template variables. Также я могу использовать одно из существующих полей, например Long title, для одного из названий. В целом всё зависит от вас. Как и что хотите, то делайте с вашим шаблоном.

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

Что дальше?

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

Также можно почитать: