Модификация позволяет вывести карточки постов из потоков Тильды в Zero-блок с любой вёрсткой и внешним видом.
Как работает модификация
Общие механики
Модификация выводит посты из потока Тильды в Zero-блок: данные постов берутся из потока через API Тильды, а вёрстка Zero-блока используется как шаблон оформления. В блоке размечается один ряд карточек-шаблонов, модификация берёт их расположение и размеры как образец, клонирует карточку под количество постов на странице и подставляет в размеченные элементы реальные значения из потока: название, описание, изображение, дату и ссылку на пост. За счёт этого внешний вид карточек полностью определяется вёрсткой блока.
Пока данные подгружаются из потока, на месте контента показываются скелетоны — заглушки, которые сменяются реальными значениями после загрузки. Сетка карточек пересчитывается автоматически, в том числе при изменении размера окна. Если в потоке нет ни одного поста, вместо ленты показывается отдельный блок пустого состояния.
Дата публикации форматируется модификацией по параметрам dateformat и lang: поддерживаются полный и сокращённый месяц («1 января 2026», «1 янв 2026») и числовой формат («01.01.2026», «01.01.26») на русском или английском языке. Язык по умолчанию определяется по стране проекта Тильды.
Определение номера потока
Поток, из которого выводятся посты, задаётся параметром params.feeduid — это внутренний идентификатор раздела потоков в Тильде. Определить его можно двумя способами.
В генераторе кода есть возможность автоматически определить номер потока по ссылке на опубликованную страницу. Для этого на временную страницу необходимо добавить блок потоков FD301, выбрать нужный раздел с потоком, опубликовать страницу и вставить ссылку на неё в генератор кода. После нажатия на кнопку 🔄, номер потока автоматически подтянется в код.
Номер потока также можно получить вручную: в разделе проекта «Сайт → Потоки → Поток» адрес страницы потока имеет вид https://feeds.tilda.ru/posts/?feeduid=000000000000, где значение после feeduid= – и есть нужный идентификатор.
Пагинация
Когда постов в потоке больше, чем помещается на одной странице (params.perpage, по умолчанию 12), они разбиваются на страницы, а под потоком появляется отдельный блок пагинации. Переключение страницы подгружает следующую порцию постов без перезагрузки страницы, а если включён параметр params.scrolltotop — прокручивает к началу блока.
Внешний вид номеров страниц в активном и неактивном состоянии берётся из кнопок-шаблонов в самом блоке.
Начало работы
Установка библиотеки
Для работы потоков необходимо подключить библиотеку модификаций в <head> сайта. Скрипт устанавливается только один раз и автоматически загружает нужный мод при вызове функции.
<script src="https://cdn.postnikovmd.com/tilda@1.6/mods.min.js"></script>Дальнейшая настройка производится по инструкции к каждому из вариантов:
Элементы
Ниже приведены элементы, из которых состоят потоки. Они задаются и настраиваются в интерфейсе Тильды.
* – обязательные элементы
Функции и параметры
Методы, с помощью которых можно управлять работой потоков. Подгружаются асинхронно как функции объекта feed.
В качестве аргументов для настройки потоков передаются следующие параметры:
События
Пользовательские события позволяют управлять последовательностью инициализации модификаций и используются для совмещения нескольких модов или стороннего кода. Их можно использовать, чтобы:
Запустить потоки по срабатыванию события
Отложить инициализацию потоков можно с помощью параметров event и timeout. Например, запустить их через 100ms после срабатывания customEvent можно таким образом:
Отложить инициализацию потоков можно с помощью параметров event и timeout. Например, запустить их через 100ms после срабатывания customEvent можно таким образом:
feed.init(".uc-feed", { feeduid: "000000000000", event: "customEvent", timeout: 100 })Если модификация должна запуститься после срабатывания сразу нескольких событий, достаточно перечислить их через запятую: event: "customEvent1, customEvent2, customEvent3".
Запустить сторонний код после отрисовки потоков
Если код нужно выполнить после того, как потоки полностью отрисуются, добавьте слушатель события feedinit-id, где feedinit — событие отрисовки потоков, id — класс блока без префикса uc или rec. Например, если у блока с потоками класс .uc-feed, то слушатель события добавляется следующим образом:
Если код нужно выполнить после того, как потоки полностью отрисуются, добавьте слушатель события feedinit-id, где feedinit — событие отрисовки потоков, id — класс блока без префикса uc или rec. Например, если у блока с потоками класс .uc-feed, то слушатель события добавляется следующим образом:
window.addEventListener("feedinit-feed", function(){ ... })Запустить другую модификацию после отрисовки потоков
Логика работы пользовательских событий одинакова для всех модификаций и помогает интегрировать их друг с другом. Например, запустить вкладки после отрисовки потоков можно через событие feedinit:
Логика работы пользовательских событий одинакова для всех модификаций и помогает интегрировать их друг с другом. Например, запустить вкладки после отрисовки потоков можно через событие feedinit:
tabs.init(".uc-feed", { event: "feedinit-feed" })Инициализация
Код инициализации потоков вставляется в блок T123 в конец страницы. Его можно скопировать в генераторе кода или добавить на страницу вручную. В исходном виде он выглядит таким образом:
<!--feed.js Потоки в Zero-блоке. https://postnikovmd.com/mods/feed-->
<script>feed.init(".uc-feed", { feeduid: "000000000000" })</script>Пример использования
В блоке .uc-feed создаётся ряд карточек-шаблонов с классом .post и ссылкой #post, внутри — элементы .post-image, .post-title, .post-descr, .post-date; рядом — блок пагинации .uc-feed-pagination. В коде инициализации указывается класс блока и номер раздела потока:
<script>feed.init(".uc-feed", { feeduid: "000000000000" })</script>Пример: Потоки в Zero-блоке
