Штатные «Разделы» CMS Потока Тильды выводят только одну категорию на карточку. Если посту нужно сразу несколько тегов (например «Экономика» и «Инвестиции»), используем текстовое поле и небольшой скрипт, который разбивает текст по запятой на отдельные бейджи.
Шаг 1 — Поле в потоке
Добавьте в поток текстовое поле, например «Теги», и впишите в него категории через запятую: Экономика, Инвестиции.
Шаг 2 — Настройка в Zero Block
- Добавьте текстовый элемент в группу Post, свяжите его с полем «Теги».
- Задайте элементу CSS-класс: post-categories.
- Рядом добавьте пустой Div-блок с CSS-классом: categories-wrap — сюда скрипт вставит готовые бейджи.
Готовый код
Вставьте код целиком в настройки страницы: Ещё → Вставка кода → «Перед </body>», затем опубликуйте страницу.
Или вставьте код в блок Т123 на странице, где отображаются карточки потоков.
Или вставьте код в блок Т123 на странице, где отображаются карточки потоков.
<style>
/* Стили бейджей категорий — подстройте цвета под свой дизайн */
.category-badge {
display: inline-block;
background: #ffffff;
color: #1a1a1a;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 6px 14px;
border-radius: 20px;
margin: 0 6px 6px 0;
}
.post-categories {
display: none !important;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
renderCategoryBadges();
});
document.addEventListener('t-feed-added-articles', function () {
renderCategoryBadges();
});
function findRepeatingCardAncestor(el, maxLevels) {
maxLevels = maxLevels || 8;
var current = el;
for (var i = 0; i < maxLevels && current && current.parentElement; i++) {
var parent = current.parentElement;
var sameClassSiblings = 0;
for (var j = 0; j < parent.children.length; j++) {
if (parent.children[j] !== current && parent.children[j].className === current.className) {
sameClassSiblings++;
}
}
if (sameClassSiblings >= 1 && current.className) {
return current;
}
current = parent;
}
return null;
}
function renderCategoryBadges() {
var sourceFields = document.querySelectorAll('.post-categories');
sourceFields.forEach(function (field) {
var rawText = field.textContent.trim();
if (!rawText) return;
var card = findRepeatingCardAncestor(field);
if (!card) card = field.parentElement;
var wrap = card.classList && card.classList.contains('categories-wrap')
? card
: card.querySelector('.categories-wrap');
if (!wrap) return;
if (wrap.dataset.rendered === '1') return;
var categories = rawText.split(',')
.map(function (c) { return c.trim(); })
.filter(function (c) { return c.length > 0; });
wrap.innerHTML = categories
.map(function (cat) {
return '<span class="category-badge">' + escapeHtml(cat) + '</span>';
})
.join('');
wrap.dataset.rendered = '1';
});
}
function escapeHtml(text) {
var div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
</script>
/* Стили бейджей категорий — подстройте цвета под свой дизайн */
.category-badge {
display: inline-block;
background: #ffffff;
color: #1a1a1a;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 6px 14px;
border-radius: 20px;
margin: 0 6px 6px 0;
}
.post-categories {
display: none !important;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
renderCategoryBadges();
});
document.addEventListener('t-feed-added-articles', function () {
renderCategoryBadges();
});
function findRepeatingCardAncestor(el, maxLevels) {
maxLevels = maxLevels || 8;
var current = el;
for (var i = 0; i < maxLevels && current && current.parentElement; i++) {
var parent = current.parentElement;
var sameClassSiblings = 0;
for (var j = 0; j < parent.children.length; j++) {
if (parent.children[j] !== current && parent.children[j].className === current.className) {
sameClassSiblings++;
}
}
if (sameClassSiblings >= 1 && current.className) {
return current;
}
current = parent;
}
return null;
}
function renderCategoryBadges() {
var sourceFields = document.querySelectorAll('.post-categories');
sourceFields.forEach(function (field) {
var rawText = field.textContent.trim();
if (!rawText) return;
var card = findRepeatingCardAncestor(field);
if (!card) card = field.parentElement;
var wrap = card.classList && card.classList.contains('categories-wrap')
? card
: card.querySelector('.categories-wrap');
if (!wrap) return;
if (wrap.dataset.rendered === '1') return;
var categories = rawText.split(',')
.map(function (c) { return c.trim(); })
.filter(function (c) { return c.length > 0; });
wrap.innerHTML = categories
.map(function (cat) {
return '<span class="category-badge">' + escapeHtml(cat) + '</span>';
})
.join('');
wrap.dataset.rendered = '1';
});
}
function escapeHtml(text) {
var div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
</script>
Проверка после публикации: откройте страницу, нажмите F12 → Console и введите document.querySelectorAll('.post-categories').length — число должно совпадать с количеством карточек. Если бейджи не появились — проверьте, что CSS-классы на элементах заданы без опечаток и страница опубликована заново.
