Сайт Каркаса теперь на Каркасе

Тема — это токены, а не вёрстка

Оформление сайта — тема «Каркас»: объект из пары десятков значений — цвета, два шрифта, радиусы. Движок превращает их в CSS-переменные, шаблоны используют только переменные. Захотим освежить фирстиль — поменяем токены, контент и разметку не тронем.

Шрифты самохостятся: Manrope и IBM Plex Mono лежат в assets темы, никаких обращений к внешним CDN. Это скорость по PageSpeed, работа офлайн-снимка и независимость от чужой инфраструктуры.

Почти всё решается токеном. Если верстальщику захотелось править шаблон — стоп, спроси старшего.

Страницы — шаблоны со слотами

Главная и внутренние страницы — шаблон page.html, кейсы — list.html, этот текст — article.html. У каждого шаблона обозначены слоты: заголовок, тело, картинки. Движок рендерит данные в слоты на сервере — браузер получает готовый HTML.

Первый экран не верстали с нуля: у темы есть hero-пресеты, на главной — split, на внутренних — center. Выбираются в админке, как и положено.

Шорткоды в теле страницы

Часть блоков этого сайта — не вёрстка, а шорткоды прямо в тексте страницы. «Схема монтажа» на главной — это [steps], сетки возможностей — [features], цитата выше — [quote], форма заявки — [form:lead]. Движок разворачивает их на сервере в блоки на токенах активной темы.

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

1. Пишете

   Шорткод в теле страницы: пункты через «|», поля через «::».

2. Движок разворачивает

   На сервере, с экранированием и на токенах темы. Без JS.

3. Блок живёт с темой

   Смените тему — тот же шорткод выглядит по-новому.

Интерактив — шесть островов, ноль бандла

Сервер отдаёт финальный HTML, поэтому «оживлять» страницу нечем и незачем: клиентского фреймворка нет. Мобильное меню, формы, переключатель «облако/коробка» — ванильные острова, слушающие события на document через делегирование. Нет бандла — нет и hydration-mismatch, а страницы летают.

SEO мы не делали. Его сделал движок

ЧПУ-адреса, canonical, OG-разметка, Schema.org (на главной — FAQPage, здесь — BlogPosting), sitemap — всё сгенерировано автоматически. Наша забота в вёрстке — один H1 на страницу и семантика.

Что это даёт вам

• сайт, который вы видите, — живое демо редакции «Сайт»: скорость, админка, блог — всё настоящее;
• ваш сайт собирается из тех же деталей: тема под ваш фирстиль, те же шаблоны и шорткоды;
• мы едим то, что готовим, — проблемы движка мы почувствуем первыми и раньше вас.

Хотите посмотреть админку и то, как этот сайт управляется изнутри, — приходите на демо, покажем без прикрас.