Фреймы в markdown
Фрейм-обёртка вызывается прямо в теле страницы и обрамляет обычный markdown: внутри вы пишете заголовки H3 и текст, как в любой статье, а фрейм раскладывает их по своей вёрстке и, где это имеет смысл, добавляет разметку schema. Текст остаётся текстом страницы: он выгружается вместе с ней, переводится вместе с ней и правится там же, где читается. Отдельного набора данных под шаги или вопросы заводить не нужно.
Все обёртки ниже — системные фреймы из библиотеки. Фреймы, которые вызываются одной строкой с параметрами или списком в data (карточки, кнопки, вкладки, видео, уведомления), — на соседней странице фреймы с данными. Если на сайте такого фрейма ещё нет, установите его из библиотеки одним запросом. Как устроены вызовы фреймов вообще — фреймы, полная грамматика — справочник вставок.
| Фрейм | Что внутри | Параметры | Schema |
|---|---|---|---|
steps | H3 — шаг, текст под ним — описание | headline | 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, закрывающий комментарий. Оба комментария стоят на отдельных строках.
<!-- onpress/frame {"name":"steps","headline":"Как начать"} -->
### Создайте проект
Нажмите **New project** и дайте ему имя.
### Пригласите команду
Откройте **Members** и отправьте приглашения.
<!-- /onpress/frame -->Заголовок с кавычками и двойным дефисом:
<!-- onpress/frame {"name":"steps","headline":"Plan \u0022A\u0022 \u002d\u002d in three steps"} -->
### Draft
Write the first version.
### Review
Check names and dates.
<!-- /onpress/frame -->Правила одни для всех обёрток:
- Параметры — JSON в одну строку, ключи и строки в двойных кавычках. Кавычку внутри значения пишите как
\u0022, а--,<,>и&— как\u002d\u002d,\u003c,\u003eи\u0026: иначе комментарий рвётся, и фрейм молча получает пустые параметры. Поле параметра в редакторе дашборда экранирует само. - У обёрток со списком (шаги, вопросы) уровень первого заголовка внутри задаёт уровень пункта. Обычно это H3. Каждый заголовок этого уровня открывает новый пункт, всё до следующего такого заголовка — его текст. Заголовок глубже (H4 внутри шага) остаётся частью текста.
- Пункт без текста под заголовком пропускается.
- Внутри работает весь синтаксис markdown: абзацы, списки, ссылки, выделение, код, картинки, вставки
onpress/. - Вызов ищет фрейм по имени на сайте страницы. Фрейма нет — на его месте пусто, текст при этом в теле сохраняется.
- Публикация, выгрузка и повторная публикация возвращают тело байт в байт.
Шаги: steps
Нумерованная инструкция: кружок с номером, вертикальная линия между шагами, заголовок шага и описание. Первый шаг выделен цветом акцента. Нумерация ставится сама, номера в тексте писать не нужно.
| Параметр | Обязателен | Что делает |
|---|---|---|
headline | нет | заголовок над шагами (H2). Без него шаги стоят без заголовка |
<!-- onpress/frame {"name":"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.
<!-- /onpress/frame -->На странице. Заголовок headline и заголовки шагов получают якоря и попадают в оглавление страницы справа, в том же порядке, что и на странице: на шаг можно сослаться #write-the-profile. Вёрстка шагов рассчитана на страницы документации (фрейм docs); её стили приезжают вместе с фреймом.
Schema. Первый вызов steps на странице даёт узел HowTo в общем графе страницы: имя — headline (без него — название страницы), шаги HowToStep с позицией, именем из заголовка, текстом описания (до 500 символов), первой картинкой описания и адресом-якорем шага. Нужно не меньше двух шагов. HowTo на странице один: шаги из steps важнее автоматического поиска инструкции в тексте. Отключить — howto: off во frontmatter.
Вопросы и ответы: faq и site__faq
Оба фрейма читают из тела одинаковые пары «вопрос — ответ» и дают одну разметку FAQPage. Разница в вёрстке:
faq— аккордеон для статьи и документации: вопрос раскрывается по клику, работает без JavaScript. Заголовок раздела пишется обычным## …прямо над вызовом.site__faq— секция лендинга на всю ширину: слева заголовок из параметраtitle, справа список вопросов с линиями между ними.
| Фрейм | Параметр | Что делает |
|---|---|---|
faq | anchor | id секции для ссылки на неё. По умолчанию faq; если id уже занят (второй вызов, заголовок «FAQ»), секция получает faq-2, faq-3 |
site__faq | title | заголовок секции (H2) |
## FAQ
<!-- onpress/frame {"name":"faq"} -->
### Is it free?
Yes, on every plan.
### Do I need a card?
No. A card is asked for only when you upgrade.
<!-- /onpress/frame --><!-- onpress/frame {"name":"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/).
<!-- /onpress/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 |
<!-- onpress/frame {"name":"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
<!-- /onpress/frame -->Врезка не меняет структуру заголовков страницы и schema не даёт. Короткое однострочное уведомление без текста внутри — фреймы alert.
Галерея: gallery
Сетка картинок, написанных обычным markdown внутри вызова. Подпись и alt берутся из картинки.
<!-- onpress/frame {"name":"gallery"} -->
<!-- /onpress/frame -->Галерея с увеличением по клику и списком картинок в параметрах — gallery—lightbox.
В markdown-копии страницы
Копия страницы по адресу с .md (для агентов и llms.txt) показывает содержимое обёрток обычным текстом, без комментариев вызова:
headlineуstepsиtitleуsite__faqстановятся строкой## …, под ней идут H3 и текст;titleврезки — строкой жирным над её текстом;- вопросы, шаги и картинки — как написаны.
Примеры синтаксиса в блоках кода копия оставляет как есть, вместе с комментариями.
В редакторе дашборда
Вкладка Markdown панели страницы показывает исходник как есть: открывающий и закрывающий комментарии подсвечены как вставки, текст между ними — обычный markdown.
Во вкладке Редактор парный вызов фрейма — рамка с шапкой. В шапке имя фрейма, строковые параметры вызова полями ввода (headline, title, icon) и ссылка «Редактировать», которая открывает фрейм в разделе «Фреймы». Внутри рамки — обычный редактор: заголовки, абзацы, списки, ссылки и код правятся как остальная страница, слэш-меню работает и внутри. Правка поля в шапке меняет только JSON вызова; при сохранении нетронутый текст и комментарии вызова возвращаются байт в байт.
Новую обёртку можно вставить из слэш-меню: пункты «Шаги» (steps) и «Вопросы и ответы» (site__faq) ставят заготовку с двумя H3 и текстом. Остальные обёртки пишутся во вкладке Markdown.
Своя обёртка
Любой фрейм становится обёрткой, если читает содержимое вызова:
<!-- onpress/slot /-->ставит весь текст из вызова, собранный в HTML, — так устроены врезки и галерея;- повторитель
<!-- onpress/repeat {"source":"slot.faq"} -->проходит по парам «заголовок — текст»: в элементеitem.q— заголовок в HTML,item.a— текст в HTML,item.q_textиitem.a_text— то же без разметки,item.questionиitem.answer— исходный markdown. Так устроеныsteps,faqиsite__faq; <!-- onpress/faq-schema {"source":"slot.faq"} /-->добавляетFAQPageпо тем же парам;- атрибут
data-op-outlineна заголовке фрейма даёт заголовку якорь и место в оглавлении страницы.
Как скопировать готовый фрейм и переделать разметку — свой фрейм из готового.