Skip to Content
Разработка шаблоновСтруктура темы

Структура темы

Тема — это набор файлов, определяющих внешний вид сайта: стили (SCSS), шаблоны (Blade), скрипты (JS). Темы располагаются в папке app/Themes/.

Полная структура

    • theme.json
    • colors.json
        • app.scss

Минимальная тема

Если нужно только изменить цвета, достаточно минимального набора файлов:

    • theme.json
          • _variables.scss

Всё остальное автоматически берётся из standard благодаря наследованию.

Конфигурация theme.json

Базовая конфигурация

{
    "name": "My Theme",
    "version": "1.0.0",
    "author": "Your Name",
    "description": "Описание темы",
    "extends": "standard"
}

Расширенная конфигурация

{
    "name": "My Theme",
    "version": "1.0.0",
    "author": "Your Name",
    "description": "Тема с кастомизацией",
    "extends": "standard",
    
    "settings": {
        "show_sidebar": {
            "name": "Показывать сайдбар",
            "description": "Включить боковую панель",
            "value": true
        }
    },
    
    "layout_arguments": {
        "containerWidth": "1400px"
    },
    
    "replacements": {
        "shop::pages.catalog": "mytheme::shop.catalog"
    }
}

Параметры theme.json

ПараметрОписание
nameОтображаемое имя темы
versionВерсия (semver)
authorАвтор
descriptionОписание
extendsРодительская тема для наследования
settingsНастройки, доступные в админке
layout_argumentsПеременные, доступные во всех шаблонах
replacementsЗамена шаблонов модулей

Подключение SCSS и JS

SCSS

Главный файл assets/sass/app.scss автоматически компилируется и подключается. Используйте директиву @at для подключения в шаблонах:

@at(tt('assets/sass/app.scss'))

Функция tt() возвращает путь к текущей теме.

JavaScript

Файл assets/scripts/app.js подключается автоматически:

@at(tt('assets/scripts/app.js'))

На конкретной странице

@push('styles')
    @at('Modules/Shop/Resources/assets/scss/shop.scss')
@endpush
 
@push('scripts')
    @at('Modules/Shop/Resources/assets/js/shop.js')
@endpush

Что можно переопределять

Что изменитьКакой файл создать
Цвета и переменныеassets/sass/theme/_variables.scss
Любой компонентviews/components/{name}.blade.php
Headerviews/layouts/header.blade.php
Footerviews/layouts/footer.blade.php
Весь макетviews/layouts/app.blade.php
Стили кнопокassets/sass/components/_buttons.scss
Стили любого элементаassets/sass/app.scss
JavaScriptassets/scripts/app.js

При переопределении файла система сначала ищет его в вашей теме, затем в родительской, и только потом в стандартной теме.

Файл colors.json

Опциональный файл для редактора страниц в админке:

{
    "light": {
        "--background": "#ffffff",
        "--secondary": "#f8fafc",
        "--accent": "#007aff",
        "--text": "#1a1a2e"
    },
    "dark": {
        "--background": "#121212",
        "--secondary": "#1e1e1e",
        "--accent": "#0a84ff",
        "--text": "#e0e0e0"
    }
}

Отладка

После изменений в теме может потребоваться очистка кеша:

php flute template:cache:clear
php flute cache:clear

В режиме разработки SCSS перекомпилируется автоматически при изменении файлов.

ВведениеCSS переменные