Войти
Настройка сайта
Markdown
Открыть в ИИ

Сменить оформление

Сменить оформление сайта — значит поменять CSS-переменные темы, а то, чего в переменных нет, дописать собственным CSS. Цвета, шрифты и ширины задаются через /data/css.variables, вёрстка своих блоков — через /data/css. Каждую запись можно сначала проверить без сохранения, а откатить изменения можно двумя запросами.

1. Прочитать, что задано

GET /data/css.variables отдаёт все переменные с текущим значением и значением темы, а в meta.changed перечисляет те, что на сайте уже поменяли. Например:

curl -s "$API/site/$SITE/data/css.variables" -H "Authorization: Bearer $OP_TOKEN"

Собственный CSS прочитайте через GET /data/css: с include_css=0 ответ приходит без самого листа, только с его размером и списком кусков blocks.

2. Поменять цвета и шрифты

PATCH /data/css.variables меняет только названные переменные, а с "dry_run": true показывает в changed, что поменяется, и ничего не записывает. Например, фирменный цвет, цвет ссылок, размер H1 и интерлиньяж текста:

curl -s -X PATCH "$API/site/$SITE/data/css.variables" \
  -H "Authorization: Bearer $OP_TOKEN" -H 'Content-Type: application/json' \
  -d '{"variables": {"color.primary": "#7c3aed", "color.link": "#6d28d9", "h1.size": 44, "paragraph.line_height": 1.6}, "dry_run": true}'

Если changed совпадает с задуманным, повторите запрос без dry_run. Размеры передавайте числом в пикселях (44), интерлиньяж — множителем (1.6), длины — со своей единицей ("1200px"). Полный список переменных — на странице «Стили и оформление».

3. Дописать собственный CSS

PUT /data/css заменяет лист целиком, поэтому сначала прочитайте текущий лист через GET /data/css и сохраните копию: истории версий у CSS нет. Свой кусок допишите в конец листа между двумя строками-сторожами с одним именем — по ним GET /data/css покажет кусок в blocks, и в следующий раз вы замените только его содержимое. Комментарии /* … */ CSS сайта не принимает, поэтому сторожа — правила :root с именем куска. Например, кусок для промоблока:

:root{--promo:1}
.promo{padding:64px 24px;background:var(--bg-second-color)}
.promo__title{font-size:40px;color:var(--primary-color)}
:root{--promo-end:1}

4. Записать CSS

PUT /data/css с "dry_run": true возвращает очищенный лист и в stripped называет всё, что очистка вырезала, но ничего не записывает. Если stripped и warnings пусты, отправьте тот же лист без dry_run, а меткой source подпишите запись — её видно при следующем чтении. Например, лист из файла site.json вида {"css": "…весь лист…", "dry_run": true}:

curl -s -X PUT "$API/site/$SITE/data/css" \
  -H "Authorization: Bearer $OP_TOKEN" -H 'Content-Type: application/json' \
  --data-binary @site.json

5. Проверить

После записи переменных и CSS кэш страниц сбрасывается, а готовые копии страниц собираются заново, поэтому изменения видны на сайте сразу. Параметр count у GET /data/css считает, сколько раз подстрока встречается в листе. Например, убедиться, что кусок для промоблока на месте:

curl -s "$API/site/$SITE/data/css?include_css=0&count=.promo" -H "Authorization: Bearer $OP_TOKEN"

Если страница в браузере показывает старое оформление, обновите её без кэша: Cmd+Shift+R.

6. Откатить

DELETE /data/css.variables возвращает к значениям темы перечисленные переменные, а без тела — все сразу. Например, откатить переменные из второго шага:

curl -s -X DELETE "$API/site/$SITE/data/css.variables" \
  -H "Authorization: Bearer $OP_TOKEN" -H 'Content-Type: application/json' \
  -d '{"variables": ["color.primary", "color.link", "h1.size", "paragraph.line_height"]}'

Собственный CSS откатите тем же PUT /data/css с сохранённой копией листа, а чтобы вернуть сайт к стилям темы целиком, удалите лист через DELETE /data/css.