← ДокументаціяРекомендована структура
У design/my-design/ створіть окремі index.html, inner.html, contact.html і 404.html, а ресурси розкладіть у css/, js/, images/ та fonts/. Не змішуйте цю папку з іншими проєктами чи демонстраційною темою. Для CSS, скриптів і зображень використовуйте адреси від кореня сайту: /design/my-design/css/style.css, /design/my-design/js/main.js, /design/my-design/images/logo.svg. Шляхи css/style.css, ../images/logo.png та адреси з диска розробника зламаються на вкладених URL на зразок /en/services/item.html.
Заміна статичного HTML
У head поставте [#title#], [#description#] і, за потреби, [#keywords#]. Посилання логотипа може вести на [#home_link#], що вже повертає готовий корінь поточної мови. Не додавайте до нього назву іншої сторінки: для внутрішнього переходу виберіть тип поля «Внутрішнє посилання». У шапці зазвичай стоять [#menu_top#] і [#lang_menu#], перед основним вмістом — [#breadcrumbs_main#] та [#H1#], далі [#content#], [#services#] чи [#contact_banner#], а в підвалі — [#footer_links#] і [#social_footer#]. Назва мітки описує позицію, а не жорстко задає тип модуля.
Активація й екземпляри
У «Налаштування → Загальні налаштування» оберіть design/my-design, збережіть, потім призначте HTML-файли головній та внутрішнім сторінкам у структурі. Система дозволяє вибирати каталог лише всередині design. Створіть окремі екземпляри: головне та мобільне меню для menu_top/menu_mobile, слайдер для slider_home, крихти для breadcrumbs_main, повторювані «Послуги» для services, контентний контактний банер для contact_banner і соціальні кнопки для social_footer. Давайте їм зрозумілі назви; технічний ID для оформлення змінювати не потрібно.
Файли модулів залишайте в їхніх власних каталогах, наприклад modules/menu/templates/my-design/top.html, modules/slider/templates/my-design/home.html, modules/repeating_blocks/templates/my-design/services.html та modules/social_buttons/templates/my-design/footer.html. Папка my-design усередині модуля лише групує файли; її назва не є обов'язковою. Шаблон іншого типу не з'явиться в списку вибору.
Розмітка повторюваного блока
Після <!-- @wrapper --> розмістіть контейнер сітки з %items%. Після <!-- @item --> — окремий article або div для кожної картки з %image%, %title%, %description%, %link% і %button%. Для одиночного контактного банера достатньо одного шаблону з %image%, %title%, %text%, %link% та %button%. Ключі змінних повинні відповідати полям вибраного блока. Якщо елемент не має окремого контейнера, його частини можуть роз'їхатися по різних клітинках CSS Grid.
Прив'язка, адаптивність і приймання
Відкрийте сторінку в структурі: CMS просканує ефективний шаблон і покаже мітки. Для кожної виберіть редактор або екземпляр модуля. Спільні меню, підвал і соціальні кнопки зручно прив'язати на батьківській сторінці та успадковувати; унікальний вміст перевизначати на дочірній. CMS не переписує CSS: окремо перевірте desktop/tablet/mobile, мобільне меню, слайдер і галерею, довгі заголовки всіма мовами, клавіатуру, alt, labels форм і контрастність.
Посилання, сформовані CMS у меню, крихтах і перемикачі мов, та посилання в блоках потрібно перевіряти окремо. Для останніх використовуйте «Внутрішнє посилання» й змінну %link%: CMS сама врахує мову та SEO-режим. Не склеюйте index.html з іменем сторінки вручну. Перед прийманням перевірте відсутність нерозпізнаних [#...#] і %...%, HTTP 200 для ресурсів, title/H1/меню всіх мов, URL обраного режиму, HTTP 404 для відсутньої сторінки й відсутність горизонтального прокручування на телефоні. Створіть переносимий архів.
Цей маршрут допомагає під'єднати готову HTML-верстку до FoxCoreCMS без переписування ядра.
1. Підготуйте дизайн
Створіть окремий каталог design/<назва>/ і покладіть туди HTML-шаблони та ресурси. Не редагуйте інший активний дизайн під час підготовки. Виправте шляхи до CSS, JavaScript, шрифтів і зображень так, щоб вони працювали на вкладених адресах, а не лише на головній.
2. Замініть статичні дані
Винесіть назву, SEO-поля, H1, мову, навігацію та вміст у системні мітки. Пошук, форми, меню, блог, галерею й повторювані секції підключайте через відповідні модулі. Для кожної позиції визначте одну мітку сторінки та потрібний екземпляр модуля. Мітки сторінки мають вигляд [#name#], змінні у файловому шаблоні модуля — %name%.
3. Налаштуйте модулі
Увімкніть дизайн у налаштуваннях, створіть екземпляри потрібних модулів і призначте їм файли з modules/<id>/templates/. Для повторюваного блоку використовуйте секції @wrapper і @item; в обгортці розмістіть %items%. Для одиночного блоку використовуйте іменовані поля. Прив'яжіть екземпляри до сторінок і заповніть мовні вкладки.
4. Перевірте результат
Перевірте адаптивність, внутрішні URL, активні стани меню, зображення, форми, пагінацію, всі мовні версії, SEO та сторінку 404. Публічний HTML не повинен містити нерозпізнаних міток. Якщо модуль порожній, перевірте його активність, шаблон, дані та прив'язку. Якщо зображення відсутнє тільки однією мовою, перевірте мовні поля та спільний файл. Якщо ресурс працює тільки на головній, виправте відносний шлях.
Після приймання дизайну очистьте кеш і повторно перевірте важливі сторінки як звичайний відвідувач.