Навигация по сайту

Популярные статьи

MODx Revolution для начинающих, часть 6 - Работа с переменными шаблона

Добро пожаловать в часть 6 серии MODx Revolution for Complete Beginners Добро пожаловать в часть 6 серии MODx Revolution for Complete Beginners. В последнем выпуске мы рассмотрели понятие кусков. Мы создали несколько фрагментов и узнали, как использовать их для организации нашего шаблона. Мы также упомянули несколько других применений чанков и узнали о синтаксисе их тегов и о том, как вызывать их в шаблон. В этой статье мы рассмотрим одну из интересных функций MODx - переменные шаблона (телевизоры) .

Наверстать:

Часть 1: Введение
Часть 2: Установка
Часть 3: Базовая настройка и установка дополнений
Часть 4: Работа с шаблонами
Часть 5: Работа с чанками

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

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

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

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

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

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

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

Давайте начнем с рассмотрения основного ресурса в MODx Revolution. Если вы перейдете на вкладку ресурса и откроете ресурс Home для редактирования, вы увидите несколько полей. Мы кратко рассмотрели это в части 4, когда мы присвоили ресурсу Home шаблон. Давайте посмотрим на это еще раз (помните, что вы можете нажать на изображение для увеличения):

Давайте посмотрим на это еще раз (помните, что вы можете нажать на изображение для увеличения):

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

На вкладке « Настройки » также доступны дополнительные поля:

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

Вы можете увидеть эти подсказки, наведя курсор на поле:

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

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

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

Теперь для нашего шаблона домашней страницы мы могли бы жестко закодировать эти три области в области контента, скопировав HTML-код в наш ресурс. Однако для меня более разумно сделать эти три области независимыми, поскольку каждая из них имеет свою собственную область содержимого. Мы осуществляем это с помощью шаблонных переменных.

Что такое переменные шаблона (телевизоры)?

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

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

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

Конечно, лучший способ научиться - это практиковаться.

Мы собираемся использовать поле содержимого основного ресурса для области 1 в нашем шаблоне (см. Первый рисунок в этой части). Затем мы создадим два телевизора для двух других областей контента 2 и 3. Сначала заполним область 1 контентом, чтобы мы могли отслеживать, что мы делаем.

Для справки, это опять регионы:

Для справки, это опять регионы:

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

<div class = "special widget_text"> <div class = "sp_title_m"> <div class = "sp_title_l"> <div class = "sp_title_r"> <h3 class = "special_title"> Особенности темы </ h3> </ div > </ div> </ div> <div class = "textwidget"> <p> <span class = "dropcap"> S </ span> earch Оптимизация движка была приоритетом при разработке <em> Business Success < / em> тема. В иерархии кода основной блок контента размещается перед боковой панелью независимо от положения боковой панели, поэтому он сначала сканируется поисковыми системами. </ P> <div style = "float: left; width: 50%;"> < ul class = "list-2"> <li> SEO Friendly </ li> <li> Легко настраиваемые </ li> <li> Стили типографии </ li> <li> Левая / правая боковые панели </ li> </ ul> </ div> <div style = "float: left; width: 50%;"> <ul class = "list-2"> <li> 2D или 3D Layout </ li> <li> Ненавязчивое меню </ li> <li> PSD для всех 7 стилей </ li> <li> Кросс-браузерная поддержка </ li> </ ul> </ div> <div class = "clear"> </ div> </ div> </ DIV>

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

<div class = "special widget_text"> <div class = "sp_title_m"> <div class = "sp_title_l"> <div class = "sp_title_r"> <h3 class = "special_title"> Особенности темы </ h3> </ div > </ div> </ div> <div class = "textwidget"> [[* content]] </ div> </ div>

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

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

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

Откройте ресурс Home для редактирования и добавьте контент по вашему выбору:

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

Текст, который мы ввели в поле основного ресурса, теперь появляется в области содержимого региона 1

Итак, у нас есть регион 1, отсортированный на данный момент. Давайте перейдем к областям 2 и 3. Мы хотим, чтобы они также были динамически редактируемыми областями содержимого. Для этого нам нужно создать две новые переменные шаблона, которые имеют поле ввода расширенной текстовой области.

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

Чтобы создать шаблонную переменную, перейдите на вкладку «Элементы» и щелкните правой кнопкой мыши «Переменные шаблона», чтобы создать новый телевизор. Вы также можете нажать на иконку New TV ярлык.

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

Вы также можете добавить описание, если хотите.

Сейчас мы можем пропустить вкладку « Свойства », так как мы еще не обсуждали наборы свойств, и в настоящее время они нам не нужны.

Далее мы переходим на вкладку « Параметры ввода ». Поскольку мы хотим, чтобы редактор содержимого сайта мог использовать редактор расширенного текста при вводе содержимого в это поле, мы указываем, что мы хотим, чтобы тип ввода был Rich Text.

Далее мы переходим на вкладку « Параметры вывода », а пока можем оставить все как есть. Однако, если вы щелкнете по опциям выпадающего меню, вы увидите несколько вариантов (например, Дата, Строка, HTML и т. Д.), Которые дадут вам представление о том, как вы можете это использовать. И в будущем у нас будет возможность изучить другие варианты вывода, но пока оставьте его как Default.

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

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

Есть две другие вкладки, которые мы не видели на этом экране, а именно: Права доступа и Источники мультимедиа . На данном этапе нашего обучения нам не нужно беспокоиться о них, но мы вернемся к ним позже, когда нам это понадобится.

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

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

Теперь мы можем добавить контент в наше новое поле. Таким же образом мы можем создать другую переменную шаблона для региона 3.

Дублирование шаблонных переменных

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

Это так в моем случае, так как области 2 и 3 очень похожи. Просто щелкните правой кнопкой мыши на телевизоре, который хотите дублировать, и выберите «Дублировать телевизор»:

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

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

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

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

Нам нужно открыть шаблон и искать код и контент в областях 2 и 3, чтобы мы знали, что заменить нашими тегами шаблона (опять же, для этого мы можем использовать firebug). В моем случае у меня есть:

<div class = "cont_col_1 widget_text"> <h3 class = "cont_col_1_title"> B. Тема успеха </ h3> <div class = "textwidget"> Вы сможете выбрать один из 28 различных эффектов перехода для ползунка заголовка. Лигула Эгет Долор. Эней Масса. Cum sociis natoque penatibus et magnis dis parturient montes. Эней Масса. Cum sociis natoque penatibus et magnis. <img style = "padding-top: 10px;" src = "assets / templates / 7in1 / sample-data / b_success_logo_btn.png" width = "200" height = "92" alt = "b-success-logo" /> </ div> </ div> </ div> <! - end cont_col_1 -> <div id = "cont_col_2" class = "column_1_of_4"> <div class = "cont_col_2 widget_text"> <h3 class = "cont_col_2_title"> Скалы WordPress </ h3> <div class = " textwidget "> Вы сможете выбрать из 28 различных эффектов перехода для ползунка заголовка. Лигула Эгет Долор. Эней Масса. Cum sociis natoque penatibus et magnis dis parturient montes. Эней Масса. Cum sociis natoque penatibus et magnis. <img style = "padding-top: 10px;" src = "assets / templates / 7in1 / sample-data / wp_logo_btn.png" width = "200" height = "92" alt = "b-wp-logo" /> </ div> </ div> </ div> <! - end cont_col_2 ->

который я редактирую, чтобы стать:

<div class = "cont_col_1 widget_text"> <h3 class = "cont_col_1_title"> B. Тема успеха </ h3> <div class = "textwidget"> [[* home7in1_home_contentregion2]] </ div> </ div> </ div> <! - end cont_col_1 -> <div id = "cont_col_2" class = "column_1_of_4"> <div class = "cont_col_2 widget_text"> <h3 class = "cont_col_2_title"> MODx Rocks </ h3> <div class = "textwidget"> [[* home7in1_home_contentregion3]] </ div> </ div> </ div> / div> <! - end cont_col_2 ->

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

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

Количество телевизоров, которые вы можете добавить в шаблон, не ограничено. Скорее всего, я сделаю еще один шаг и добавлю еще три телевизора, по одному для каждого заголовка региона, чтобы заголовки « Тематические функции», «Успешная тема» и « MODx Rocks» не были статичными, а входить в них можно на вкладке «Переменные шаблона». Я мог бы также просто решить использовать одно из существующих полей, например Длинное название, для одного из названий. Это действительно все зависит от вас и от того, как вы хотите работать с вашим шаблоном.

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

Что дальше?

Так что теперь, когда в нашем шаблоне все становится динамично, и мы идем в ногу со сборкой нашего сайта, я думаю, что пришло время начать добавлять некоторые функциональные фрагменты. В MODx мы добавляем функциональность на наш сайт с помощью сниппетов. В следующей части мы начнем смотреть на фрагменты кода и продолжим делать наш сайт рок-н-роллом 🙂

Я с нетерпением жду ваших комментариев, вопросов, отзывов и т. Д. 🙂

Больше чтения

Переменные шаблона
Типы ввода переменных шаблона
Типы вывода шаблонных переменных

Перейти к части 7: Работа с фрагментами MODX Revolution

Что такое переменные шаблона (телевизоры)?