Кастомизация форм в MODX Revolution. Modx где хранятся шаблоны
Переменные шаблона MODX Revo
Приветствую вас уважаемые читатели блога web-revenue.ru.
В предыдущей статье мы исследовали концепцию работы чанков. Создали парочку чанков и научились их использовать в конструирования шаблона. Пока ещё наш сайт ламерский, т.к. все содержимое выдаваемое на главной странице, в реальности принадлежит самому шаблону. Ну а сейчас мы начнем заменять статический контент динамическим, который уже будет выдаваться, не на страницы шаблона, а на основание страниц сайта.
В данной статье мы начнём изучать переменные шаблона MODX.
Внимание! Данная статья все еще актуальна и вы се можете делать по ней, но если что то будет не понятно, можете обратиться к более актуальной статье: Modx TV (переменные шаблона)
MODX Revolution — Работа с контентом
Вернемся к предыдущему уроку в котором мы разбили ниша шаблон на чанки:
Где чанк content, является областью с содержимым. Которое к концу статьи мы заменим содержимым, которое будет вводиться на главной странице. Походу дела мы начнем изучать основные переменные шаблона (ТВ или ПШ). Ну чтож приступим.
MODX Revolution — Создание контента
Для начала давайте зайдем на вкладку ресурсы и ещё раз посмотрим на базовый ресурс Мода. Для этого во вкладке ресурсы откроете страницу Главная для редактирования, вы увидите более 10 полей.
Ранее мы их уже кратко рассматривали.
Как Вы видите все поля доступны для редактирования и каждое поле имеет собственную подсказку, объясняющую предназначение того или иного тега. Эти подсказки выходят при наведении курсора мыши на любое из полей.
При создании нового ресурса, Вы можете заполнить часть из них. Затем к этим полям можно будет обратится при помощи соответствующих тегов шаблона. Например, вы можете заполнить поле описание (description) и затем вызвать это поле в мета теге описания и так далее.
Можно заметить, что ресурс по умолчанию дает возможность использовать только одну область контента:
Сейчас важно определится с тем, куда в нашем сайте попадет этот контент. Мы можем вызывать введенный здесь контент используя тег. На страницах шаблонов с одной областью контента всё было бы намного проще. Но у нас их 3 (см. выше).
И мы можем скопировать код отвечающий за вывод всех трех областей и таким образом сделать вывод домашней страницы, но я считаю, что более разумно сделать эти три области с контентом независимыми друг от друга. И сделаем это мы при помощи переменные шаблона.
Что такое переменные шаблона?
Переменные шаблона – это пользовательские поля, которые можно добавлять в шаблоны сайтов на MODx Rev. Они будут относятся только к шаблону для которого их создали, и их нельзя будет использовать в других не соотносящихся шаблонах. Переменные позволяют быть более гибкими при построении дизайна сайта и использовать большее количество полей, чем задано умолчанию.
Вообще переменные шаблона являются обычными полями, с таким же синтаксисом как и у полей по умолчанию, которые добавляются к вашему ресурсу.
У переменных шаблона также имеются типы ввода и вывода, которые дают возможность быть не просто полями текста, а полями изображений, url, даты и другими. Вы даже можете создавать свои пользовательские типы (ПШ). Но об этом позже. В данной статье мы рассмотрим только основы (более подробно о ПШ можно прочитать в руководствах). В дальнейшем мы будем больше говорить о ПШ, т.к. они являются гибким и мощным инструментом.
Теории я думаю на сегодня достаточно! Теперь начнём пробовать все на практике.
Для начала откройте для редактирования ресурс Главная и обратите внимание на поле по умолчанию «Содержание ресурса».
Мы будем использовать данное поле, для контента нашего шаблона (см. изображение выше). Заполним ее и сохраним.
Сделаем это для того, чтобы затем мы могли отслеживать изменения.
Теперь откройте для редактирования шаблон (для этого во вкладке элементы кликните по вашему шаблону). В открывшемся окошке в поле «код шаблона» найдите код отвечающий данную область.
В предыдущем уроке весь код области контента мы перенесли в чанк content:
По сути в данном чанке при моей разбивке (см предыдущий урок) не чего полезного нет и не каких нужных для меня CSS стилей отвечающих за вывод текста, так что я просто изменменю вывод этого чанка на вывод контента тегом [[*content]]:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <base href="[[++site_url]]/" /> <title>[[++site_name]] - [[*pagetitle]] </title> <meta charset=" [[++modx_charset]]"> <script type="text/javascript" src="/assets/templates/home/js/functions.js"></script> <!--[if lt IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]--> <link rel="stylesheet" type="text/css" href="/assets/templates/home/style.css" /> </head> <body> <div> [[$header]] [[$menu]] <div> <div> [[*content]] </div> </div> [[$left-bar]] [[$right-bar]] <div></div> [[$footer]] </div> </body> </html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <base href="[[++site_url]]/" /> <title>[[++site_name]] - [[*pagetitle]] </title> <meta charset=" [[++modx_charset]]"> <script type="text/javascript" src="/assets/templates/home/js/functions.js"></script> <!--[if lt IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]--> <link rel="stylesheet" type="text/css" href="/assets/templates/home/style.css" /> </head> <body> <div> [[$header]] [[$menu]] <div> <div> [[*content]] </div> </div> [[$left-bar]] [[$right-bar]] <div></div> [[$footer]] </div> </body> </html> |
Я сейчас просто заменил в коде 19 строчку [[$content]] на [[*content]].
Все хорошо, только вот текст контента прилип к краям сайтбаров и меню:
Исправим это: для этого обернем наш [[*content]] дополнительным контейнером с классом к примеру cd-content:
[[$menu]] <div> <div> <div> [[*content]] </div> </div> </div> [[$left-bar]]
[[$menu]] <div> <div> <div> [[*content]] </div> </div> </div> [[$left-bar]] |
и пропишем в css файле следующие строки для него:
#cd-content{ margin:15px; }
#cd-content{ margin:15px; } |
Раз я уж полез в css то заодно переделаю немного цветовую схему темы, заменю логотип, телефоны т.д., т.к. все таки я создаю сайт для плеловодов и синий там не особо катируеться)
А вам, если ваша область кода находиться в чанке, скорее всего придется вставлять тег [[*content]] непосредственно в чанке с содержимым контента.
Мне по сути мне не нужны больше не какие дополнительные поля и т.п. Но вам они скорее всего понадобяться, о том как с ними работать читайте ниже.
PS. Таких областей содержимых может быть сколько угодно, все зависит от темы, к примеру ваша область контента выводиться в 3 колонки, следовательно у вас будет 3 области с контентом, вот вам пример:
Представим что мы прописали [[*content]] в данное поле с лева, и нам надо создать еще 2 области с контентом для оставшихся столбцов и для этого нам придется воспользоваться переменными шаблона.
Создание переменных шаблона в MODX Revolution
Откройте для редактирования ресурс Главная (Home) и перейдите во вкладку «Элементы» и нажмите на иконку «Новый TV», либо щелкните правой кнопкой мыши на «Дополнительные поля» и выберите «Новое дополнительное поле» для создания новой ПШ:
Перед вами откроется окно создания переменной шаблона. Здесь нужно ввести имя переменной и ее заголовок.
Старайтесь указывать вашим переменным шаблона имена, которое покажут их предназначение. Заголовок переменной так же важен, т.к. он будет являться подсказкой для контент-менеджера/редактора сайта о том, что представляет собой это поле и для вас будет подсказкой
Также желательно во вкладке «параметры ввода» указать тип поля.Для того, чтобы в дальнейшем редактор сайта смог примеру использовать текстовый редактор при вводе контента, в поле «тип ввода» укажем – Текстовый редактор.
Как Вы уже заметили, есть и прочие типы ввода и вывода, но мы рассмотрим их в дальнейшем.
Ещё зайдите во вкладку «Доступно для шаблонов» и установите галочку на против своего шаблона
Если я что либо упущу в своих статьях, то всю недостающую информацию вы всегда смежите почерпнуть в официальной документации.
Теперь таким же образом создаём переменные для остальных областей.
Небольшая подсказка: Если какая либо переменная шаблона, которую вы хотите создать, очень похожа на ранее созданную, то вместо того чтобы создавать званого новую переменную шаблона, Вы можете продублировать уже созданную ранее переменную, тем самым ускорить процесс создания новой переменной. Для этого используйте опцию «Копировать».
В моём случае все 3 области схожи, так что я продублирую только что созданную переменную шаблона. Для этого щелкнем правой кнопкой мыши по переменной, которую необходимо продублировать и выберем Копировать:
В открывшемся окошке изменим имя новой переменной и поставим галочку напротив пункта Копировать значения и сохраним её:
Ваша новая продублированная переменная шаблона будет иметь такой же доступ к шаблону, типы ввода и вывода, описание. Вам лишь необходимо будет отредактировать описание, так как описание уже будет относится к новой переменной и при необходимости сделать другие необходимые Вам изменения.
Теперь откроем для редактирования ресурс «Главная» и пройдете на вкладку «Дополнительные поля» там должны появиться две новые области контента.
Теперь эти две области доступны нам для редактирования (и для контент-редактора сайта), заполните их. Теперь давайте вставим их в шаблон для того, чтобы их содержимое автоматически парсировалось на нашу главную страницу. Для этого откроем шаблон и найдём контент 2 и 3 областей.
В моем случае код выглядит следующим образом:
После редактирования он приобретёт следующий вид:
<article class=»grid_4″> <div class=»indent»> <div class=»maxheight img-indent-bot»> [[*Cycle_home_1region_contenta]] </div> <a class=»button» href=»#»>More</a> </div> </article> <article class=»grid_4″> <div class=»indent-left»> <div class=»maxheight img-indent-bot»> [[*Cycle_home_2region_contenta]] </div> <a class=»button» href=»#»>More</a> </div> </article>
Теперь перейдём на домашнюю страницу и посмотрим на её вид:
Как вы видите, все три области заполнены контентом, который был вставлен динамически с трёх наших полей, из которых два поля – это только что созданные переменные шаблона.
У многих областей шаблона свои специальные классы форматирования, их можно выяснить посмотрев на код шаблона, а потом добавить его в области контента при помощи текстовый редактор движка.
Таким образом вы можете добавлять неограниченное количество различных переменных шаблона для вашего шаблона.
В данной статье мы рассмотрели лишь небольшую часть основ переменных шаблона, вообще информации о переменных шаблона намного больше. Мы ещё не раз будем возвращаться к переменным шаблона, изучим различные типы ввода и вывода их и будем продолжать экспериментировать.
В следующей статье мы добавим несколько функциональных кусочков к нашему сайту. В MODX Revolution функциональность к сайту добавляется через сниппеты. Так что следующую статью я начну со сниппетов.
web-revenue.ru
Создание дополнительных modx шаблонов
Приветствую вас уважаемые читатели! В предыдущих уроках мы натянули шаблон на MODX и разбили его на чанки. Сегодня мы создадим еще несколько шаблонов (в моем случае один из шаблонов будут строиться на основе основного шаблона, а второй будет пустым (для создания в последующем sitmap.xml).
Создание пустого MODX шаблона.
Для создания пустого шаблона, перейдите во вкладку «Элементы» и щелкните правой кнопкой мыши по вкладке Шаблоны, далее в выпадающем окошке выберите пункт «Быстро создать шаблон», в открывшемся окошке укажите имя шаблона, его категорию и описание при необходимости? в поле код прописываем [[*content]] и нажмите на кнопку «Сохранить».
Все пустой шаблон готов, в скором мы на его основе создадим sitmap.xml. Теперь мне необходимо создать шаблон без боковой колонки.
Создание дополнительного MODX шаблона.
Так как по сути шаблон в моем случае будет идентичен главному (за исключение что будет без бокового меню), я просто скопирую главный шаблон. Делается это очень просто, щелкаем правой кнопкой мыши по основному шаблону, далее в выпадающем меню выбираем «Копировать», в открывшемся окошке вводим имя нового шаблона и сохраняем.
Основной шаблон продублирован, осталось зайти в его код и удалить боковую колонку (ну и соответственно немного подкорректировать html код.
Ну вот как то так и таким образом вы можете создать сколько Вашей душе угодно шаблонов и затем назначать их любым страницам. Я сейчас создал 4 шаблона:
1й для главной (создал еще в прошлом уроке), 2й полностью пустой (нет css/ только вывод коннтента [[*content]], все остальные шаблоны на основе главного шаблона, вот так они выглядят:
ну и все тоже самое без хлебных крошек.
На сегодня все! В следующем уроке мы разберемся с переменными шаблона.
web-revenue.ru
Кастомизация форм в MODX Revolution
В MODX есть интересная возможность — вы можете менять внешний вид формы редактирования ресурсов практически как вам хочется. Причем вы можете сделать разные формы для разных групп пользователей, и даже для разных ресурсов. Можно выбирать разные профили форм для данного ресурса в зависимости от его шаблона, родителя или других свойств.
И для этого нам не придется писать ни одной строчки кода!
Давайте, посмотрим, что, например, можно сделать с формами:
Во первых, уберем лишние пункты верхнего меню в один общий пункт — «Разработчику». Для этого заходим в раздел «Система» -> «Действия», создаем в корне новый пункт меню и перетаскиваем все ненужные пункты туда:
Дальше заходим в раздел «Безопасность» -> «Настройка форм» и создаем новый профиль, например, «Контент-менеджер». Потом нажимаем на нем правой кнопкой мыши и выбираем «Редактировать», переходим на вкладку «Группы пользователей» и добавляем группу, к которой будут применены новые правила.
Далее мы создаем новый набор правил. Их два вида — один для формы создания ресурса, второй — для формы его редактирования (create и update, соответственно). Этих правил может быть несколько — хоть по правилу для каждого ресурса.
После того, как правило будет создано, вы увидите страницу настройки — там три вкладки: Информация о наборе правил, Регионы, Дополнительные поля.
На первой вкладке перечислены стандартные поля ресурса. Их можно отключать или переименовывать. Регионы — это вкладки у ресурса. Вы можете создать новый регион и поместить туда некоторые ТВ-параметры, тогда они будут у ресурса не на вкладке «Дополнительные поля», а на новой вкладе — которую вы укажете. Здесь же можно отключать стандартные вкладки, например, «Группы ресурсов».
На третьей вкладке вы указываете расположение того или иного ТВ-параметра.
Я сделал небольшую шпаргалку по стандартным регионам:
Итак, давайте сразу уберем для пользователя все вкладки, кроме первой. Убираем галочки у регионов: modx-page-settings, modx-panel-resource-tv, modx-resource-access-permissions. Дальше — из стандартных полей оставим только pagetitle и alias. У остальных галочки убираем. Указываем новое название для поля pagetitle: «Заголовок новости» и alias: «Адрес страницы».
После этого переходим на вкладку «Дополнительные поля» и указываем, что ТВ-параметры должны находиться в той или иной области формы (в соответствии со шпаргалкой).
Осталось указать, для каких ресурсов действует это правило — в пункте «Шаблон» указваем, к ресурсам с каким шаблонам применять правило. Если правило для всех шаблонов, то ничего не указываем. И еще есть два пункта: «Ограничивающее поле» и «Ограничивающее значение». Здесь можно указывать остальные поля.
Давайте, укажем, что это правило относится к ресурсам, находящимся в «Новостях» — в пункте «Ограничивающее поле» пишем parent, а в «Ограничивающее значение» id ресурса «Новости», например, 22.
ilyaut.ru
