[QuickView] - быстрый просмотр в модальном окне. Модальное окно modx revo
Создание удобной формы авторизации в MODX Revolution с помощью Login
Создадим сегодня вход на сайт с помощью сниппета Login. Для таких целей я обычно использую Loginza, но для моей задачи понадобился именно Login.
Требования к уроку:
В этом уроке я буду использовать Twitter Bootstrap modal JS для всплывающего окна входа, чтобы пользователь не переключался на страницу входа, а потом переходил назад. Итак пропишем в нашем шаблоне пути к необходимым библиотекам.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> <script src="/assets/components/themebootstrap/js/bootstrap.min.js" type="text/javascript"></script> <link href="/assets/components/themebootstrap/css/bootstrap.css" rel="stylesheet"> <link href="/assets/components/themebootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">Если вы установили шаблон Bootstrap, то там уже всё прописано в чанке Head. Модальное окно будет вызывать кнопка "Вход", создадим код кнопки и код модального окна, в которое вставим вызов сниппета Login:
Кнопка вход запускает модальное окно - контейнер с. Более детально можете рассмотреть настройку модального окна в документации по modal.js внизу поста ссылка. Далее нам хотелось бы, чтобы для вошедшего пользователя модальное окно не всплывало, а была просто кнопка "Выход" и при клике на неё пользователь выходил. Из документации Login получаем код кнопки:
<a href="[[~21? &service=logout]]" title="Logout">Logout</a>× 21 - это ИД ресурса, где находится вызов сниппета LoginПри входе пользователь получает user.id с определённым значением, для анонимного пользователя (Anonymouse) данное значение user.id=0. Воспользуемся этим и переделаем код нашей кнопки, используя условные фильтры вывода:
Вот и все!
uscms.ru
быстрый просмотр в модальном окне. / modx.pro
QuickView — быстрый просмотр любого элемента в модальном окне.
— работа с любыми ресурсами
— работа с чанками, сниппетами, шаблонами
— вывод в модальное окно, либо в указанный селектор
— поддержка шаблонизатора fenom
Основное отличие от ранних версий работа без каких либо сниппетов, нужно только инициализировать скрипт. Интерактивные примеры тут quickview.vgrish.ru/
Примеры
пример 1Постановка: — требуется по клику вывести в модальное окно чанк test — задействовать ресурс с идентификатором 1 — добавить кнопку закрыть окно
Вызов:
<a data-click data-quickview-mode="modal" data-data-action="chunk" data-data-element="test" data-data-id="1" data-dialog-buttons='["close"]' >ссылка</a> пример 2Вызов:
<a data-click data-quickview-mode="modal" data-data-action="snippet" data-data-element="!msCart" data-dialog-size="size-wide" data-dialog-title="cart" >корзина</a> пример 3Постановка: — требуется по клику вывести в модальное окно чанк msProduct.content — задействовать ресурс с идентификатором 7
Вызов:
<a data-click data-quickview-mode="modal" data-data-element="msProduct.content" data-data-id="7" data-dialog-title="" data-dialog-size="size-wide" >продукт</a>пример 4
Постановка: — требуется по наведению вывести в селектор чанк test — задействовать ресурс с идентификатором 1 — добавить кнопку закрыть окно
Вызов:
<a data-mouseover data-quickview-mode="selector" data-data-action="chunk" data-data-element="test" data-data-id="1" data-quickview-output=".quickview-output-1" data-output-buttons='["close"]' >наведите</a>Постановка: — требуется список продуктов minishop — по клику вывести модалку с продуктом test — задействовать актуальный ресурс — добавить кнопку соседи
Вызов:
<div data-quickview-mode="modal" data-data-action="chunk" data-data-element="product.quickview" data-quickview-loop="true" data-quickview-viewhash="true" data-dialog-size="size-wide" data-dialog-buttons='["prev","next"]'> [[!pdoPage? &parents=`0` &element=`msProducts` &tpl=`@INLINE <a data-click data-data-id="[[+id]]" data-dialog-title="[[+pagetitle]]" >[[+pagetitle]]</a> ` ]] [[!+page.nav]]</div>пример 6
Постановка: — вывести в модальном окне чанк msProduct.content — задействовать bootstrap-modal, без bootstrap-dialog
Вызов:
<a data-click data-toggle="modal" data-target=".bs-modal" data-quickview-mode="selector" data-quickview-output=".bs-quickview-output" data-data-element="msProduct.content" data-data-id="7" >ссылка</a> Также необходимо тело модалки, куда по клику в селектор будет подгружен результатКод:
<div> <div> <div> <div></div> </div> </div> </div>
Подключение QuickView
В удобном месте шаблона сайта вам нужно вставить вызов сниппета QuickView.initialize[[!QuickView.initialize? &bootstrapModalJsCss=`0` &bootstrapDialogJsCss=`1` &services=`miniShop2,msoptionsprice` ]] Примечание!— для подгрузки скриптов и стилей bootstrap-modal нужно указать
&bootstrapModalJsCss=`1` — для подгрузки скриптов и стилей bootstrap-dialog нужно указать&bootstrapDialogJsCss=`1` — для подгрузки скриптов и стилей сторонних пакетов нужно перечислить ихservices=`miniShop2,msoptionsprice`Настройка QuickView
Основные настройки QuickView находяться Настройки системы -> QuickViewallowed_chunk — список разрешенных чанковallowed_snippet — список разрешенных сниппетовallowed_template — список разрешенных шаблонов
front_css — стили фронтендаfront_js — скрипты фронтенда
Основное
Вы можете использовать QuickView где угодно на странице. Для этого нужно подключить сниппетQuickView.initialize, указать нужным элементам необходимые параметры вызова.Примечание!
data-quickview-mode — режим работы, modal или selector
data-data-action — действие, chunk, snippet, templatedata-data-element — название элементаdata-data-id — идентификатор обрабатываемого ресурса
data-dialog-* — параметры вывода при модальном окне
data-output-* — параметры вывода при селекторе
Режим срабатывания
data-click режим срабатывания по кликуВызов:
<a data-click ...</a> data-mouseover режим срабатывания по наведениюВызов:
<a data-mouseover ...</a>Режим работы
data-quickview-modemodal — режим работы с модальным окномВызов:
<a data-click data-quickview-mode="modal" ...</a> data-quickview-modeselector — режим работы с селекторомВызов:
<a data-click data-quickview-mode="selector" ...</a>Действия
data-data-actionchunk — работа с чанкомВызов:
<a data-click data-data-action="chunk" ...</a> data-data-actionsnippet — работа со сниппетомВызов:
<a data-click data-data-action="snippet" ...</a> data-data-actiontemplate — работа с шаблономВызов:
<a data-click data-data-action="template" ...</a>Кнопки
data-*-buttons задать необходмые кнопки. Доступны prev,next,closeВызов:
<a data-click data-dialog-buttons='["prev","next"]' ...</a> кастомизация задать необходимые параметры<a data-mouseover data-quickview-mode="modal" data-data-element="test" data-data-id="1" data-dialog-buttons='[ {"action":"close","label":"закрыть","title":"закрыть"} ]' >наведите</a>Меняем вид всплывающих сообщений Ajaxform (Modx Revo)
По умолчанию, после успешной отправки формы Ajaxform выводит небольшое выплывающее окошко в правом углу с сообщение об успешной отправке, которое не все посетители замечают, отсюда могут заполнить форму несколько раз, да и внешний вид оповещения немного премитивный и зачастую возникает необходимость изменить его под стилистику сайта, да поменять его положение.
Изменение стилей и положения всплывающего окна Ajaxform
AjaxForm для стилизации окон использует стили jGrowl, которые лежат в assets/components/ajaxform/css/lib/jquery.jgrowl.min.css, можно поправить все прямо там, но если вы обновите компонент, то и стили ваши обновятся на дефолтные, следовательно их лучше предопределить в своем css.
к примеру положение окна по дефолту заданно вот таким стилем
.jGrowl.top-right { top:0; right:0; }
.jGrowl.top-right { top:0; right:0; } |
те прижато к верху и правой стороне
чтобы сменить положение, к примеру по центру, достаточно предопредилить их в своем css, к примеру так:
.jGrowl.top-right { top:40% !important; width:30% !important; left:35% !important; }
.jGrowl.top-right { top:40% !important; width:30% !important; left:35% !important; } |
И точно таким же образом можно изменить весь внешний вид окошко с уведомлением, вот мой конечный код для одного из сайтов:
#jGrowl { font-size:18px; margin:0px 12px 0; } .jGrowl.top-right { left:35% !important; top:35% !important; } #jGrowl .jGrowl-notification { position: relative; width: 320px; padding: 15px; text-align:center; background: none repeat 0 0 #fff !important; box-shadow: 0 0 0 7px #8ab933 !important; border: 0px solid rgba(255, 255, 255, 0.49) !important; } #jGrowl .jGrowl-notification .jGrowl-close { position: absolute; right: 4px; top: 4px; color: #8ab933 !important; } #jGrowl .jGrowl-notification .jGrowl-message { color:#8ab933 !important; }
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 | #jGrowl { font-size:18px; margin:0px 12px 0; } .jGrowl.top-right { left:35% !important; top:35% !important; } #jGrowl .jGrowl-notification { position: relative; width: 320px; padding: 15px; text-align:center; background: none repeat 0 0 #fff !important; box-shadow: 0 0 0 7px #8ab933 !important; border: 0px solid rgba(255, 255, 255, 0.49) !important; } #jGrowl .jGrowl-notification .jGrowl-close { position: absolute; right: 4px; top: 4px; color: #8ab933 !important; } #jGrowl .jGrowl-notification .jGrowl-message { color:#8ab933 !important; } |
в итоге всплывает вот такое окошко по центру сайт.
web-revenue.ru
Форма обратной связи MODX revo
Очень быстро создаем форму обратной связи на сайте под управлением CMF MODX revo используя пакет FormIt.Процесс установки пакетов на MODX revo подробно описывать в этом посте не буду по причине его простоты и большого количества материала на эту тему в интернете.Напомню лишь последовательность действий:<Система> - <Управление пакетами> - <Загрузить дополнения> - <Поиск>(вводим - FormIt)
Нажимаем <Загрузить>, а затем <Установить>
Далее создадим новый чанк и назовем его <form>
и вставляем следующий код:
[[!FormIt?
&hooks=`spam,email,redirect`
&emailTpl=`sendEmailTpl`
&emailTo=`[email protected]`
&emailSubject=`Письмо с сайта [[++site_url]]`
&redirectTo=`178`
&validate=`name:required,email:email:required,text:required:stripTags,phone:required`
]]
[[!+fi.error_message:notempty=`<p>[[!+fi.error_message]]</p>`]]
<form action="[[~[[*id]]]]" method="post">
<input type="hidden" name="nospam:blank" value="" />
<label for="name">Ваше имя <span>*</span>:</label>
<span>[[!+fi.error.name]]</span>
<input type="text" name="name" value="[[!+fi.name]]" />
<label for="phone">Ваш телефон <span>*</span>:</label>
<span>[[!+fi.error.phone]]</span>
<input type="text" name="phone" value="[[!+fi.phone]]" />
<label for="email">Ваш Email <span>*</span>:</label>
<span>[[!+fi.error.email]]</span>
<input type="text" name="email" value="[[!+fi.email]]" />
<label for="text">Введите сообщение <span>*</span>:</label>
<span>[[!+fi.error.text]]</span>
<textarea name="text" cols="55" rows="7" value="[[!+fi.text]]">[[!+fi.text]]</textarea>
<input type="submit" value="Отправить" />
</form>
Создаем чанк <sendEmailTpl>
Он описывает какую информацию отсылать на почту и вставляем туда код:
<p>От кого: [[+name]]</p>
<p>Телефон: [[+phone]]</p>
<p>E-mail: [[+email]]</p>
<p>Сообщение: [[+text]]</p>
Здесь:
• [[+name]] — имя отправителя
• [[+phone]] — телефон отправителя
• [[+email]] — электронная почта отправителя
• [[+text]] — сообщение, написанное отправителем на сайте
Далее создадим страницу с сообщением об успешной отправке и благодарностью за то,что пользователь отправил сообщение через форму обратной связи.
Например:
<p>Благодарим Вас за отправку письма!Ваше письмо успешно отправлено.Наш специалист ответит Вам в ближайшее время.</p>
На эту страницу настроим редирект по ее ID.
Не забываем изменить значение параметра &redirectTo=`178` в месте вызова сниппетаFormIt (в коде чанка <form>), куда следует передать корректный ID ресурса.А также &emailTo=`[email protected]` - естественно на свой ящик.
У меня эта страница имеет ID — 178.Этот идентификатор мы будем использовать ниже при вызове FormIt.
Рассмотрим его подробнее блок вызова дополнения FormIt:
[[!FormIt?
&hooks=`spam,email,redirect`
&emailTpl=`sendEmailTpl`
&emailTo=`[email protected]`
&emailSubject=`Письмо с сайта [[++site_url]]`
&redirectTo=`178`
&validate=`name:required,email:email:required,text:required:stripTags,phone:required`
]]
Здесь:
• Первый параметр — hooks. Хуки — это скрипты дополнения FormIt.
В нашем случае у нас их два — email отвечает за саму отправку электронной почты, а redirect — отсылает пользователя на страницу с благодарностью за контакт;
• emailTpl — шаблон письма, отправляемого на сайте. Выше мы его создали и отредактировали;
• emailSubject — тема писем, которые будут приходить с сайта;
• redirectTo — ID страницы, которую будем показывать пользователю после того, как он отправил сообщение через форму обратной связи. Мы ее создали ранее;
• emailTo — адрес электронной почты, куда будут приходить письма с сайта.
Необходимо добавить несколько правил CSS чтобы наша форма приобрела более привлекательный вид.
input, label, textarea{
display: block;
}
input, textarea{
margin: 0 0 10px 0;
border: 1px solid #ccc;
padding: 5px;
}
input.submit_button{
background-color: #43A52B;
border: 1px solid #358222;
padding: 5px 10px;
border-radius: 3px;
font: 13px Arial, Verdana, Tahoma, sans-serif;
color: #fff;
cursor: pointer;
}
input.submit_button:hover{
background-color: #358222;
}
span.required,
span.error{
color: #ff0000;
}
span.required{
font-size: 18px;
}
span.error{
font-size: 11px;
}
На сайте MODX revo это выглядит так:
Итогом нашей работы стала форма обратной связи MODX revoс применением пакета FormIt.
Не устраевает внешний вид? Редактируйте CSS код или пишите свой.
Вот собственно всё.
Заказывайте темы для статей.
Если есть трудности – поможем с их решением.
maxweb.by
Переменные шаблона 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
