Розробка кастомної теми October CMS
Теми October CMS — це набір .htm-файлів з PHP/Twig-розміткою. Кожен файл містить ini-секцію з метаданими, PHP-код компонентів та HTML-шаблон. Вёрстка повністю під контролем розробника.
Структура теми
themes/mytheme/
├── theme.yaml # метадані теми
├── layouts/
│ ├── default.htm # базовий layout
│ └── minimal.htm # для LP
├── pages/
│ ├── index.htm # головна сторінка
│ ├── about.htm
│ ├── blog.htm
│ └── blog-post.htm
├── partials/
│ ├── header.htm
│ ├── footer.htm
│ ├── nav.htm
│ ├── blog/
│ │ ├── post-card.htm
│ │ └── post-list.htm
│ └── forms/
│ └── contact.htm
└── assets/
├── css/
├── js/
└── images/
# theme.yaml
name: My Theme
description: Corporate theme for My Site
author: My Company
homepage: https://mycompany.com
code: mytheme
form:
fields:
primary_color:
label: Primary Color
type: colorpicker
default: '#1a56db'
logo:
label: Site Logo
type: mediafinder
mode: image
Layout файл
description = "Default Layout"
==
<!DOCTYPE html>
<html lang="{{ this.site.locale ?? 'uk' }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
{% if this.page.meta_title %}
{{ this.page.meta_title }} | {{ this.site.name }}
{% else %}
{{ this.page.title }} | {{ this.site.name }}
{% endif %}
</title>
<meta name="description" content="{{ this.page.meta_description }}">
{% styles %}
<link rel="stylesheet" href="{{ 'assets/css/app.css' | theme }}">
</head>
<body class="{{ this.page.layout_class }}">
{% partial 'header' %}
<main id="main">
{% page %}
</main>
{% partial 'footer' %}
{% scripts %}
<script src="{{ 'assets/js/app.js' | theme }}" defer></script>
</body>
</html>
Сторінка з компонентами
title = "Блог"
url = "/blog/:page?"
layout = "default"
is_hidden = 0
[blogPosts]
postsPerPage = 12
sortOrder = "published_at desc"
[blogCategories]
slug = "{{ :slug }}"
==
{% set currentPage = this.param.page ?? 1 %}
<section class="blog-header">
<h1>{{ this.page.title }}</h1>
</section>
<section class="blog-content">
<div class="posts-grid">
{% for post in blogPosts %}
{% partial 'blog/post-card' post=post %}
{% endfor %}
</div>
<aside class="sidebar">
<h3>Категорії</h3>
<ul>
{% for cat in blogCategories %}
<li><a href="{{ cat.url }}">{{ cat.name }} ({{ cat.posts_count }})</a></li>
{% endfor %}
</ul>
</aside>
</section>
Інтеграція Vite
npm install vite laravel-vite-plugin
// vite.config.ts
import { defineConfig } from 'vite';
import { octobercmsTheme } from 'vite-plugin-october-cms-theme';
export default defineConfig({
plugins: [
octobercmsTheme({ themePath: 'themes/mytheme' }),
],
build: {
outDir: 'themes/mytheme/assets/build',
manifest: true,
},
});
Параметри теми у шаблоні
Поля з theme.yaml доступні через this.theme:
<style>
:root {
--color-primary: {{ this.theme.primary_color ?? '#1a56db' }};
}
</style>
{% if this.theme.logo %}
<img src="{{ this.theme.logo }}" alt="{{ site.name }}">
{% else %}
<span class="text-logo">{{ site.name }}</span>
{% endif %}
Розробка теми корпоративного сайту займає 5–10 робочих днів.