Бинды data-op-bind
Блок onpress/… добавляет кусок разметки в поток. Но часто нужно подставить значение внутрь тега: href ссылки на главную, src логотипа, заголовок страницы в h1, поле элемента списка. Для этого тег помечается атрибутом data-op-bind с картой «куда → что».
<a class="logo" data-op-bind='{"href":"site.home_url"}'>
<img data-op-bind='{"src":"site.logo_url","alt":"site.name"}'>
</a>
<h1 data-op-bind='{"text":"page.title"}'></h1>После сборки:
<a class="logo" data-op-bind="{"href":"site.home_url"}" href="https://example.onpress.pro/">
<img data-op-bind="…" src="https://example.onpress.pro/…/logo.png" alt="Example">
</a>
<h1 data-op-bind="…">Тарифы</h1>Сам атрибут data-op-bind в результате остаётся — браузеру он безразличен, а по нему видно, что было подставлено. Сборка всегда идёт из исходника, так что подстановки не накапливаются.
Синтаксис
- Значение атрибута — JSON-объект: ключ — куда писать, значение — токен.
- Атрибут пишется в одинарных кавычках, JSON внутри — в двойных. В двойных кавычках атрибут оборвётся на первой же кавычке JSON и пропадёт целиком; загрузка фрейма предупредит об этом.
- Ключ
text— заменить содержимое элемента текстом (экранируется). Ключhtml— заменить содержимое HTML-строкой как есть. Любой другой ключ — имя атрибута, который будет выставлен (href,src,alt,title,content,datetime,aria-label,data-что-угодно). - В одном
data-op-bindможно сколько угодно пар. - Токен без значения (например
page.parent_titleу страницы верхнего уровня) ничего не выставляет: атрибут или содержимое остаются как в исходнике. Такие токены перечислены в отчёте сборки полемunresolved. - Пустое значение — пустая строка: атрибут будет выставлен пустым.
- Ключ
if— условие элемента: значение токена пустое,0или токена нет — элемент снимается целиком, вместе с содержимым.unless— наоборот. Так в одном шаблоне живут два варианта разметки: карточка с картинкой и без неё, ссылка и текущая страница в разбивке. - Ключ
picture— только на<img>: токен даёт адрес картинки, тег становится<picture>с WebP и вариантами 1x/2x — так же, как картинка в тексте страницы. Классы,altиloadingберутся с тега,wp-image-<id>добавляется сам. Адрес не из медиатеки — остаётся<img>с этим адресом. Обычныйsrcтакого не делает: он только меняет расширение на.webp, если файл есть.
<article class="card" data-op-bind='{"if":"item.image.url"}'>
<img class="card__img" loading="lazy" data-op-bind='{"picture":"item.image.url","alt":"item.title"}'>
</article>
<article class="card card--no-image" data-op-bind='{"unless":"item.image.url"}'>…</article>
<p data-op-bind='{"if":"item.excerpt","text":"item.excerpt"}'></p>Подстановка идёт потоковым HTML-процессором, без регулярных выражений: чужая разметка вокруг не меняется.
Токены
site.* — сайт
| Токен | Значение |
|---|---|
site.home_url, site.url | адрес главной со слешем на конце |
site.site_url | корневой адрес сайта |
site.name | название сайта |
site.description | описание сайта |
site.logo_url | логотип: логотип темы, иначе картинка шапки, иначе иконка сайта |
site.host | домен без схемы |
site.lang | слаг текущего языка |
site.year | текущий год |
site.charset | кодировка |
site.login_url, site.logout_url, site.admin_url | адреса входа, выхода и служебной панели сайта |
site.blog_id | внутренний номер блога — не выводите его в публичную разметку |
page.* — собираемая страница
| Токен | Значение |
|---|---|
page.id | id страницы |
page.url | полный адрес страницы |
page.title | заголовок |
page.slug, page.status, page.type | слаг, статус, тип записи |
page.parent_id, page.parent_title, page.parent_url | родитель; только если он есть |
page.excerpt | выдержка; если пустая — первые слова текста |
page.description | выдержка без автогенерации: пустая выдержка — пустая строка |
page.date, page.date_iso | дата публикации в формате сайта и в ISO 8601 |
page.date_modified, page.date_modified_iso | дата изменения |
page.thumbnail_id, page.thumbnail_url, page.thumbnail_alt | изображение записи (_thumbnail_id); только если есть |
page.author_id, page.author_name | автор и его отображаемое имя |
page.author_url | архив автора; только если его адрес не раскрывает логин учётной записи |
page.author_avatar | аватар; только если он локальный, а не Gravatar с хешем почты |
page.categories, page.tags | термины через запятую (у записей с рубриками) |
page.category_name, page.category_slug, page.category_url | первая рубрика |
page.paged | номер страницы разбивки из адреса (?blog_page=N), без параметра — 1 |
page.lang | слаг языка страницы |
Любой токен page.* в data-op-bind делает фрейм зависимым от страницы: он собирается на каждом запросе и не даёт статической копии.
page.data.* — значения из свойств страницы
page.data.<ключ> — значение своего ключа из свойств страницы. Работает в data-op-bind, в match повторителя, в блоке onpress/value и в параметрах вызова фрейма.
---
name: "Canva"
data.rating: 5
---<div class="rating" data-op-bind='{"data-rating":"page.data.rating"}'></div>Токены отдают только ключи, пришедшие из свойств страницы при публикации; служебная мета с _ в начале наружу не уходит, произвольную мету страницы так не прочитать. Три формы записи в свойствах — rating: 5, data.rating: 5 и вложенная под data: — равноправны и читаются одинаково: page.data.rating. Подробно — свойства страницы.
item.* — элемент повторителя
Внутри onpress/repeat — поля текущего элемента списка. Вложенность через точку, индекс массива — числом:
<!-- onpress/repeat {"source":"pages.children"} -->
<a data-op-bind='{"href":"item.url","text":"item.title"}'></a>
<!-- /onpress/repeat -->
<!-- onpress/repeat {"source":"team"} -->
<img data-op-bind='{"src":"item.photo.url","alt":"item.name"}'>
<a data-op-bind='{"href":"item.links.0.url"}'>Профиль</a>
<!-- /onpress/repeat -->Логическое true становится "1", false — пустой строкой; объект или массив не подставляется. Во вложенном повторителе item.* — элемент ближайшего повторителя. Вне повторителя item.* не трогается.
option.* — опция сайта
option.<имя> — скалярная опция текущего сайта: option.blogname, option.admin_email. Несуществующая опция — пустая строка; массив — не подставляется. Токен считается только при сборке страницы, POST /data/resolve его не вычисляет.
frame.* — параметры вызова
Внутри фрейма, вызванного с параметрами, frame.<ключ> — значение атрибута вызова. Вызов <!-- frame/assistant__chat {"agent":"canva"} /--> — и во фрейме:
<div id="ai-assistant-mount" data-op-bind='{"data-agent":"frame.agent"}'></div>Параметра нет — бинд ничего не выставляет. Тот же токен работает в атрибутах блоков внутри фрейма: значение атрибута, целиком равное frame.<ключ> или page.<поле>, заменяется значением, а без значения атрибут снимается и блок берёт свой дефолт. Подробно — параметры вызова.
raw: — константа
raw:<значение> подставляет значение как есть. Нужен в match повторителя ({"frame.slug":"raw:docs"}), иногда в бинде, когда значение — константа фрейма, и в атрибуте блока, когда литерал только похож на токен.
frame.id, frame.type, frame.url
Эти токены заняты платформой, поэтому параметры вызова с именами id, type и url не заводите.
Где бинды работают
Во фреймах и в теле страницы (внутри любой HTML-разметки). Где тега-носителя нет — например, внутри <script>, — значение выводит блок onpress/value с тем же токеном. Внутри повторителя бинды каждой копии подставляются со своим элементом — внешний проход не перепишет заголовок вложенного элемента заголовком внешнего.
Примеры
Шапка с кнопкой из набора данных:
<!-- onpress/repeat {"source":"header-cta","limit":1} -->
<a class="site-header__cta" data-op-bind='{"href":"item.url","text":"item.title","target":"item.target"}'></a>
<!-- /onpress/repeat -->Карточка статьи с датой в машиночитаемом виде:
<time data-op-bind='{"datetime":"page.date_iso","text":"page.date"}'></time>Хлебная крошка родителя, которая исчезает у верхнего уровня: элемент без значения остаётся пустым — поставьте ему стиль :empty { display:none } в CSS сайта.
<a class="eyebrow" data-op-bind='{"text":"page.parent_title","href":"page.parent_url"}'></a>Когда бинд не сработал
- Атрибут в двойных кавычках — предупреждение при загрузке фрейма.
- Битый JSON в атрибуте — в отчёте сборки предупреждение
битый JSON в data-op-bind. - Токен без значения — в отчёте сборки
unresolved. Отчёт возвращается в ответе записи фрейма (bake.response.unresolved). - Токен написан с ошибкой — тоже
unresolved: словарь закрытый, неизвестное имя значения не имеет.