Готовые фреймы
Здесь собраны фреймы, которые работают на живых сайтах — bota.chat и aitoolsformarketing.pro. Наборы на этих сайтах одинаковые: фрейм с тем же слагом отличается разве что id ассистента или строкой копирайта. Возьмите нужный через GET /frames/{slug} на сайте-образце и загрузите к себе POST /frames — так получается своя копия. Общие фреймы новых сайтов живут в библиотеке и обновляются сами — см. системные фреймы шаблона. Механика — в разделе фреймы, блоки — в справочнике блоков.
У каждого фрейма две роли. Фрейм страницы называет свойство frame, и он обрамляет страницу целиком. Вызываемый фрейм подключается строкой <!-- frame/<имя> /--> — из другого фрейма или прямо из тела страницы; парная форма передаёт ему слот, лишние атрибуты — параметры frame.*.
Фреймы страниц
| Фрейм | Для чего | Вкладывает |
|---|---|---|
| assistant | посадочная ассистента: чат из data.assistant над статьёй — подробный пример | article__faq, site__footer |
| landing | главная и посадочные ассистента, id чата во фрейме | article__faq, site__footer |
| article | статья и юридические страницы | site__header, author__byline, article__faq, site__footer |
| docs | документация с деревом разделов | site__header, site__footer |
| site__404 | страница «не найдено» | site__header, site__footer |
| news | лента новостей | site__header, site__footer |
| news__category | рубрика новостей | site__header, site__footer |
| news__post | одна новость | site__header, author__byline, news__share, news__more, site__footer |
| author__page | страница автора | site__header, author__head, author__avatar, author__socials, site__footer |
| home | главная — целый HTML-документ из наборов | — |
| pricing | тарифы из наборов | site__header, site__footer |
Вызываемые фреймы
| Фрейм | Что выводит | Откуда зовут |
|---|---|---|
| site__header | шапка сайта | фреймы страниц |
| site__footer | подвал сайта | фреймы страниц |
| article__faq | вопросы из набора faq | article, assistant, landing |
| faq | вопросы из текста страницы (слот) | тело страницы |
| howto | шаги инструкции из текста страницы (слот) и разметка HowTo в своей верстке | тело страницы |
| outline | свёрнутое оглавление | тело страницы |
| assistant__chat | чат обычной разметкой, с параметрами | сейчас нигде |
| news__more | «читайте ещё» | news__post |
| news__share | кнопки «поделиться» | news__post |
| author__byline | подпись автора | news__post, author__card, article (по author: 1) |
| author__card | карточка автора | тело страницы |
| author__avatar | аватар | author__byline, author__page |
| author__socials | соцсети автора | author__card, author__page |
| author__head | служебный: набор автора для Person | author__page |
Системные фреймы шаблона
Новый сайт получает эти фреймы системными: новая версия фрейма доходит до всех сайтов, где он не переделан под себя, а вложенные фреймы доезжают вместе с новой версией вкладывающего. Список с версиями — GET /frames/system, разметка — GET /frames/system/{слаг}. Данные фреймы читают из наборов сайта: нет набора — блок не выводится или выводит пустой список.
Фреймы страниц
| Фрейм | Для чего | Данные |
|---|---|---|
home | главная из секций | наборы home_*; вкладывает home__*, site__marquee, news__card, changelog__latest |
about | о компании | наборы about_*; вкладывает site__text-media дважды и home__testimonials |
feature | страница возможности | набор feature_main, элемент с page, равным слагу страницы |
contact | контакты | набор contact, элементы по kind: page, channel, office, help |
wall-of-love | стена отзывов | наборы wall_main, testimonials |
changelog | лента изменений, по 10 записей на страницу | набор changelog; вкладывает site__pager |
changelog__post | одна запись ленты | элемент набора changelog со слагом страницы |
headless | посадочная ассистента без шапки: чат, заголовок, подпись автора, кнопки «поделиться», текст страницы, вопросы, оглавление справа | вкладывает site__prose (текст идёт в обёртке op-prose), author__byline, news__share, article__faq, site__outline, site__footer |
Вызываемые фреймы
| Фрейм | Что выводит | Откуда зовут, как включить |
|---|---|---|
site__announce | полоса объявления над шапкой | site__header; набор announce, элемент с enabled: true; нет такого — полосы нет |
site__cta | призыв к действию внизу страницы | site__footer; выводится на страницах со свойством cta: 1 — берётся элемент набора cta с show: 1; без поля блока нет |
site__cookies | плашка согласия на cookies | site__footer; тексты и кнопки из набора cookies (title, text, policy_label, policy_url, accept_label, decline_label), набора нет — плашки нет. Выбор запоминается на год в куке op_cookie_consent (1 — принято, 0 — отклонено) и сообщается событием op:cookie-consent на document с detail.consent. Пока на странице есть плашка, Яндекс Метрика и Google Analytics 4 не загружаются: без выбора и после «Отклонить» запросов к ним нет, после «Принять» они загружаются сразу, без перезагрузки страницы, а вызовы, сделанные до этого, не теряются |
site__lightbox | просмотр картинок во весь экран | site__footer; подписи кнопок из набора lightbox |
site__pager | постраничная навигация | changelog, news, news__category; номер страницы из адреса |
| page-feed | лента дочерних страниц карточками с разбивкой: каталог раздела, с "parent":"any" — последние на главной | тело страницы; источник pages.children |
| page-feed—related | «Больше по теме»: четыре соседа записи | тело записи |
page-feed__card, page-feed__pager | карточка и разбивка ленты | page-feed, page-feed--related |
site__outline | оглавление по H2–H3: подпункты H3 раскрыты только у раздела, который сейчас читают, остальные свёрнуты; сворачивание и его анимация — в стилях и скрипте самого фрейма, от темы не зависят | article, docs, headless, news__post |
site__prose | типографика текста страницы: заголовки, абзацы, списки, цитаты, код, таблицы, картинки с подписями — для всего, что лежит внутри обёртки с классом op-prose. Разметки у фрейма нет, только style.css; размеры и цвета заданы переменными --prose-* | article, docs, headless, news__post; в своём фрейме — вызов в начале разметки и класс op-prose на обёртке onpress/content |
site__faq | вопросы из слота | тело страницы; параметр title |
news__card | карточка новости | внутри повторителей home, news, news__category, news__more, author__posts |
changelog__latest | три последние записи ленты | home; набор changelog |
site__bento | сетка карточек | параметр source; home__bento зовёт его с home_bento |
site__offer | секция предложения | параметр source; home__offer зовёт его с home_offer |
site__marquee | бегущая строка | параметр source |
site__text-media | текст с картинкой | параметры source и reverse (картинка слева) |
site__steps | шаги | параметры source и title |
home__spotlight, home__segments, home__integrations, home__testimonials | секции главной | наборы home_spotlight, home_segments, home_integrations, home_testimonials и testimonials |
Фреймы с параметром source — секции без своих данных: вызов называет набор, <!-- frame/site__bento {"source":"home_bento"} /-->. Без параметра на странице секция пуста, а в превью и на холсте показывает демо-элементы — подробно в параметрах вызова.
Меню, языки и соцсети
Эти системные фреймы выводят меню, переключатель языков, соцсети и копирайт. У фреймов разметка открыта: внутри стоит повторитель по системным данным и бинды, поэтому теги и классы можно менять как у любого фрейма. Поставьте фрейм на сайт через POST /site/{site_id}/frames/system/{слаг}/install и правьте его через PUT /frames/{слаг}. Вызов в тексте или во фрейме — <!-- frame/menu {"place":"footer_1"} /-->.
| Фрейм | Что выводит | Данные | Параметры |
|---|---|---|---|
menu | меню списком ul.op-menu, до трех уровней | menu.header, вложенные item.children | place — область (header, footer_1, footer_2, footer_3), lang, depth (1 — только верхний уровень) |
menu--dropdown | то же меню, свернутое в details | как у menu | те же и label — подпись |
lang-switcher | языки текущей страницы списком | pages.translations | hide_current — без текущего языка |
lang-switcher--dropdown | языки выпадающим списком | pages.translations | hide_current, label — подпись для aria-label |
socials | ссылки на соцсети | site.socials | — |
footer-columns | колонки подвала с заголовком из имени меню | menu.footer_1–menu.footer_3 | — |
copyright | строка «© год имя сайта» | site.year, site.name | — |
В разметке по умолчанию у пунктов меню один класс menu-item без служебных классов и id, а сеть у ссылки на соцсеть выходит атрибутом data-network.
Как сделать свою копию
curl -s -H "Authorization: Bearer op_ВАШ_ТОКЕН" "$API/frames/system/article" | jq -r .frame.html > article.html
curl -s -X POST "$API/site/$SITE/frames" -H "Authorization: Bearer op_ВАШ_ТОКЕН" \
-H 'Content-Type: application/json' \
-d "$(jq -n --rawfile html article.html '{slug: "article", html: $html}')" | jq '{success, frame: .frame.slug, frame_refs: .frame.frame_refs, warnings}'Переносите вместе с фреймом всё, что он вкладывает (frame_refs в ответе), и наборы, которые он читает (sources): без них блоки выведут пустое место и комментарий. Меняйте разметку, но не трогайте блоки и бинды, на которых держатся данные, — подробно в рецепте свой фрейм из готового.