Фреймы в markdown

Фрейм-обёртка вызывается прямо в теле страницы и обрамляет обычный markdown: внутри вы пишете заголовки H3 и текст, как в любой статье, а фрейм раскладывает их по своей вёрстке и, где это имеет смысл, добавляет разметку schema. Текст остаётся текстом страницы: он выгружается вместе с ней, переводится вместе с ней и правится там же, где читается. Отдельного набора данных под шаги или вопросы заводить не нужно.

Все обёртки ниже — системные фреймы из библиотеки. Фреймы, которые вызываются одной строкой с параметрами или списком в data (карточки, кнопки, вкладки, видео, уведомления), — на соседней странице фреймы с данными. Если на сайте такого фрейма ещё нет, установите его из библиотеки одним запросом. Как устроены вызовы фреймов вообще — фреймы, полная грамматика — справочник блоков.

Фрейм	Что внутри	Параметры	Schema
`steps`	H3 — шаг, текст под ним — описание	`headline`	`HowTo`
`howto`	H3 — шаг, текст под ним — описание	`title`, `anchor`	`HowTo`
`faq`	H3 — вопрос, текст под ним — ответ	`anchor`	`FAQPage`
`site__faq`	H3 — вопрос, текст под ним — ответ	`title`	`FAQPage`
`callout`, `callout--info`, `callout--success`, `callout--warning`, `callout--destructive`	любой markdown	`title`, `icon`	—
`gallery`	картинки markdown	—	—

Как пишется вызов с телом

Парный вызов: открывающий комментарий  с параметрами, markdown, закрывающий . Оба комментария стоят на отдельных строках. Параметры необязательны.

<!-- frame/steps {"headline":"Как начать"} -->
### Создайте проект

Нажмите **New project** и дайте ему имя.

### Пригласите команду

Откройте **Members** и отправьте приглашения.
<!-- /frame -->

Заголовок с кавычками и двойным дефисом:

<!-- frame/steps {"headline":"Plan \u0022A\u0022 \u002d\u002d in three steps"} -->
### Draft

Write the first version.

### Review

Check names and dates.
<!-- /frame -->

Правила одни для всех обёрток:

Параметры — JSON в одну строку, ключи и строки в двойных кавычках. Кавычку внутри значения пишите как \u0022, а --, <, > и & — как \u002d\u002d, \u003c, \u003e и \u0026: иначе комментарий рвётся, и фрейм молча получает пустые параметры. Поле параметра в редакторе дашборда экранирует само.
У обёрток со списком (шаги, вопросы) уровень первого заголовка внутри задаёт уровень пункта. Обычно это H3. Каждый заголовок этого уровня открывает новый пункт, всё до следующего такого заголовка — его текст. Заголовок глубже (H4 внутри шага) остаётся частью текста.
Пункт без текста под заголовком пропускается.
Внутри работает весь синтаксис markdown: абзацы, списки, ссылки, выделение, код, картинки, блоки onpress/.
Вызов ищет фрейм по имени на сайте страницы. Фрейма нет — на его месте пусто, текст при этом в теле сохраняется.
Публикация, выгрузка и повторная публикация возвращают тело байт в байт.

Шаги: steps

Нумерованная инструкция: кружок с номером, вертикальная линия между шагами, заголовок шага и описание. Первый шаг выделен цветом акцента. Нумерация ставится сама, номера в тексте писать не нужно.

Параметр	Обязателен	Что делает
`headline`	нет	заголовок над шагами (H2). Без него шаги стоят без заголовка

<!-- frame/steps {"headline":"The four steps at a glance"} -->
### Write the profile

Tell Acme who the work is for and how it should sound. You do this once per project.

### Brief the assistant

Describe the job in four lines: what it is, what it must say, how long, what to avoid.

### Review before you send

Check names, dates and promises against your own records.
<!-- /frame -->

На странице. Заголовок headline и заголовки шагов получают якоря и попадают в оглавление страницы справа, в том же порядке, что и на странице: на шаг можно сослаться #write-the-profile. Вёрстка шагов рассчитана на страницы документации (фрейм docs); её стили приезжают вместе с фреймом.

Schema. Первый вызов steps на странице даёт узел HowTo в общем графе страницы: имя — headline (без него — название страницы), шаги HowToStep с позицией, именем из заголовка, текстом описания (до 500 символов), первой картинкой описания и адресом-якорем шага. Нужно не меньше двух шагов. HowTo на странице один: шаги из steps важнее автоматического поиска инструкции в тексте. На странице с фреймом howto ни steps, ни поиск инструкции в тексте узел не добавляют.

Инструкция: howto

Фрейм howto выводит шаги инструкции и печатает разметку HowTo прямо в своей верстке, обычным <script type="application/ld+json"> с биндами на шаги. Верстку и разметку вы правите в одном фрейме, как любой другой фрейм. Номера шагов фрейм не ставит: если они нужны, пишите их в заголовках.

Параметр	Обязателен	Что делает
`title`	нет	название инструкции: заголовок H2 над шагами и `name` в `HowTo`. Без него фрейм не выводит заголовок, а `name` берет из названия страницы
`anchor`	нет	id секции для ссылки на нее. По умолчанию `howto`

<!-- frame/howto {"title":"Как подключить домен"} -->
### Шаг 1. Купите домен

Подойдет любой регистратор.

### Шаг 2. Пропишите DNS

Укажите A-запись из консоли.

### Шаг 3. Подключите домен в консоли

Откройте раздел «Сайты» и нажмите «Подключить домен».
<!-- /frame -->

Schema. Фрейм собирает HowTo из тех же пар, что выводит на странице: каждый шаг HowToStep получает позицию по порядку, имя из заголовка и текст под ним без разметки. Шаг с одной картинкой получает пустой text, поэтому пишите под заголовком хотя бы одно предложение. Каждый вызов howto печатает свой узел, поэтому ставьте на страницу один вызов.

Вопросы и ответы: faq и site__faq

Оба фрейма читают из тела одинаковые пары «вопрос — ответ» и дают одну разметку FAQPage. Разница в вёрстке:

faq — аккордеон для статьи и документации: вопрос раскрывается по клику, работает без JavaScript. Заголовок раздела пишется обычным ## … прямо над вызовом.
site__faq — секция лендинга на всю ширину: слева заголовок из параметра title, справа список вопросов с линиями между ними.

Фрейм	Параметр	Что делает
`faq`	`anchor`	id секции для ссылки на неё. По умолчанию `faq`; если id уже занят (второй вызов, заголовок «FAQ»), секция получает `faq-2`, `faq-3`
`site__faq`	`title`	заголовок секции (H2)

## FAQ

<!-- frame/faq -->
### Is it free?

Yes, on every plan.

### Do I need a card?

No. A card is asked for only when you upgrade.
<!-- /frame -->

<!-- frame/site__faq {"title":"Frequently asked questions"} -->
### Do I need an account?

Not for the first messages. Sign in to keep conversations across devices.

### Can I share a conversation?

Yes, with the members of your workspace. See [Shared projects](/docs/features/shared-projects-and-roles/).
<!-- /frame -->

Schema. FAQPage на странице всегда один: вопросы всех вызовов faq и site__faq в теле сливаются в первый. Вопрос — текст заголовка, ответ — текст под ним без разметки. Подробно о вопросах на странице — рецепт FAQ и фрейм faq в каталоге.

Врезки: callout

Цветная плашка с иконкой, заголовком и любым текстом внутри: абзацы, списки, код. Цвет задаёт имя фрейма.

Фрейм	Вид
`callout`	нейтральная
`callout--info`	информация
`callout--success`	успех
`callout--warning`	предупреждение
`callout--destructive`	опасное действие

Параметр	Обязателен	Что делает
`title`	нет	заголовок плашки. Без него остаётся только текст
`icon`	нет	имя иконки Material Symbols (`lightbulb`, `bolt`, `warning`). По умолчанию `info`

<!-- frame/callout--warning {"title":"Check before you send"} -->
Drafts can contain wrong names, dates or prices. Check them against the source:

- names and titles
- dates and deadlines
- prices and discounts
<!-- /frame -->

Врезка не меняет структуру заголовков страницы и schema не даёт. Короткое однострочное уведомление без текста внутри — фреймы alert.

Галерея: gallery

Сетка картинок, написанных обычным markdown внутри вызова. Подпись и alt берутся из картинки.

<!-- frame/gallery -->
![A pencil on a notebook](https://example.com/media/2026/10/one.webp)

![Three keys on a ring](https://example.com/media/2026/10/two.webp)
<!-- /frame -->

Галерея с увеличением по клику и списком картинок в параметрах — gallery—lightbox.

В markdown-копии страницы

Копия страницы по адресу с .md (для агентов и llms.txt) показывает содержимое обёрток обычным текстом, без комментариев вызова:

headline у steps, title у howto и title у site__faq становятся строкой ## …, под ней идут H3 и текст;
title врезки — строкой жирным над её текстом;
вопросы, шаги и картинки — как написаны.

Примеры синтаксиса в блоках кода копия оставляет как есть, вместе с комментариями.

В редакторе дашборда

Вкладка Markdown панели страницы показывает исходник как есть: открывающий и закрывающий комментарии подсвечены как блоки, текст между ними — обычный markdown.

Во вкладке Редактор парный вызов фрейма — рамка с шапкой. В шапке имя фрейма, строковые параметры вызова полями ввода (headline, title, icon) и ссылка «Редактировать», которая открывает фрейм в разделе «Фреймы». Внутри рамки — обычный редактор: заголовки, абзацы, списки, ссылки и код правятся как остальная страница, слэш-меню работает и внутри. Правка поля в шапке меняет только JSON вызова; при сохранении нетронутый текст и комментарии вызова возвращаются байт в байт.

Новую обёртку можно вставить из слэш-меню: пункты «Шаги» (steps) и «Вопросы и ответы» (site__faq) ставят заготовку с двумя H3 и текстом. Остальные обёртки пишутся во вкладке Markdown.

Своя обёртка

Любой фрейм становится обёрткой, если читает содержимое вызова:

 ставит весь текст из вызова, собранный в HTML, — так устроены врезки и галерея;
повторитель  проходит по парам «заголовок — текст»: в элементе item.q — заголовок в HTML, item.a — текст в HTML, item.q_text и item.a_text — то же без разметки, item.question и item.answer — исходный markdown, item.n — номер пары с единицы. Так устроены steps, howto, faq и site__faq;
 добавляет FAQPage по тем же парам;
 подставляет значение строкой JSON внутрь <script>: так howto собирает свой HowTo;
атрибут data-op-outline на заголовке фрейма даёт заголовку якорь и место в оглавлении страницы.

Как скопировать готовый фрейм и переделать разметку — свой фрейм из готового.