SSR CSS променливи на темата

SSR договор на тема: структура и контрол на данни

SSR договорът на тема дефинира как CMS подава над 20+ параметъра за стил, логика и ресурси още при рендериране, без runtime промени в CSS. Той дава предвидим контрол върху CSS променливи, data стойности и asset ресурси, което ускорява зареждането и улеснява разработката.

Как работи SSR договорът

CMS системата подава структурирани SSR данни към темата при рендериране. Темата използва тези данни чрез CSS, HTML и JavaScript без динамично презаписване. Това елиминира нуждата от допълнителни заявки и намалява риска от визуални несъответствия.

Основни категории данни

• SSR CSS променливи – управляват дизайн чрез var(--...)
• SSR data стойности – контролират текст и поведение
• SSR asset ресурси – осигуряват legacy съвместимост

SSR CSS променливи: контрол на дизайна

CSS променливите дефинират визуалната идентичност на сайта. Темата използва стойности като --ms-color-primary и --ms-font-body, за да приложи цветове, шрифтове и оформления.

Ключови променливи

• Цветове: --ms-color-primary, --ms-color-text
• Фон: --ms-bg-image, --ms-site-bg-image
• Hero секция: --ms-hero-height, --ms-hero-bg-image
• Бутони: --ms-btn-primary-bg, --ms-btn-radius

SSR data стойности: логика и съдържание

Data атрибутите управляват поведението на интерфейса. Стойности като data-ms-slider-autoplay контролират динамични компоненти без допълнителен код.

Това позволява бързо адаптиране на функционалности според нуждите на проекта без промяна в основната тема.

SSR asset ресурси: съвместимост и разширяемост

Asset стойностите осигуряват backward съвместимост със стари системи. Файлове като css_theme и css_custom добавят допълнителен контрол върху стилизацията.

Изборът на неправилна структура води до трудна поддръжка и бавен рендеринг, докато добре дефинираният SSR договор гарантира яснота и мащабируемост.

SSR договорът на темата описва какви данни CMS-ът подава към темата при рендериране и как темата ги използва, без да променя динамично CSS файловете. Той разделя данните на стилови стойности за CSS, текстови и логически стойности за HTML/JS, и bridge ресурси за съвместимост със стария модел.

SSR договор на темата

Описва целия формат на данните, които CMS-ът подава към темата при рендериране.

SSR CSS променливи

Описват стиловите стойности, които темата използва в CSS чрез var(--...).

-

--ms-color-primary основен цвят
--ms-color-secondary вторичен цвят
--ms-color-text основен цвят текст
--ms-color-bg основен фон

--ms-bg-image фоново изображение
--ms-bg-size размер на фона
--ms-bg-position позиция на фона
--ms-bg-repeat повторение на фона

--ms-header-bg фон на header
--ms-header-text текст в header
--ms-header-bg-image изображение за header

--ms-btn-primary-bg фон на основен бутон
--ms-btn-primary-color текст на основен бутон
--ms-btn-radius заобляне на бутон

--ms-hero-height височина на hero
--ms-hero-overlay тъмнина върху hero
--ms-hero-title-color цвят на hero заглавие
--ms-hero-text-color цвят на hero текст
--ms-hero-bg-image фон на hero

--ms-site-bg-image фон на сайта
--ms-font-body основен шрифт
--ms-radius-md средно заобляне

SR data стойности

Описват текстови и логически стойности, които темата използва чрез data-*, HTML или JavaScript.

data-ms-cta-more текст за бутон more
data-ms-label-search текст за търсене
data-ms-header-mode режим на header
data-ms-navbar-mode режим на навигация
data-ms-slider-autoplay auto play на slider
data-ms-slider-interval интервал на slider

SSR asset стойности

Описват допълнителни ресурси за legacy съвместимост, като CSS override файлове и theme пакети.

css_theme основен theme css
css_layout layout css файл
css_color_pack пакет с цветове
css_custom допълнителен custom css