Интеграция нового дизайна

Это отдельное практическое руководство для подключения готовой HTML-вёрстки к FoxCoreCMS.

1. Подготовьте каталог

Создайте отдельную папку:

design/my-design/
├── index.html
├── inner.html
├── contact.html
├── 404.html
├── css/
│   └── style.css
├── js/
│   └── main.js
├── images/
└── fonts/

Не смешивайте новый дизайн с каталогами других проектов или демонстрационных тем.

2. Исправьте пути ресурсов

Используйте абсолютные пути от корня сайта:

<link rel="stylesheet" href="/design/my-design/css/style.css">
<script src="/design/my-design/js/main.js" defer></script>
<img src="/design/my-design/images/logo.svg" alt="Название сайта">

Так ресурсы работают и на вложенных URL вроде /en/services/item.html.

Не используйте css/style.css, ../images/logo.png и пути с локального диска разработчика.

3. Замените статические данные системными метками

В <head>:

<title>[#title#]</title>
<meta name="description" content="[#description#]">
<meta name="keywords" content="[#keywords#]">

В логотипе и ссылках от языкового корня:

<a href="[#home_link#]">Главная</a>

[#home_link#] возвращает URL главной страницы текущего языка. Не дописывайте к нему имя другой страницы: для внутренних переходов используйте поле типа «Внутренняя ссылка», которое возвращает готовый языковой URL.

4. Разметьте функциональные позиции

Пример:

<body>
    <header>
        [#menu_top#]
        [#lang_menu#]
    </header>

    [#slider_home#]

    <main>
        [#breadcrumbs_main#]
        <h1>[#H1#]</h1>
        [#content#]
        [#services#]
        [#contact_banner#]
    </main>

    <footer>
        [#footer_links#]
        [#social_footer#]
    </footer>
</body>

Имена описывают позицию, а не тип модуля. Метку services можно связать с повторяющимся блоком, а contact_banner — с блоком контента.

5. Подключите дизайн в настройках

Откройте «Настройки → Общие настройки».
В поле каталога дизайна выберите design/my-design.
Сохраните настройки.
Перейдите в «Структура сайта».
Для главной и внутренних страниц назначьте соответствующие HTML-файлы.

Каталог выбирается только внутри design; произвольный путь к системным файлам указать нельзя.

6. Создайте экземпляры модулей

Пример набора:

Экземпляр	Модуль	Метка
Главное меню	Меню	`menu_top`
Мобильное меню	Меню	`menu_mobile`
Слайдер главной	Слайдер	`slider_home`
Хлебные крошки	Дорога	`breadcrumbs_main`
Услуги	Повторяющиеся блоки	`services`
Контактный баннер	Блоки контента	`contact_banner`
Соцсети в подвале	Социальные кнопки	`social_footer`

Давайте экземплярам понятные названия. Технический ID менять для оформления не требуется.

7. Создайте шаблоны модулей

Шаблон каждого модуля храните только в его каталоге:

modules/menu/templates/my-design/top.html
modules/menu/templates/my-design/mobile.html
modules/slider/templates/my-design/home.html
modules/breadcrumbs/templates/my-design/default.html
modules/content_blocks/templates/my-design/contact-banner.html
modules/repeating_blocks/templates/my-design/services.html
modules/social_buttons/templates/my-design/footer.html

Каталог my-design здесь — удобная группировка, а не обязательное имя.

Пример повторяющегося блока

<!-- @wrapper -->
<div class="services-grid">%items%</div>

<!-- @item -->
<article class="service-card">
    <img src="%image%" alt="%title%">
    <h2>%title%</h2>
    <p>%description%</p>
    <a href="%link%">%button%</a>
</article>

Пример блока контента

<section class="contact-banner">
    <img src="%image%" alt="%title%">
    <div>
        <h2>%title%</h2>
        <p>%text%</p>
        <a href="%link%">%button%</a>
    </div>
</section>

Ключи %image%, %title% и другие должны совпадать с ключами полей выбранного блока.

8. Привяжите метки страниц

Откройте страницу в структуре. CMS просканирует её эффективный шаблон и покажет найденные метки. Для каждой позиции выберите текстовый редактор или экземпляр модуля.

Общие позиции удобно привязать на главной/родительской странице и наследовать:

меню;
языковое меню;
подвал;
соцсети;
общие контактные блоки.

Уникальный контент переопределяйте на конкретной странице.

9. Настройте адаптивность

CMS не изменяет CSS дизайна. Проверьте:

desktop, tablet и mobile;
раскрытие мобильного меню;
ширину слайдера и галереи;
длинные заголовки на всех языках;
изображения без заданного перевода;
клавиатурную навигацию;
alt, labels форм и контрастность.

10. Проверьте URL

Проверьте оба типа ссылок:

ссылки, сформированные CMS — меню, хлебные крошки, языковое меню;
ссылки из полей блоков — задавайте типом «Внутренняя ссылка» и выводите как %link%; CMS сама добавит язык и SEO-формат URL.

Никогда не склеивайте index.html и имя страницы вручную. Языковой корень уже оканчивается /.

11. Контрольный список приёмки

Все HTML-файлы видны в разделе шаблонов сайта.
В исходном HTML страницы нет необработанных [#...#].
В HTML модулей нет необработанных %...%.
CSS, JS, шрифты и изображения возвращают HTTP 200.
Все языки имеют корректные title, H1 и меню.
Вложенные и короткие URL проверены в выбранном SEO-режиме.
Страница 404 возвращает HTTP 404.
На мобильном экране нет горизонтальной прокрутки.
Перед публикацией создан полный переносимый архив.

Частые ошибки

Ресурс работает на главной, но не на внутренней странице

Причина — относительный путь. Используйте /design/my-design/....

Метка видна как текст

Проверьте синтаксис [#name#], допустимое имя и привязку в редакторе страницы.

Модуль пустой

Проверьте активность экземпляра, данные текущего языка, выбранный шаблон и совпадение ключей %field%.

Изображение отсутствует на одном языке

Задайте изображение во вкладке языка по умолчанию. Если локальная версия не заполнена, CMS использует fallback.

Шаблон оказался не в том модуле

Переместите или создайте его в modules/<нужный-модуль>/templates. Списки намеренно изолированы.