Потоки в Zero-блоке

Модификации

Потоки

Документация

10 минут

Модификация позволяет вывести карточки постов из потоков Тильды в 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>

Дальнейшая настройка производится по инструкции к каждому из вариантов:

Потоки в Zero-блоке

Элементы

Ниже приведены элементы, из которых состоят потоки. Они задаются и настраиваются в интерфейсе Тильды.

Элемент	Описание	Класс/Ссылка
Блок потоков*	Zero-блок с одним рядом карточек-шаблонов. Модификация клонирует карточки внутри него под посты из потока и автоматически адаптирует его высоту	.uc-feed
Карточка поста*	Содержимое карточки, объединённое в группу типа Object. Рекомендуется верстать через автолэйаут. Чтобы открывать пост по отдельной кнопке, задайте ссылку #post только ей	.post, #post
Изображение поста	Изображение поста (Image)	.post-image
Название поста	Текстовый элемент с названием поста	.post-title
Описание поста	Короткое текстовое описание поста	.post-descr
Дата поста	Дата публикации. Форматируется по параметрам dateformat и lang	.post-date
Блок пагинации	Отображается, если постов больше, чем помещается на странице	.uc-feed-pagination
Номер страницы	Кнопка с номером страницы	#page
Разделитель	Кнопка-разделитель «…» между страницами	.page-separator
Кнопки «Назад»/«Вперёд»	Кнопки переключения страниц пагинации	#prev, #next
Блок пустого состояния	Отображается, когда в потоке нет ни одного поста	.uc-feed-empty

* – обязательные элементы

Функции и параметры

Методы, с помощью которых можно управлять работой потоков. Подгружаются асинхронно как функции объекта feed.

Функция	Описание	Триггер
feed.init(selector, params)	Инициализирует потоки в Zero-блоке	DOM Content Loaded, Window Resize

В качестве аргументов для настройки потоков передаются следующие параметры:

Параметр	Описание	Тип	Значение по-умолчанию
selector	Класс блока потоков	string	-
params.feeduid	Идентификатор раздела потока в Тильде	string	-
params.card	Класс карточки поста	string	'.post'
params.title	Класс названия поста	string	'.post-title'
params.descr	Класс короткого описания поста	string	'.post-descr'
params.image	Класс изображения поста	string	'.post-image'
params.date	Класс даты публикации поста	string	'.post-date'
params.link	Ссылка для перехода на страницу поста	string	'#post'
params.empty	Класс блока пустого состояния	string	selector + '-empty'
params.perpage	Количество постов на странице	number	12
params.sort	Порядок отображения постов	string	'desc' \| 'asc'
params.dateformat	Формат отображения даты	string	'ddmmyyyy' \| 'ddmonthyyyy' \| 'ddmonyyyy' \| 'ddmmyy'
params.lang	Язык отображения даты	string	по стране проекта
params.scrolltotop	Прокручивать блок к началу при переключении страниц	boolean	true
params.transition	Скорость переходов	number	300
params.easing	Тип анимации переходов	string	'ease-in-out'
params.pagination.selector	Класс блока пагинации	string	selector + '-pagination'
params.pagination.page	Ссылка номеров страниц	string	'#page'
params.pagination.prev	Ссылка кнопки «Назад»	string	'#prev'
params.pagination.next	Ссылка кнопки «Вперёд»	string	'#next'
params.pagination.separator	Класс разделителя страниц	string	'.page-separator'
params.style.skeleton.backgroundColor	Цвет скелетона при загрузке	string	'#F3F3F3'
params.style.pagination.active.backgroundColor	Цвет фона активной страницы	string	-
params.style.pagination.active.backgroundImage	Изображение активной страницы	string	-
params.style.pagination.active.borderColor	Цвет бордера активной страницы	string	-
params.style.pagination.active.opacity	Непрозрачность активной страницы	string	-
params.style.pagination.inactive.opacity	Непрозрачность неактивных стрелок пагинации	string	-
params.event	Событие, после которого запускается модификация	string	-
params.timeout	Задержка после срабатывания события	number	-

События

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

Запустить потоки по срабатыванию события
Отложить инициализацию потоков можно с помощью параметров 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, то слушатель события добавляется следующим образом:

window.addEventListener("feedinit-feed", function(){ ... })

Запустить другую модификацию после отрисовки потоков
Логика работы пользовательских событий одинакова для всех модификаций и помогает интегрировать их друг с другом. Например, запустить вкладки после отрисовки потоков можно через событие 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-блоке

Потоки в Zero-блоке