Блок — это кусочек страницы: абзац текста, таблица, карточки, карусель картинок или кнопка. Страница собирается из блоков, как из деталей. Агент ставит нужные блоки по порядку, а портал уже рисует их в едином стиле.
Что такое блок
У каждого блока есть номер (чтобы на него можно было сослаться), тип (что это за блок), заголовок (необязательный), ширина, настройки содержимого и, если нужно, действия-кнопки. Ширина считается по сетке из 12 частей: 12 — на всю ширину страницы, 6 — половина, 4 — треть. Так рядом можно поставить два или три блока.
Прямо на странице блоки в настройках не правят: изменить блок можно только через агента. Зато у блока есть понятное название типа — если агент поставил что-то незнакомое, читатель не увидит ошибку, а прочтёт: Этот блок управляется агентом.
Все 27 типов блоков
Типы собраны в шесть групп. Ниже — что делает каждый из них.
| Тип | Группа | Что это |
markdown | текст и структура | основной текст: абзацы, списки, выделения, ссылки |
heading | текст и структура | подзаголовок внутри страницы, с уровнем от 1 до 4 |
hero | текст и структура | крупный заголовок-баннер с подписью и кнопками, при желании с картинкой |
callout | текст и структура | выделенный блок-обращение: подсказка, предупреждение, важное замечание |
quote | текст и структура | цитата с автором и должностью |
list | текст и структура | список: маркированный, нумерованный или с галочками |
icon-grid | текст и структура | сетка одинаковых карточек: значок, заголовок, короткий текст |
divider | текст и структура | разделитель или пустой отступ между частями страницы |
tabs | текст и структура | несколько вкладок с разным содержимым, открыта одна |
accordion | текст и структура | свёрнутые блоки-«гармошки»: раскрывается тот, что нужен |
timeline | текст и структура | лента событий по датам на вертикальной линии |
stepper | текст и структура | пошаговая инструкция с нумерованными кружками |
image | медиа | одна картинка с подписью, при желании — ссылкой |
gallery | медиа | набор картинок сеткой, с просмотром крупно |
slider | медиа | карусель слайдов со своими кнопками на каждом |
video | медиа | видео с вашего сервера или с внешнего сервиса |
files | медиа | список файлов на скачивание с размером и подписью |
embed | медиа | встроенный чужой блок: карта, форма, внешний сервис |
cards | навигация | карточки-ссылки на другие страницы портала |
table | данные | таблица с колонками и строками, с закреплённой шапкой |
people | данные | карточки сотрудников: фото, имя, должность, контакты |
kpi | данные | плитки с главными цифрами: показатель, единица, изменение |
feed | данные | лента записей: дата, заголовок, короткий текст, картинка |
actions | действия | только кнопки, без собственного содержимого |
chart | динамические | график, данные для которого считает скрипт |
script | динамические | готовый текст, который собирает скрипт |
form | динамические | форма с полями и кнопкой отправки |
Какие блоки умеют считать данные
Семь типов могут брать содержимое не из текста, а из расчётного скрипта. Это значит, что цифры на странице всегда свежие — из вашей системы, а не вбитые руками. Считать данные умеют: list (список), table (таблица), kpi (плитки с цифрами), feed (лента записей), chart (график), script (готовый текст) и form (форма).
Что общего у всех блоков
- Заголовок — необязательный. Если он есть, над содержимым появляется название блока с его значком.
- Ширина — от 1 до 12 частей страницы. По умолчанию блок занимает всю ширину.
- Кнопки действий — до трёх на блок. Это может быть ссылка, переход по порталу, запрос агенту или запуск скрипта (см. Кнопки и действия).
- Подвал со свежестью — у блоков с расчётными данными внизу видно, когда данные обновились, и есть кнопка обновления.
Блок без заголовка и без кнопок показывается «голым» — без лишней рамки вокруг. Так текст на странице выглядит как обычная статья, а не как набор врезок.
Если блок сломался
Один неудачный блок никогда не ломает страницу целиком. Незнакомый тип показывается спокойной пометкой с названием типа и надписью Этот блок управляется агентом. А если блок не смог отобразиться из-за ошибки, на его месте появляется сообщение Не удалось отобразить блок с кнопкой Копировать подробности — эту подсказку можно передать агенту, чтобы он поправил. Все остальные блоки страницы при этом рисуются как обычно.
Где посмотреть примеры
Все 27 типов собраны в демонстрационном портале: там есть и карусель, и вкладки, и графики, и формы — на живых примерах видно, как блок ведёт себя в деле. Попросите агента открыть этот демонстрационный набор, если хотите посмотреть тип блока перед тем, как ставить его на свою страницу.
Дальше: как кнопки на блоках ведут себя — в разделе Кнопки и действия; как считать данные для блоков — в разделе Динамические блоки на Python; как проверяются блоки — в разделе Проверки страниц.