Skip to Content
Разработка шаблоновВведение

Разработка тем для Flute CMS

Темы определяют внешний вид сайта: стили (SCSS), шаблоны (Blade), скрипты (JavaScript). Flute CMS поддерживает наследование тем — можно создать свою тему на базе стандартной и переопределить только нужные части.

Быстрый старт

Создайте папку темы

app/Themes/mytheme/

Создайте theme.json

{
    "name": "My Theme",
    "version": "1.0.0",
    "author": "Your Name",
    "description": "Моя тема на базе standard",
    "extends": "standard"
}

Параметр extends: "standard" означает, что все файлы, которых нет в вашей теме, будут автоматически браться из стандартной темы.

Добавьте свои изменения

Например, чтобы изменить цвет акцента, создайте файл assets/sass/theme/_variables.scss:

:root[data-theme=light] {
    --accent: #6366f1;
}
 
:root[data-theme=dark] {
    --accent: #818cf8;
}

Активируйте тему

В админ-панели: Настройки → Темы → Выбрать тему → Активировать

Минимальная тема может состоять всего из двух файлов: theme.json и _variables.scss. Всё остальное автоматически берётся из родительской темы.

Что можно кастомизировать

Что изменитьКакой файл создать
Цвета и переменные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
JavaScriptassets/scripts/app.js

Разделы документации

Структура темыCSS переменныеSCSS системаBlade компонентыМакетыJavaScriptНаследование темСоздание темы

Очистка кеша

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

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

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

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