MODx TV параметри
Минулого уроку ми зробили стрічку новин для нашого сайту, в цьому ж уроці ми познайомимося ще з одним терміном MODx – TV (template variables) параметр.
TV параметр MODx це змінна шаблону, досить гнучкий інструмент, що часто використовується.
Де найчастіше застосовуються TV параметри:
В рамках цього уроку ми навчимося створювати та призначати шаблонам TV параметри, а також подивимося, як їх можна використовувати на практиці, а саме як вивести зображення-анонс для нашої стрічки новин.
Створюємо TV параметр
Заходимо в адміністративну частину сайту та переходимо на вкладку TV параметри: «Елементи»-«Керування елементами»-«Параметри (TV)».
«Ім'я параметра»- найменування нашого нового параметра, давайте назвемо його img.
«Заголовок»- заголовок параметра, впишемо зображення для статті.
"Опис"- опис параметра, заповнимо - зображення-анонс для стрічки новин.
"Тип введення"- типу параметра, виберіть зі списку "Image".
Інші поля залишаємо за замовчуванням, залишилося тільки призначити наш параметр для шаблону нашої новини, для цього зі списку шаблонів поставте галочку навпроти вашого шаблону:
Натисніть зберегти і перейдіть в редагування ресурсу будь-якої новини, доданої раніше, якщо ви все зробили правильно, то помітите, що у вас при редагуванні ресурсу з'явилося ще одне поле:
Ось ми створили наш перший TV параметр MODx.
Призначаємо зображення для ресурсу
Натискаємо на кнопку «Вставити» у вікні вибираємо файл, або завантажуємо його з комп'ютера, зберігаємо наш ресурс.
Давайте створимо 3 зображення розміром 100×100 пікселів та призначимо ці зображення для наших ресурсів новин.
Ми призначили ресурсам наші зображення, залишається лише вивести їх на головній сторінці, відкрийте наш HTML шаблон головної сторінки index.html та знайдіть шматок коду, який відповідає за виведення анонсу новин на сторінці:
Як ви бачите анонс новин є ненумерованим списком, причому останній елемент списку має класlast.
Відкриваємо наш шаблон головної сторінки та видаляємо список із нього, тобто весь вміст між тегами ul, вимикаючи самі теги, а замість них вставляємо наступну конструкцію:
Як ви здогадалися, це виклик чанка, який відповідатиме за виведення анонсу новин, тепер створимо сам чанк.
Створюємо новий чанк, як ми це робили в уроці 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 і створимо для нашого сайту контактну форму.