Back to Main Site

Разработка темы: начало работы

Last updated on Jun 24, 2026 11:41

PolyCMS использует очень гибкий движок тем на основе Blade. Хотя панель администратора представляет собой SPA Vue 3, общедоступный интерфейс по умолчанию опирается на традиционные, сверхбыстрые шаблоны блейдов с серверной визуализацией (SSR) (хотя он также полностью поддерживает интерфейсы, управляемые без интерфейса API).

В этом руководстве рассматривается архитектура темы PolyCMS и способы ее создания с нуля.

1. Структура каталогов

Все темы находятся в каталоге «themes/».

Давайте посмотрим на структуру стандартной темы, такой как базовый план «flexiwhite»:

themes/
└── flexiwhite/
    ├── theme.json           # The Theme Manifest
    ├── screenshot.png       # 800x600 preview image for the Admin panel
    ├── functions.php        # Optional: PHP logic, Hook registration
    ├── resources/
    │   └── views/           # Blade templates
    │       ├── layouts/
    │       │   └── app.blade.php  # The master wrapper
    │       ├── partials/
    │       └── templates/   # Specialized block templates (Landing pages, etc.)
    └── public/              # Compiled CSS/JS and Images

2. Манифест темы (theme.json)

Чтобы зарегистрировать тему в системе, вы должны определить файл theme.json. ThemeManager использует это для идентификации темы и предоставления ее доступных шаблонов пользовательскому интерфейсу администратора.

{
  "name": "FlexiWhite",
  "slug": "flexiwhite",
  "version": "1.0.0",
  "author": "Polyx Team",
  "description": "A clean, whitespace-heavy corporate theme.",
  "role": "main",
  "templates": {
    "posts": {
      "full-width": "Full Width No Sidebar",
      "gallery": "Gallery Focus Layout"
    },
    "pages": {
      "landing": "Marketing Landing Page",
      "contact": "Contact Form Layout"
    }
  }
}

Основные темы и подтемы

Обратите внимание на ключ `"role": "main". PolyCMS реализует Многотемовую архитектуру:

Основные темы (role: main): укажите глобальный макет (app.blade.php) и CSS для всего сайта. Одновременно может быть активен только один.

Подтемы (role: sub): предоставляйте специализированные шаблоны (например, уникальный процесс оформления заказа или целевую страницу Черной пятницы). Вы можете активировать несколько подтем одновременно. Их шаблоны будут переопределять основную тему при назначении конкретным сообщениям или страницам.

3. Основной макет (app.blade.php)

Каждая основная тема должна иметь основной файл макета, расположенный по адресу resources/views/layouts/app.blade.php. Этот файл определяет скелет HTML.

Важнейшие требования. Чтобы модули и плагины могли внедрять необходимые CSS и JavaScript (например, баннер согласия на использование файлов cookie или сценарии Google Analytics), ваш макет должен включать директивы @stack.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- Render SEO Meta Tags dynamically -->
    <title>@yield('meta_title', config('app.name'))</title>
    
    <!-- Include Theme CSS -->
    <link rel="stylesheet" href="{{ theme_asset('css/style.css') }}">
    
    <!-- CRITICAL: Allow modules to inject CSS -->
    @stack('theme-styles')
</head>
<body>
    
    @include('theme::partials.header')

    <main>
        <!-- Render the specific page/post content here -->
        @yield('content')
    </main>

    @include('theme::partials.footer')

    <!-- CRITICAL: Allow modules to inject JS -->
    @stack('theme-scripts')
</body>
</html>

4. Помощник theme_asset()

При ссылке на CSS, JS или изображения, хранящиеся в каталоге public/ вашей темы, всегда используйте вспомогательную функцию theme_asset(), а не стандартную asset() Laravel.

<!-- CORRECT -->
<img src="{{ theme_asset('images/logo.svg') }}" alt="Logo">

<!-- INCORRECT -->
<img src="{{ asset('themes/flexiwhite/public/images/logo.svg') }}" alt="Logo">

theme_asset() автоматически определяет правильный путь на основе текущей активной темы и обрабатывает кеширование.

Следующие шаги

После завершения манифеста и макета вашу тему можно активировать из панели администратора в разделе Внешний вид > Темы.

Чтобы погрузиться глубже, узнайте, как Регистрировать области виджетов или использовать functions.php, чтобы подключиться к Системе перехватчиков.