Контакты | E-mail: info@modx-evo.ru | Заказать обратный звонок



Урок 12 – MODx Evo TV параметры

В прошлом уроке мы сделали новостную ленту для нашего сайта, в этом же уроке мы познакомимся еще с одним термином MODx – TV (template variables) параметр.

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

Где чаще всего применяются TV параметры:

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

Создаем TV параметр

Заходим в административную часть сайта и переходим на вкладку TV параметры: «Элементы»-«Управление элементами»-«Параметры (TV)».

modx tv параметры modx evo tv параметры

«Имя параметра» - наименование нашего нового параметра, давайте назовем его img.

«Заголовок» - заголовок параметра, впишем - изображение для статьи.

«Описание» - описание параметра, заполним – изображение-анонс для ленты новостей.

«Существующая категория» - выберите свою категорию, для группировки параметра по категории, если их будет много, то так проще его найти.

«Тип ввода» - типа параметра, выберите из списка «Image».

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

tv параметры

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

tv параметры modx

Вот мы и создали наш первый TV параметр MODx.

Назначаем изображение для ресурса

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

Давайте создадим 3 изображения размером 100x100 пикселей и назначим эти изображения для наших ресурсов новостей.

Мы назначили ресурсам наши изображения, остается только вывести их на главной странице, откройте наш HTML шаблон главной страницы index.html и найдите кусок кода, который отвечает за вывод анонса новостей на странице:

tv modx

Как вы видите анонс новостей представляет собой ненумерованный список, причем последний элемент списка имеет класс last.

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

{ {MAINNEWS}}

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

Создаем новый чанк, как мы это делали в уроке 4 , называем его MAINNEWS и в содержимое чанка вставляем следующий код:

[ [Ditto? &parents=`8` &display=`3` &tpl=`new-tpl` &tplLast=`new-last-tpl`]]

Это не что иное, как вызов сниппета Ditto c параметрами: parents – идентификатор контейнера, из которого будут выбираться новости в моем случае 8, display – количество новостей в выборке, tpl – имя чанка для шаблона новости, tplLast – имя чанка для шаблона последней новости в списке.

Остается создать 2 чанка для шаблона, заходим на страницу создания чанков создаем чанк, указываем имя чанка tpl и копируем в содержимое чанка код из index.html, который отвечает за вывод новости:

modx tv параметры

Заменяем атрибут src нашего изображения на [ +img+], в атрибут alt вписываем [ +pagetitle+], текст между тегами h2 заменяем на [ +pagetitle+], анонс новости заменяем на [ +introtext+], атрибут ссылки href меняем на [~~], а надпись «Continue Reading» меняем на «Подробнее».

Создаем второй чанк с именем new-last-tpl, копируем в его содержимое код из HTML шаблона, отвечающий за вывод последней новости с классом last и проделываем для него тоже самое. Обновляем нашу главную страницу, если Вы все сделали правильно, то у вас должно получиться следующее:

modx tv параметры

На этом наш урок окончен, мы научились создавать TV параметры для шаблонов, в дальнейшем я покажу, как их еще можно применять на практике. А в следующем уроке мы познакомимся еще с одним сниппетом MODx – eForm и создадим для нашего сайта контактную форму.


Просмотров: 5884


Статьи по теме:


Написать комментарий

Поля помеченные * обязательны для заполнения.


mmoguider
Постов: 1
Comment
SUBJ1
Добавлен #1 на : Чт января 05, 2017, 08:01:45
Использовать TV параметры будем при добавлении изображений новостей и выводе этих изображений на главной странице с кратким описанием новости.

Будь в курсе!

Введите Ваш Email и имя.

Digital Newsletter

Чтобы отписаться нажмите сюда ».