Блок — это кусочек страницы: абзац текста, таблица, карточки, карусель картинок или кнопка. Страница собирается из блоков, как из деталей. Агент ставит нужные блоки по порядку, а портал уже рисует их в едином стиле.
Что такое блок
У каждого блока есть номер (чтобы на него можно было сослаться), тип (что это за блок), заголовок (необязательный), ширина, настройки содержимого и, если нужно, действия-кнопки. Ширина считается по сетке из 12 частей: 12 — на всю ширину страницы, 6 — половина, 4 — треть. Так рядом можно поставить два или три блока.
Прямо на странице блоки в настройках не правят: изменить блок можно только через агента. Зато у блока есть понятное название типа — если агент поставил что-то незнакомое, читатель не увидит ошибку, а прочтёт: Этот блок управляется агентом.
Все 28 типов блоков
Типы собраны в шесть групп. Ниже — что делает каждый из них.
| Тип | Группа | Что это |
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 | данные | лента записей: дата, заголовок, короткий текст, картинка |
viz | данные | визуализация из вашей базы: 33 вида — показатель, шкала, таблица, график, карта и другие |
actions | действия | только кнопки, без собственного содержимого |
chart | динамические | график, данные для которого считает скрипт |
script | динамические | готовый текст, который собирает скрипт |
form | динамические | форма с полями и кнопкой отправки |
Какие блоки умеют считать данные
Данные на страницу приходят двумя путями. Первый — расчётный скрипт: семь типов блоков могут брать содержимое не из текста, а из программы на Python. Это значит, что цифры на странице всегда свежие — из вашей системы, а не вбитые руками. Считать данные умеют: list (список), table (таблица), kpi (плитки с цифрами), feed (лента записей), chart (график), script (готовый текст) и form (форма).
Второй путь — готовая визуализация: она берёт данные из базы или другого источника по описанию запроса, без программы, а показать их можно 33 способами — от одной цифры до карты регионов (см. Источники данных и визуализации).
Что общего у всех блоков
- Заголовок — необязательный. Если он есть, над содержимым появляется название блока с его значком.
- Ширина — от 1 до 12 частей страницы. По умолчанию блок занимает всю ширину.
- Кнопки действий — до трёх на блок. Это может быть ссылка, переход по порталу, запрос агенту или запуск скрипта (см. Кнопки и действия).
- Подвал со свежестью — у блоков с расчётными данными и у визуализаций внизу видно, когда данные обновились, и есть кнопка обновления.
Блок без заголовка и без кнопок показывается «голым» — без лишней рамки вокруг. Так текст на странице выглядит как обычная статья, а не как набор врезок.
Оформление внутри списков, таблиц и карточек
В основном тексте страницы можно выделять слова жирным и наклонным, помечать код и вставлять ссылки. То же работает в самых мелких местах: в пункте списка, в ячейке таблицы и в тексте карточки. Это удобно, когда нужно подчеркнуть главное в строке отчёта или дать ссылку прямо из ячейки — без отдельного абзаца.
Ссылка внутри карточки срабатывает сама: нажатие ведёт по ней, а не открывает карточку целиком. А оформление остаётся одной строкой — список или отдельный абзац внутри ячейки или карточки не появится, иначе таблица поехала бы. Сами таблицы помещаются в ширину страницы: текст в ячейках переносится, и читать строку удобно без прокрутки вбок.
Если блок сломался
Один неудачный блок никогда не ломает страницу целиком. Незнакомый тип показывается спокойной пометкой с названием типа и надписью Этот блок управляется агентом. А если блок не смог отобразиться из-за ошибки, на его месте появляется сообщение Не удалось отобразить блок с кнопкой Копировать подробности — эту подсказку можно передать агенту, чтобы он поправил. Все остальные блоки страницы при этом рисуются как обычно.
Где посмотреть примеры
Все 28 типов собраны в демонстрационном портале: там есть и карусель, и вкладки, и графики, и формы — на живых примерах видно, как блок ведёт себя в деле. Попросите агента открыть этот демонстрационный набор, если хотите посмотреть тип блока перед тем, как ставить его на свою страницу.
Дальше: как кнопки на блоках ведут себя — в разделе Кнопки и действия; откуда берутся живые цифры — в разделе Источники данных и визуализации; как считать данные для блоков — в разделе Динамические блоки на Python; как проверяются блоки — в разделе Проверки страниц.