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

Позволяет вывести карточки постов из потоков Тильды в Zero-блок с любой вёрсткой и внешним видом

Инструкция по установке

Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайта

Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.

<script src="https://cdn.postnikovmd.com/tilda@1.6/mods.min.js"></script>

Создайте Zero-блок с одним рядом карточек постов

В одном ряду может быть любое количество карточек. Модификация будет использовать их расположение и размеры как шаблон и автоматически клонировать карточки для каждого поста из потока. См. пример
Задайте блоку с карточками постов класс .uc-feed

Как задать класс блокам?
Объедините содержимое каждой карточки в группу с типом Object

Внутри карточки может быть любое количество элементов. Карточки рекомендуется верстать через автолэйаут — это позволит им динамически подстраивать размеры под контент, подгружаемый из каталога.
Как создать группу Object?
Присвойте получившимся группам класс .post и ссылку #post

Если вы хотите открывать детальную страницу поста по определенной кнопке в карточке, задайте ссылку #post только ей
Задайте элементам в карточках соответствующие классы и ссылки:
Все элементы опциональны — можно добавить только те, которые нужны в вашем дизайне:
- .post-title – название поста
- .post-descr – короткое текстовое описание поста
- .post-image — изображение поста (Image)
- .post-date – дата публикации поста
Как задать класс элементам?
Создайте Zero-блок для пустого состояния и присвойте ему класс .uc-feed-empty

Блок будет отображаться автоматически, когда в потоках нет ни одного поста. По умолчанию он скрыт.
Задайте в настройках модификации параметры, стили и поведение потоков
Скопируйте код и вставьте его в блок T123 в конец страницы

Пагинация

4 шага

Создайте Zero-блок с пагинацией и присвойте ему класс .uc-feed-pagination

Блок будет отображаться, если общее количество постов превышает количество постов, доступных на одной странице.
Как задать класс блокам?
Добавьте в блок кнопки с номерами страниц и задайте им ссылку #page

В качестве кнопок рекомендуется использовать элементы с типом Button. Их можно расположить в любом месте блока. Первой кнопке задайте стили активного состояния, второй — неактивного: модификация будет использовать их как шаблон для всех остальных элементов.
Для того, чтобы сделать разделитель «...», добавьте между страницами ещё одну кнопку и присвойте ей класс .page-separator.
Добавьте в блок кнопки переключения страниц и задайте им ссылки: кнопке «вперёд» ссылку #next, кнопке «назад» — #prev
Объедините получившиеся элементы в группу с типом Object и Auto Layout

Как создать группу c автолэйаутом?

<script>feed.init('.uc-feed', { feeduid: '474873136331', perpage: 9, sort: 'asc', style: { pagination: { inactive: { opacity: 0.5 } }, skeleton: { backgroundColor: "#F3F2F7" } } })</script>

Все примеры

93

Настройки модификации

Скорость и тип переходов:

Класс блока*

Номер раздела потоков*

Получить раздел с сайта

Раздел синхронизирован

Номер раздела потоков, из которого нужно вывести посты. Можно определить автоматически:

Создайте новую (временную) страницу и добавьте на неё блок FD301
Выберите нужный раздел в настройках и опубликуйте страницу
Вставьте ссылку в поле и нажмите на кнопку 🔄. Номер раздела синхронизируется автоматически

+ Настройки потоков

Формат даты

Потоки

Постов на странице

Отключить скролл к началу раздела

Порядок отображения постов

Отключает перемещение к началу блока при переключении страниц потоков

Определяет порядок, в котором будут выводиться посты из потока:

по возрастанию -> старые посты в начале
по убыванию -> новые посты в начале

Количество постов, отобращающихся на одной странице. Максимальное значение — 100

+ Настройки стилей

Пагинация

Цвет фона активной стрелки

Бордер активной стрелки

Иконка активной стрелки

Позволяет задать свою иконку для стрелок в активном состоянии.

Примечание: для того, чтобы у кнопки «назад» иконка отображалась корректно, задайте ей такое же изображение, что и для кнопки «вперёд», и поверните её на 180º в настройках элемента

Индикаторы загрузки

Цвет скелета загрузки

Цвет «заглушки», которая отображается вместо основного контента на время загрузки данных.

<!--store.js Потоки в Zero-блоке. https://postnikovmd.com/mods/feed-->
<script>feed.init(".uc-feed")</script>

Скопировать код

Особенности

Работает с любой вёрсткой

Карточки потоков можно оформить без ограничений по вёрстке
Синхронизирует данные потоков

Подгружает данные доступных постов в карточки Zero‑блока
Нет ограничений по карточкам

Модификация автоматически создаст карточки для недостающих постов