Оформление
JournalPHP построен на Vue 3 + Tailwind CSS и предоставляет несколько уровней кастомизации — от настроек через Админ-панель до правки исходного кода.
Настройки через Админ-панель
Логотип и идентификация
Общие настройки (/admin-panel/settings/general):
| Параметр | Назначение |
|---|---|
| Название сайта | Отображается в шапке и тайтле страниц |
| Логотип | Основной логотип (светлая тема) |
| Логотип (тёмная тема) | Логотип для тёмной темы |
| Фавикон | Иконка браузерной вкладки |
Файлы сохраняются в storage/app/public/.
Внешний вид публичного сайта
Внешний вид сайта (/admin-panel/settings/appearance):
Настройка CSS-переменных публичной темы для светлого и тёмного режима. Переменные применяются на публичном сайте через resources/css/variables.css.
| Группа | Примеры переменных |
|---|---|
| Бренд | --brand-color, --theme-color-brand-primary, --theme-color-brand-header |
| Сигналы | --theme-color-signal-active-default, --theme-color-signal-positive-default, --theme-color-signal-negative-default |
| Фон и текст | --theme-color-background, --theme-color-background-content, --theme-color-text-primary, --theme-color-text-secondary |
| Прочее | --theme-color-border, --theme-color-button-secondary |
Значения по умолчанию определены в config/appearance.php. Каждую переменную можно сбросить к дефолту из интерфейса админ-панели.
Цветовая схема Админ-панели
Цветовая схема (/admin-panel/settings/theme):
- Переключение между светлой и тёмной темой интерфейса администратора
- Выбор акцентного цвета
Настройки сохраняются в localStorage браузера — не затрагивают публичный сайт.
Cookie-баннер
Cookie-баннер (/admin-panel/settings/cookie-consent) — включение баннера и ссылка на политику cookies.
Кастомизация через код
Frontend (Vue + Tailwind)
Структура фронтенда:
resources/js/
├── Pages/ # Inertia-страницы
├── components/ # Переиспользуемые компоненты
├── Admin/ # Компоненты Админ-панели
├── Shared/ # Общие компоненты
└── editor/ # Интеграция Editor.js
resources/css/
├── app.css # Основные стили (Tailwind)
└── variables.css # CSS-переменные публичной темыTailwind настроен в tailwind.config.js. Для добавления глобальных CSS-переменных или переопределения базовых стилей используйте resources/css/app.css и resources/css/variables.css.
Тёмная тема публичного сайта
Тёмная тема публичного сайта управляется через класс dark на элементе <html> и CSS-переменные из раздела Внешний вид сайта.
Кастомные страницы
Администратор может создавать статические страницы через Страницы (/admin-panel/pages). Страницы доступны по адресу /p/{slug}.
Пересборка фронтенда
После изменений в resources/js/ или resources/css/ пересоберите ассеты:
Разработка (hot reload через Vite):
# Уже работает в контейнере frontend
docker compose logs frontendПродакшен (фронтенд включается в образ при сборке):
docker compose -f docker-compose.prod.yml up -d --buildИли вручную:
docker compose exec frontend npm run buildИзменения в Внешний вид сайта (CSS-переменные в БД) применяются без пересборки frontend.