Урок 12 – MODx Evo TV параметры
В прошлом уроке мы сделали новостную ленту для нашего сайта, в этом же уроке мы познакомимся еще с одним термином MODx – TV (template variables) параметр.
TV параметр MODx это переменная шаблона, довольно гибкий и часто используемый инструмент.
Где чаще всего применяются TV параметры:
- Добавление изображения-анонса новости или статьи;
- Для вывода количества просмотров статьи;
- Для хранения тегов статей и вывода похожих статей;
- Для создания xml-карты сайта;
- И много другого.
В рамках данного урока мы научимся создавать и назначать шаблонам TV параметры, а также посмотрим, как их можно использовать на практике, а именно как вывести изображение-анонс для нашей новостной ленты.
Создаем TV параметр
Заходим в административную часть сайта и переходим на вкладку TV параметры: «Элементы»-«Управление элементами»-«Параметры (TV)».
«Имя параметра» - наименование нашего нового параметра, давайте назовем его img.
«Заголовок» - заголовок параметра, впишем - изображение для статьи.
«Описание» - описание параметра, заполним – изображение-анонс для ленты новостей.
«Существующая категория» - выберите свою категорию, для группировки параметра по категории, если их будет много, то так проще его найти.
«Тип ввода» - типа параметра, выберите из списка «Image».
Остальные поля оставляем по умолчанию, осталось только назначить наш параметр для шаблона нашей новости, для этого из списка шаблонов поставьте галочку напротив вашего шаблона:
Нажмите сохранить и перейдите в редактирование ресурса любой новости добавленной ранее, если вы все сделали верно, то заметите, что у вас при редактировании ресурса появилось еще одно поле:
Вот мы и создали наш первый TV параметр MODx.
Назначаем изображение для ресурса
Нажимаем на кнопку «Вставить» в открывшемся окне выбираем файл, или загружаем его с компьютера, сохраняем наш ресурс.
Давайте создадим 3 изображения размером 100x100 пикселей и назначим эти изображения для наших ресурсов новостей.
Мы назначили ресурсам наши изображения, остается только вывести их на главной странице, откройте наш HTML шаблон главной страницы index.html и найдите кусок кода, который отвечает за вывод анонса новостей на странице:
Как вы видите анонс новостей представляет собой ненумерованный список, причем последний элемент списка имеет класс 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, который отвечает за вывод новости:
Заменяем атрибут src нашего изображения на [ +img+], в атрибут alt вписываем [ +pagetitle+], текст между тегами h2 заменяем на [ +pagetitle+], анонс новости заменяем на [ +introtext+], атрибут ссылки href меняем на [~~], а надпись «Continue Reading» меняем на «Подробнее».
Создаем второй чанк с именем new-last-tpl, копируем в его содержимое код из HTML шаблона, отвечающий за вывод последней новости с классом last и проделываем для него тоже самое. Обновляем нашу главную страницу, если Вы все сделали правильно, то у вас должно получиться следующее:
На этом наш урок окончен, мы научились создавать TV параметры для шаблонов, в дальнейшем я покажу, как их еще можно применять на практике. А в следующем уроке мы познакомимся еще с одним сниппетом MODx – eForm и создадим для нашего сайта контактную форму.
Постов: 1
Добавлен #1 на : Чт января 05, 2017, 08:01:45