# YouOnline24 — интеграция общих блоков Документация для разработчиков по подключению дизайн-системы и Web Components на сайтах экосистемы YouOnline24. **CDN:** https://cdn.youonline24.ru ## Ссылки на документацию (CDN) | Документ | URL | |----------|-----| | **Интеграция блоков** (эта страница) | https://cdn.youonline24.ru/docs/v1/integration.html | | Markdown | https://cdn.youonline24.ru/docs/v1/integration.md | | Оглавление документации | https://cdn.youonline24.ru/docs/v1/ | | **Промпт Cursor: подключить CDN в проект** | https://cdn.youonline24.ru/docs/v1/cursor-integrate.html | | Промпт Cursor (Markdown) — подключение | https://cdn.youonline24.ru/docs/v1/cursor-integrate.md | | **Промпт Cursor для CDN (деплой)** | https://cdn.youonline24.ru/docs/v1/cursor-cdn.html | | Промпт Cursor (Markdown) — деплой | https://cdn.youonline24.ru/docs/v1/cursor-cdn.md | | Демо компонентов | https://cdn.youonline24.ru/demo/v1/ | **Репозиторий платформы:** `BS_youonline24` --- ## Быстрый старт Добавьте в `` и перед ``: ```html

``` Замените `project="curl-test"` на slug вашего проекта (см. [список проектов](#список-проектов)). --- --- ## Верстка: Bootstrap + корпоративные цвета (обязательно) При разработке UI проекта используйте **последнюю стабильную версию Bootstrap 5.x** (через CDN jsDelivr) и **корпоративные цвета YouOnline24**. Рекомендуемое подключение (пример): ```html ``` Далее используйте токены YouOnline24 (цвета/радиусы/отступы) и не вводите альтернативные палитры: - `#5a189a`, `#ff9e00`, `#000`, `#fff`, `#f7f7f7` Если проект уже на Bootstrap 4 или кастомном UI — мигрируйте на Bootstrap 5.x при ближайшей доработке верстки. ## Дизайн-система ### Тема **Только светлая тема.** Тёмная тема не поддерживается и не должна добавляться в проектах экосистемы. ### Корпоративная палитра | Назначение | Цвет | CSS-переменная | |------------|------|----------------| | Основной (фиолетовый) | `#5a189a` | `--yo24-color-primary` | | Акцент (оранжевый) | `#ff9e00` | `--yo24-color-secondary` | | Текст | `#000000` | `--yo24-color-text` | | Фон страницы | `#f7f7f7` | `--yo24-color-bg` | | Поверхности (карточки) | `#ffffff` | `--yo24-color-surface` | | Белый | `#ffffff` | `--yo24-color-white` | --- ## Web Components ### Загрузчик ```html ``` ### yo24-footer ```html ``` ### yo24-donate ```html ``` ### yo24-tools-nav ```html ``` ### yo24-consent Показывайте только для проектов, где есть хранение снимков/чувствительных данных. ```html ``` ### yo24-ad ```html ``` --- ## Локализация (i18n) ### Поддерживаемые языки | Код | Язык | Файл на CDN | |-----|------|-------------| | `ru` | Русский | `/config/v1/i18n/ru.json` | | `en` | English | `/config/v1/i18n/en.json` | | `de` | Deutsch | `/config/v1/i18n/de.json` | | `es` | Español | `/config/v1/i18n/es.json` | | `fr` | Français | `/config/v1/i18n/fr.json` | | `pt` | Português | `/config/v1/i18n/pt.json` | | `zh` | 中文 | `/config/v1/i18n/zh.json` | | `ja` | 日本語 | `/config/v1/i18n/ja.json` | Список локалей: https://cdn.youonline24.ru/config/v1/i18n/locales.json ### Где править тексты | Что | Где (репозиторий) | На CDN | |-----|-------------------|--------| | Общие тексты блоков (футер, consent, донат по умолчанию) | `packages/config/i18n/{lang}.json` | `/config/v1/i18n/{lang}.json` | | Текст кнопки доната для проекта | `projects.json` → `donate.label` | `/config/v1/projects.json` | | Названия в tools-nav | `projects.json` → `name` | `/config/v1/projects.json` | После правок: `npm run build` → `npm run deploy`. ### Использование на странице ```html ``` Атрибут `lang` должен совпадать с языком страницы. Поддерживаются коды из таблицы (`zh-CN` нормализуется в `zh`). --- | Slug | Сайт | Статус | |------|------|--------| | `curl-test` | http://curl-test.ru | интегрирован | | `ebook-convert` | https://ebook-convert.ru | шаблон в `examples/ebook-convert/` | | `clonemailbox` | https://clonemailbox.online | шаблон в `examples/clonemailbox/` | --- ## Версии CDN Формат URL: `https://cdn.youonline24.ru/{тип}/v{версия}/{файл}` | Тип | Пример | |-----|--------| | design | `/design/v1/yo24-tokens.css` | | blocks | `/blocks/v1/yo24-blocks.js` | | config | `/config/v1/projects.json` | | i18n | `/config/v1/i18n/ru.json` | | brand | `/brand/v1/logo_you24.png` | | demo | `/demo/v1/` | | docs | `/docs/v1/` | --- ## Для ИИ-агентов (Cursor и др.) - Не копируй HTML футера/лицензии вручную — только ``. - Не добавляй тёмную тему. - Палитра: `#5a189a`, `#ff9e00`, `#000`, `#fff`, `#f7f7f7`. - Промпт «подключить CDN в проект»: https://cdn.youonline24.ru/docs/v1/cursor-integrate.html - Промпт «деплой на CDN»: https://cdn.youonline24.ru/docs/v1/cursor-cdn.html --- ## Поддержка Разработчик: https://youonline24.pro