Войти

Фреймы в markdown

Markdown
Открыть в ИИ

Фреймы в markdown

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

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

ФреймЧто внутриПараметрыSchema
stepsH3 — шаг, текст под ним — описаниеheadlineHowTo
faqH3 — вопрос, текст под ним — ответanchorFAQPage
site__faqH3 — вопрос, текст под ним — ответtitleFAQPage
callout, callout--info, callout--success, callout--warning, callout--destructiveлюбой markdowntitle, 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, справа список вопросов с линиями между ними.
ФреймПараметрЧто делает
faqanchorid секции для ссылки на неё. По умолчанию faq; если id уже занят (второй вызов, заголовок «FAQ»), секция получает faq-2, faq-3
site__faqtitleзаголовок секции (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.

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

<!-- onpress/frame {"name":"gallery"} -->
![A pencil on a notebook](https://example.com/wp-content/uploads/one.webp)

![Three keys on a ring](https://example.com/wp-content/uploads/two.webp)
<!-- /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 на заголовке фрейма даёт заголовку якорь и место в оглавлении страницы.

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