Как перенести готовый HTML в OnPress

Готовый HTML можно опубликовать как часть сайта — например, лендинг с общей шапкой, подвалом и другими элементами. А можно сделать самостоятельную страницу со своим интерфейсом — например, доску задач наподобие Trello.

В этом кейсе перенесем лендинг веломастерской: подключим общие элементы сайта, вынесем тексты и карточки услуг в данные и сохраним исходное оформление и поведение.

Для переноса нужны исходный HTML, его CSS, JavaScript и картинки, адрес сайта OnPress, доступ к API и адрес будущей страницы. Если сайта еще нет, создайте его; токен доступен в «Настройки» → «API». По адресу сайта выберите его site_id через GET /sites.

Запросы выполняются к https://onpress.pro/api/v2/site/{site_id} с заголовком Authorization: Bearer op_ВАШ_ТОКЕН. Форматы записи — в справочниках «Фреймы», «Данные» и «Страницы».

Разобрать исходный HTML

Сначала выделите в исходнике общие части и содержимое. Например, такой фрагмент уже сверстан и оформлен в style.css:

<header class="site-header"><a href="/">Веломастерская</a></header>
<main class="landing">
  <section class="hero">
    <h1>Ремонт велосипедов</h1>
    <p>Подготовим велосипед к ежедневным поездкам.</p>
    <img src="images/workshop.webp" alt="Веломастерская">
    <button class="booking-button" data-booking>Записаться</button>
  </section>
  <section class="services">
    <article class="service-card">
      <h2>Ремонт</h2><p>Найдем и устраним неисправность.</p>
    </article>
    <article class="service-card">
      <h2>Настройка</h2><p>Отрегулируем тормоза и переключатели.</p>
    </article>
  </section>
</main>
<footer class="site-footer">Веломастерская</footer>

Разделение для этой страницы:

Часть исходника	Куда перенести
Общие шапка и подвал	Фреймы `workshop-site__header` и `workshop-site__footer`, которые можно использовать на других страницах.
Расположение секций, классы, разметка карточки, кнопка	Основной фрейм `workshop-landing`.
Заголовок, вступление, картинка	Свойства страницы: `name`, `data.lead`, `data.hero_image`.
Карточки услуг	Один набор `workshop_services`, по записи на услугу.
Название сайта в общих частях	Поле `site.name` из настроек сайта.
Адрес и SEO	Свойства страницы `url`, `seo_title`, `seo_description`.

Выносите отдельным фреймом то, что будет общим для нескольких страниц. Классы, сетка и постоянные подписи элементов остаются в разметке; индивидуальные тексты — в свойствах страницы, повторяющиеся записи — в одном наборе данных.

Сохранить услуги в данных

Запишите список через PUT /data/workshop_services. Тело запроса:

{
  "items": [
    {"id": "repair", "title": "Ремонт", "text": "Найдем и устраним неисправность."},
    {"id": "tuning", "title": "Настройка", "text": "Отрегулируем тормоза и переключатели."}
  ]
}

Теперь каждая карточка — отдельная запись. Чтобы добавить услугу или поменять ее описание, меняйте этот список. Повторитель в разметке возьмет записи из него и создаст карточки. Обычную правку списка показывает гайд «Данные».

Собрать фреймы

Создайте общую шапку workshop-site__header из ее исходного фрагмента:

<header class="site-header"><a href="/">{{site.name}}</a></header>

И подвал workshop-site__footer:

<footer class="site-footer">{{site.name}}</footer>

Проверьте название сайта в настройках: в примере это «Веломастерская». Оно подставится в обе общие части.

Основной фрейм workshop-landing сохраняет документ исходной страницы. Внутри него поставьте шапку и подвал, а вместо двух одинаково сверстанных карточек оставьте один образец:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{page.title}}</title>
</head>
<body>
  <!-- frame/workshop-site__header /-->
  <main class="landing">
    <section class="hero">
      <h1>{{page.title}}</h1>
      <p>{{page.data.lead}}</p>
      <img src="{{page.data.hero_image}}" alt="Веломастерская">
      <button class="booking-button" data-booking>Записаться</button>
    </section>
    <section class="services">
      <article class="service-card" data-op-repeat="workshop_services">
        <h2>{{item.title}}</h2><p>{{item.text}}</p>
      </article>
    </section>
  </main>
  <!-- frame/workshop-site__footer /-->
</body>
</html>

page.title возьмет заголовок из name, а page.data.lead и page.data.hero_image — значения из свойств этой страницы. data-op-repeat="workshop_services" повторит сам article для каждой услуги; внутри карточки item.title и item.text относятся к текущей записи. В результате на странице снова будут две карточки с исходными текстами.

Шапка и подвал содержат только свои фрагменты, а <html>, <head> и <body> остаются у основного фрейма. Сохраните остальные нужные части исходника: форму записи, ее разметку и элементы, которыми управляет JavaScript. Показанные фрагменты демонстрируют именно замену текста и карточек.

Сначала запишите шапку и подвал через POST /frames с полями slug и html, затем тем же способом основной фрейм. Если такой фрейм уже есть на выбранном сайте, прочитайте его и обновите через PUT /frames/{ref}. Подстановка полей и вызов вложенного фрейма показаны в гайде «Фреймы».

Перенести стили, скрипты и картинки

Сохраните исходный CSS в файле style.css основного фрейма через PUT /frames/workshop-landing/files?name=style.css, передав текст файла полем content. Обычный браузерный JavaScript запишите таким же способом в script.js. OnPress подключает файлы фрейма к странице автоматически, поэтому прежние подключения этих же style.css и script.js из HTML уберите.

Сохраните исходные классы, id, атрибуты и обработчики событий, на которых держатся оформление и работа кнопок. Если скрипт использует import, сохраните подключение с type="module" и доступным HTTPS-адресом скрипта или подготовьте браузерную сборку. Правила подключения файлов — в гайде «Фреймы».

Загрузите картинки через POST /media и замените пути из локальной папки их опубликованными адресами: в HTML — src, в CSS — url(...). Адрес главной картинки запишите в data.hero_image. Имеющиеся доступные HTTPS-ссылки можно сохранить. Подробности загрузки — в гайде «Медиа».

Опубликовать страницу

После записи данных, фреймов и ассетов опубликуйте страницу через POST /pages/markdown. В поле markdown передайте документ:

---
name: "Ремонт велосипедов"
url: "/workshop/"
status: "publish"
lang: "ru"
frame: "workshop-landing"
seo_title: "Ремонт велосипедов — Веломастерская"
seo_description: "Ремонт и настройка велосипедов. Подготовим велосипед к ежедневным поездкам."
data.lead: "Подготовим велосипед к ежедневным поездкам."
data.hero_image: "/media/workshop.webp"
---

В lang укажите активный язык своего сайта. В data.hero_image подставьте фактический адрес загруженной картинки. Текст вступления теперь хранится в data.lead, а общий список услуг — в workshop_services; разметка фрейма читает эти значения.

Если по этому адресу уже есть страница, прочитайте ее через GET /pages/{ref}/markdown и обновите ее через PATCH /pages/{ref}: назначьте frame: workshop-landing, нужные значения свойств и поле data с lead и hero_image. Сохраните ее id и нужные существующие свойства. Так повторный перенос обновит страницу по прежнему адресу. Если лендинг должен стать главной, назначьте опубликованную страницу через PUT /data/site.front_page с ее id в поле page.

Проверить результат

Откройте публичный адрес страницы. Сравните его с исходником на широком и узком экране: сетку, шрифты, цвета, картинки, количество и порядок карточек. Проверьте работу кнопки записи, формы и остальных исходных скриптов.

Перенос готов, когда страница выглядит и работает как исходный лендинг, шапка и подвал используются общими фреймами, а заголовок, вступление и список услуг берутся из указанных данных. Следующее изменение текста выполняется в свойствах страницы, изменение услуг — в workshop_services, изменение оформления — во фреймах и их файлах.