Документация: Шаблонизатор списков
Данный виджет и дополнение Widgetstpl (Шаблонизатор) позволяют вам создавать и редактировать шаблоны для списков контента (статьи, новости, товары и т.д.) прямо из панели управления, без необходимости подключаться по FTP и создавать файлы вручную.
Каждый шаблон представляет собой изолированную тему, состоящую из HTML, CSS, JavaScript файлов и изображений, которые хранятся в отдельной папке. Вы можете легко создавать новые темы, дублировать существующие и редактировать их через встроенный редактор кода.
1. Окно редактора (Шаблонизатор)
Вкладка HTML: Основная структура вашего шаблона. Здесь используется упрощенный встроенный шаблонизатор.
Вкладки CSS / JS: Здесь вы пишете стили и скрипты, которые будут автоматически подключены при выводе этого виджета на сайте.
Вкладка «Изображения / Ресурсы»: Позволяет загрузить иконки, фоны и прочие файлы для шаблона. После загрузки вы можете вставить ссылку на них в свой код. Также поддерживается создание дополнительных CSS/JS файлов.
Предпросмотр: Справа находится окно предпросмотра. Оно обновляется автоматически, но вы также можете обновить его вручную кнопкой «Обновить» над ним. Доступно переключение видов (Desktop, Планшет, Мобильный) для проверки адаптивности.
2. Структура файлов и наследование CSS/JS
Глобальные файлы: Находятся в корневых папках css/ и js/ самого дополнения (на уровне всех тем). Они загружаются всегда, для всех тем. Здесь удобно размещать общие библиотеки.
Файлы виджета: Находятся в папках css/ и js/ внутри папки конкретного виджета (например, widget_list/). Они загружаются для всех тем этого виджета.
Файлы темы: Находятся внутри папки выбранной темы. Они загружаются только когда эта тема активна, позволяя переопределять глобальные стили.
3. Изображения
На вкладке «Изображения» вы можете загружать и управлять картинками для вашей темы.
Доступна загрузка нескольких файлов одновременно, а также загрузка картинок по прямой ссылке из интернета.
При клике на картинку открывается полноэкранная Галерея для удобного просмотра. Как в основном списке, так и внутри галереи, при клике на название файла появляется контекстное меню (Копировать путь, Переименовать, Дублировать, Удалить). Прямо из галереи изображение можно вставить в редактор кода специальной кнопкой.
Также окно вставки изображений можно вызвать прямо из редактора кода (HTML/CSS/JS) с помощью кнопки с иконкой «Волшебной палочки».
4. Проводник (Файловый менеджер)
Вкладка «Проводник» представляет собой полноценный файловый менеджер для папки вашей темы. Здесь вы можете создавать новые папки и файлы (CSS, JS, HTML, PHP).
Действия с файлом: При наведении курсора на файл или папку, справа появляются кнопки быстрых действий: переименовать, удалить, дублировать, скопировать/вырезать, скачать или скопировать относительный путь.
Массовые действия: Удерживая клавишу Ctrl (или Cmd на Mac), вы можете кликать по файлам, чтобы выделить сразу несколько. После этого снизу появится плавающее меню для работы с выделенными файлами (например, для массового удаления или архивации).
Перемещение (Drag-and-Drop): Вы можете просто захватить любой файл мышкой и перетащить его в другую папку для перемещения.
Предпросмотр: При наведении курсора на картинку в списке, рядом появится её увеличенная миниатюра.
5. Функции редактора кода
Быстрые действия (Волшебная палочка): При клике на любую строку в редакторе, справа на уровне этой строки появляется кнопка с иконкой волшебной палочки. Она открывает меню быстрых действий:
⚬ Вставить CSS / JS: Быстрое подключение дополнительных стилей или скриптов (создает или выбирает существующий файл из папки темы).
⚬ Обернуть в цикл: Выделите кусок HTML кода (например, блок карточки) и выберите эту опцию. «Волшебная палочка» сама обернет вашу верстку в цикл {each}… {/each} и подставит переменные — {item.title}, {item.url}, {item.image}, {item.teaser} и другие.
Важно: чтобы автозамена сработала, добавьте к нужным тегам специальные классы перед оборачиванием:
⚬ th-title — заменит содержимое на {item.title}
⚬ th-link — заменит атрибут href на {item.url}
⚬ th-img — заменит атрибут src на {item.image} (а alt на title)
⚬ th-teaser — заменит содержимое на {item.teaser} (и добавит условие)
⚬ th-date — заменит содержимое на {item.date_pub}
⚬ th-date-day — заменит содержимое на {item.date_day} (только день)
⚬ th-date-month — заменит содержимое на {item.date_month} (только месяц)
⚬ th-comments — заменит содержимое на {item.comments}
Этот список автозамен понемногу дополняется.
⚬ Обернуть в слайдер: Превращает выделенную верстку (или уже готовый цикл) в полнофункциональный слайдер-карусель (Swiper.js), с возможностью тонкой настройки через отдельное окно.
Горячие клавиши: Поддерживается стандартное автодополнение и форматирование кода. Сохранение осуществляется по Cmd+S (Mac) или Ctrl+S (Windows).
6. Синтаксис HTML шаблонизатора
Вывод записей (цикл)
Код, обернутый в теги {each}… {/each}, будет повторяться для каждой записи в списке.
Доступные переменные
Примечание: Вывод тегов типа {item.image} и {item.teaser} напрямую зависит от настроек виджета на вкладке «Устаревшие опции». Например, если там выключен вывод тизера или изображения, эти переменные будут пустыми.
{item.title}, {item.url}, {item.teaser}, {item.image} — основные данные записи.
{item.category.title}, {item.category.slug}, {item.category.url} — данные категории записи.
{item.user.nickname}, {item.user.avatar}, {item.user.profile_url} — данные автора (выводятся, если автор присоединен к списку).
{ctype.name}, {ctype.title} — системное имя и название типа контента (выводятся где угодно в шаблоне).
{item.date_time}, {item.date_ago} — отформатированная дата публикации (например: «сегодня 7:15»).
{index} — порядковый номер записи в цикле (начинается с 0).
{iteration} — порядковый номер записи (начинается с 1).
Условия (if)
Вы можете использовать блоки {if переменная оператор значение}… {/if}. Поддерживаются операторы: ==, !=, >, <, >=, <=
Примеры:
{if item.rating > 0} Рейтинг: {item.rating} {/if}
{if first} Это первая запись! {/if}
{if last} Это последняя запись! {/if}
{if index == 0} Выводим первый элемент крупно {/if}
{if !item.image} Картинки нет {/if} — восклицательный знак используется для отрицания.
Группировка записей
Тег {group ...} позволяет вывести содержимое только тогда, когда значение переменной изменилось по сравнению с предыдущей записью. Это идеально подходит для вывода заголовков групп (например, дат или категорий).
{group item.category.title}
{if not first}</div>{/if}
<div class=«category-block»>
<h2>{item.category.title}</h2>
{/group}
<div class=«item»>{item.title}</div>
Вывод дополнительных полей и инфобара
{item.fields.price.html} — выводит готовый HTML конкретного поля (например, поля price).
{info_bar.comments.html}, {info_bar.user.html} — выводят элементы системного инфобара.
Можно перебрать все включенные поля циклом: {if item.fields} {fields}
{field.title}: {field.html}
{/fields} {/if}
7. Важные советы
Не забывайте сохранять изменения (кнопка сохранения в панели админки или сочетание Cmd+S / Ctrl+S прямо в редакторе кода).
Если что-то пошло не так, вы всегда можете открыть вкладку «Настройки» и сбросить шаблон, удалив папку или пересоздав тему.
Встроенный предпросмотр работает с «рыбными» данными (моковыми записями). Реальные данные (рейтинги, категории) могут отличаться на самом сайте, но структура будет в точности такой, как вы её сверстали.
8. Использование нейросетей (ChatGPT, Claude и др.)
Вы можете значительно ускорить создание шаблонов, поручив верстку нейросети. Например, загрузив макет или скриншот того, как должен выглядеть список.
Совет: Сначала попросите нейросеть написать просто чистый статический HTML и CSS. Добейтесь, чтобы макет выглядел идеально в предпросмотре. И только после утверждения макета попросите ИИ интегрировать переменные шаблонизатора (теги {each}, {item.title} и т.д.). Так будет гораздо проще вносить правки в верстку и вести диалог с нейросетью.
Простой промпт (шаг 1):
«Сверстай карточку контента по прикрепленному скриншоту. Используй чистый HTML и CSS (желательно Flexbox или Grid). Классы называй в стиле БЭМ. Никаких сторонних библиотек. Когда верстка будет готова, я попрошу тебя интегрировать переменные нашего шаблонизатора.»
Подробный промпт (шаг 2 — интеграция):
«Отлично, теперь интегрируй в этот HTML наш шаблонизатор.
1. Оберни список карточек в теги {each}… {/each}.
2. Замени статический контент на переменные:
— Заголовок: {item.title}
— Ссылка (href): {item.url}
— Картинка (src): {item.image}
— Текст/анонс: {item.teaser}
— Дата: {item.date_pub}
— Кол-во комментариев: {item.comments}
Вот пример того, как выглядит базовая верстка в нашем движке:
<div class=«theme_cards»>
{each}
<a href="{item.url}" class=«card-item»>
<img src="{item.image}" alt="{item.title}">
<div class=«card-body»>
<h3>{item.title}</h3>
<p>{if item.teaser}{item.teaser}{/p}{/if}
</div>
</a>
{/each}
</div>»
9. Публикация и перенос шаблона
Превью шаблона: Вы можете добавить картинку-превью для вашего шаблона. Создайте папку snapshots в корне вашей темы через «Проводник» и загрузите туда скриншот. Эта картинка будет отображаться при наведении на название вашей темы в выпадающем списке выбора шаблонов. (Скриншот можно сделать прямо из редактора кнопкой «Снимок» над окном предпросмотра).
Как поделиться шаблоном: Любой созданный вами шаблон — это просто папка внутри themes/. Вы можете сжать эту папку в ZIP-архив и поделиться ей с другими.
Как установить чужой шаблон: Достаточно загрузить и распаковать эту папку (или архив) в директорию themes/ такого же виджета на вашем сайте, и шаблон сразу появится в списке со всеми стилями и скриптами.