Фреймы с данными
Эти фреймы вызываются в теле страницы одной самозакрывающейся строкой. Текста внутри у них нет: всё, что они показывают, приходит параметрами вызова или списком в data. Это отличает их от фреймов-обёрток, внутри которых пишется обычный markdown.
Все они системные фреймы из библиотеки. Если на сайте такого фрейма ещё нет, установите его из библиотеки. Общие правила вызова — параметры и слот и справочник вставок.
| Фрейм | Что выводит | Что передаётся |
|---|---|---|
alert--info, alert--success, alert--warning, alert--destructive | однострочное уведомление | title, description, icon |
cards, cards--cols-2, cards--single | карточки-ссылки с иконкой | data.items |
link-cards | простые ссылки-карточки | data.items |
link-cards--children | ссылки на дочерние страницы | — |
buttons | ряд кнопок | data.items |
tabs | вкладки | data.key, data.items |
gallery--lightbox | сетка картинок с увеличением | data.items |
video | видеоплеер | src, poster, preload, width, height, style |
file | ссылка на файл | href, text |
shortcut | сочетание клавиш | data.keys, data.text |
faq-items | вопросы и ответы списком из данных | data.items |
faq__schema | только разметка FAQPage из набора | source |
page-list | список страниц | source |
plan-list | список тарифов из набора | source |
value | одно значение страницы или сайта | value |
terms | метки страницы | taxonomy, link, label |
menu | меню сайта | place |
featured-image | картинка-превью страницы | figure |
Как пишется вызов
Одна строка, комментарий закрывается /-->. Параметры — JSON: строки в двойных кавычках, список элементов — в data.items.
<!-- onpress/frame {"name":"cards","data":{"items":[{"icon":"school","title":"Your first project","description":"A worked example from brief to draft.","url":"/docs/first-project/"}]}} /-->Правила одни для всех фреймов на этой странице:
- Вызов стоит на отдельной строке, весь JSON — в одну строку.
- Кавычку, двойной дефис, угловые скобки и амперсанд внутри значения экранируйте так же, как у обёрток: иначе комментарий рвётся, и фрейм молча получает пустые параметры.
- Поле элемента, которого нет, остаётся пустым: элемент не пропадает, пропадает только этот кусок.
- Параметр со значением вида
page.data.versionилиpages.children— ссылка на данные страницы или сайта, а не текст. - Публикация, выгрузка и повторная публикация возвращают вызов байт в байт. Текст из
dataпопадает в markdown-копию страницы.
Уведомления: alert
Однострочная плашка: иконка, заголовок, короткое описание. Цвет задаёт имя фрейма. Если внутри нужен абзац, список или код — берите врезку callout.
| Параметр | Что делает |
|---|---|
title | заголовок |
description | текст под заголовком, без разметки |
icon | имя иконки Material Symbols; по умолчанию своя у каждого цвета |
<!-- onpress/frame {"name":"alert--info","title":"New in September","description":"Workflows can now be copied between projects."} /-->Карточки: cards
Сетка карточек: иконка, заголовок, описание, вся карточка — ссылка. cards — три колонки на широком экране, cards--cols-2 — две, cards--single — одна карточка во всю ширину.
| Поле элемента | Что делает |
|---|---|
icon | имя иконки Material Symbols |
title | заголовок карточки |
description | текст под заголовком |
url | куда ведёт карточка; можно якорь на этой же странице (#api) |
<!-- onpress/frame {"name":"cards--cols-2","data":{"items":[{"icon":"forum","title":"Slack","description":"A message in a channel when a shared workflow finishes.","url":"#connect-them"},{"icon":"code","title":"API","description":"Create projects and run workflows over HTTP.","url":"#api-in-one-call"}]}} /-->Ссылки-карточки: link-cards
Простые карточки с одним заголовком-ссылкой, без иконки и описания. link-cards берёт список из data.items (поля title и url), link-cards--children сам выводит дочерние страницы текущей и параметров не принимает.
<!-- onpress/frame {"name":"link-cards","data":{"items":[{"url":"/docs/v2/ru/","title":"Документация v2"},{"url":"/docs/v1/ru/","title":"Старая документация v1"}]}} /-->
<!-- onpress/frame {"name":"link-cards--children"} /-->Карточки по набору данных: link-cards—cluster. Когда один и тот же список ссылок стоит на многих страницах — например, все страницы тематического кластера ссылаются друг на друга, — его удобнее держать в наборе данных, чем повторять data.items в каждом вызове. Для этого на сайте заводится свой фрейм-вариант с тем же видом, у которого повторитель читает набор (здесь — набор cluster с полями title и url):
<div class="opcards"><!-- onpress/repeat {"source":"cluster"} --><a class="opcards__card" data-op-bind='{"href":"item.url"}'><span class="opcards__title" data-op-bind='{"text":"item.title"}'></span></a><!-- /onpress/repeat --></div>На страницах — вызов без данных:
<!-- onpress/frame {"name":"link-cards--cluster"} /-->Поправили набор — карточки меняются на всех страницах, где стоит вызов. В ссылках страниц такие карточки, как и дочерние, видны с параметром cards=1.
Кнопки: buttons
Ряд кнопок-ссылок.
| Поле элемента | Что делает |
|---|---|
text | надпись |
link | адрес |
class | классы кнопки из стилей сайта; на эталонном сайте btn — залитая, btn btn--outline — контурная, btn--icon-after и btn--icon-before ставят иконку после или до текста |
icon | имя иконки Material Symbols |
<!-- onpress/frame {"name":"buttons","data":{"items":[{"text":"Start free","link":"/assistant/","class":"btn btn--icon-after","icon":"arrow_forward"},{"text":"See pricing","link":"/pricing/","class":"btn btn--outline btn--icon-before","icon":"sell"}]}} /-->Вкладки: tabs
Вкладки переключаются без перезагрузки страницы; у каждой подпись, заголовок, описание и текст. Все вкладки и их текст сразу есть в разметке страницы, поисковик видит их целиком.
| Поле | Что делает |
|---|---|
data.key | уникальный на странице ключ блока вкладок |
id | ключ вкладки, латиницей |
label | подпись на переключателе |
title, description | заголовок и описание в панели |
content | текст панели, инлайн-markdown |
trigger_id, panel_id | id переключателя и панели: <key>-trigger-<id> и <key>-panel-<id> |
trigger_class | basic-tabs__trigger, у открытой вкладки ещё basic-tabs__trigger--active |
selected, tabindex | у открытой вкладки "true" и "0", у остальных "false" и "-1" |
hidden | "hidden" у всех вкладок, кроме открытой |
<!-- onpress/frame {"name":"tabs","data":{"key":"tabs-start","items":[{"id":"web","label":"Web","title":"In the browser","description":"Open the workspace at any address you were invited to.","content":"Nothing to install.","trigger_id":"tabs-start-trigger-web","panel_id":"tabs-start-panel-web","trigger_class":"basic-tabs__trigger basic-tabs__trigger--active","selected":"true","tabindex":"0"},{"id":"api","label":"API","title":"From your code","description":"Create projects over HTTP.","content":"Every request needs a personal token.","trigger_id":"tabs-start-trigger-api","panel_id":"tabs-start-panel-api","trigger_class":"basic-tabs__trigger","selected":"false","tabindex":"-1","hidden":"hidden"}]}} /-->Галерея с увеличением: gallery—lightbox
Сетка картинок, по клику картинка открывается во весь экран. Картинки, написанные обычным markdown, обрамляет обёртка gallery.
| Поле элемента | Что делает |
|---|---|
img | адрес картинки |
alt | описание картинки |
width, height | размеры в пикселях, необязательно; убирают сдвиг вёрстки при загрузке |
<!-- onpress/frame {"name":"gallery--lightbox","data":{"items":[{"img":"/wp-content/uploads/one.webp","alt":"A pencil on a notebook"},{"img":"/wp-content/uploads/two.webp","alt":"Three keys on a ring"}]}} /-->Видео: video
Встроенный плеер для файла из медиатеки.
| Параметр | Что делает |
|---|---|
src | адрес видеофайла, обязателен |
poster | картинка до запуска |
preload | none, metadata или auto |
width, height | размеры ролика |
style | стиль плеера; обычно aspect-ratio: 640 / 480;, чтобы место под ролик было с первой отрисовки |
<!-- onpress/frame {"name":"video","src":"/wp-content/uploads/demo.mp4","poster":"/wp-content/uploads/demo.png","width":"640","height":"480","style":"aspect-ratio: 640 / 480;"} /-->Файл: file
Ссылка на скачивание файла с иконкой.
| Параметр | Что делает |
|---|---|
href | адрес файла |
text | подпись ссылки |
<!-- onpress/frame {"name":"file","href":"/wp-content/uploads/price-list.pdf","text":"Price list, PDF"} /-->Сочетание клавиш: shortcut
Клавиши плашками и пояснение рядом.
<!-- onpress/frame {"name":"shortcut","data":{"keys":["⌘","K"],"text":"opens the command menu in the workspace."}} /-->Вопросы списком: faq-items и faq__schema
faq-items выводит аккордеон вопросов из data.items (поля question и answer, текст без разметки) и добавляет их в FAQPage страницы. Вопросы, написанные заголовками в тексте страницы, удобнее держать в обёртке faq.
faq__schema ничего не показывает: он добавляет в FAQPage вопросы из набора данных source, отобранные по слагу страницы. Нужен, когда вопросы показаны другим блоком, а разметку надо отдать.
<!-- onpress/frame {"name":"faq-items","data":{"items":[{"question":"Can a block hold markdown?","answer":"No. Block attributes hold plain text."},{"question":"Do blocks survive an export?","answer":"Yes, byte for byte."}]}} /-->
<!-- onpress/frame {"name":"faq__schema","source":"faq_schema"} /-->FAQPage на странице всегда один: вопросы всех источников сливаются в него.
Списки из данных: page-list и plan-list
Оба берут список из источника source: из набора данных или системного источника.
page-list— ссылки на страницы. Источник —pages.children(дети текущей страницы),pages.siblings(соседи) или свой набор с полямиtitleиurl.plan-list— тарифы: название, цена, период и для кого. Источник — набор с полямиname,amount,per,audience.
<!-- onpress/frame {"name":"page-list","source":"pages.siblings"} /-->
<!-- onpress/frame {"name":"plan-list","source":"pricing_plans"} /-->Значение, метки, меню, превью
| Фрейм | Параметры | Что выводит |
|---|---|---|
value | value — токен данных: page.data.version, page.title, site.name | значение текстом |
terms | taxonomy — topic или другая таксономия; link — "1" ссылками, "0" текстом; label — подпись перед списком | метки страницы |
menu | place — место меню: header, footer_1, footer_2 и так далее | меню сайта списком |
featured-image | figure — "1" в обёртке figure с подписью | превью страницы |
<!-- onpress/frame {"name":"value","value":"page.data.version"} /-->
<!-- onpress/frame {"name":"terms","taxonomy":"topic","link":"0","label":"Topic:"} /-->
<!-- onpress/frame {"name":"menu","place":"footer_2"} /-->
<!-- onpress/frame {"name":"featured-image","figure":"1"} /-->В редакторе дашборда
Во вкладке Редактор вызов с data — карточка секции: имя фрейма, заголовок и число элементов. По раскрытию — форма по data: строки — поля, список — повторяемая группа с добавлением, удалением и перетаскиванием, картинки выбираются из медиатеки; рядом переключатель на JSON. Правка меняет только этот вызов. Вызов с одними параметрами (alert, video, file) показывается карточкой вставки со ссылкой «Редактировать» на фрейм; параметры правятся во вкладке Markdown.