Розробка користувацького шаблону MODX
Шаблон MODX — HTML-документ з плейсхолдерами MODX. Немає обов'язкової структури, немає навязаних класів. Повний контроль над розміткою — одна з головних переваг MODX для розробників.
Структура файлів проекту
assets/
├── css/
│ └── app.css # Скомпільований CSS
├── js/
│ └── app.js # Скомпільований JS
└── images/
└── logo.svg
src/ # Исходники (Vite/SCSS)
├── scss/
│ ├── main.scss
│ ├── _variables.scss
│ └── components/
└── js/
└── main.js
MODX зберігає шаблони в БД (через Менеджер), чанки — теж у БД. Для версіонування використовуйте FileBasedOverrides або StaticElements — зберігання шаблонів у файловій системі із синхронізацією в БД.
Основний шаблон
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[[*longtitle:default=`[[*pagetitle]]`]] — [[++site_name]]</title>
<meta name="description" content="[[*description:notempty=`[[*description]]`:default=`[[++site_tagline]]`]]">
[[++seo_canonical]]
<link rel="stylesheet" href="[[++assets_url]]css/app.css?v=[[++build_version]]">
<link rel="icon" href="[[++assets_url]]images/favicon.ico">
</head>
<body class="[[*class_key:is=`modWebLink`:then=`page-link`:else=`page`]]">
[[$header]]
<main id="main" class="site-main">
[[*content]]
</main>
[[$footer]]
<script src="[[++assets_url]]js/app.js?v=[[++build_version]]" defer></script>
[[- Debug: [[++debug:is=`1`:then=`[[!session]]`]] ]]
</body>
</html>
Чанк шапки
[[- @FILE chunks/header.html ]]
<header class="site-header [[+scrolled:isnotempty=`site-header--scrolled`]]">
<div class="container">
<a href="[[++site_url]]" class="site-logo">
<img src="[[++assets_url]]images/logo.svg" alt="[[++site_name]]" width="160" height="40">
</a>
<nav class="site-nav" role="navigation" aria-label="Головне меню">
[[pdoMenu?
&startId=`0`
&level=`2`
&tplOuter=`@INLINE <ul class="nav-list">[[+wrapper]]</ul>`
&tpl=`@INLINE <li class="nav-item [[+classes]]"><a href="[[+link]]" [[+attributes]]>[[+menutitle]]</a>[[+wrapper]]</li>`
&tplInner=`@INLINE <ul class="nav-submenu">[[+wrapper]]</ul>`
&hereClass=`nav-item--active`
&parentClass=`nav-item--parent`
&sortby=`menuindex`
]]
</nav>
<button class="nav-toggle" aria-label="Відкрити меню" aria-expanded="false">
<span></span><span></span><span></span>
</button>
</div>
</header>
Шаблон для різних типів сторінок
Для внутрішніх сторінок — окремий шаблон або умови через TV:
[[- Шаблон inner-page ]]
<div class="page-layout [[*tv.sidebar_position:is=`right`:then=`page-layout--sidebar-right`:else=``]]">
<div class="page-content">
[[*content]]
</div>
[[- Показати сайдбар якщо TV включен ]]
[[*tv.show_sidebar:is=`1`:then=`[[$sidebar]]`]]
</div>
Breadcrumbs через pdoTools
[[$breadcrumbs]]
[[pdoCrumbs?
&tplWrapper=`@INLINE <nav aria-label="Хлебні крошки"><ol class="breadcrumbs">[[+output]]</ol></nav>`
&tpl=`@INLINE <li class="breadcrumb-item"><a href="[[+link]]">[[+menutitle]]</a></li>`
&tplCurrent=`@INLINE <li class="breadcrumb-item breadcrumb-item--current" aria-current="page">[[+menutitle]]</li>`
&tplHome=`@INLINE <li class="breadcrumb-item"><a href="[[+link]]">Головна</a></li>`
]]
Статичні елементи (зберігання шаблонів у файлах)
// У шаблоні MODX:
// Тип: Статичний шаблон
// Файл: [[++base_path]]templates/main.tpl
// Синхронізація всіх елементів у файли:
$modx->runProcessor('element/template/export', [
'id' => $templateId
]);
Плагін StaticElements або FileBasedOverrides автоматизує синхронізацію.
Vite для сборки
// vite.config.js
export default {
build: {
outDir: 'assets',
rollupOptions: {
input: { app: 'src/js/main.js' },
output: {
assetFileNames: 'css/[name].[ext]',
entryFileNames: 'js/[name].js',
chunkFileNames: 'js/[name].js'
}
}
},
server: {
proxy: {
'/': 'http://yourdomain.local'
}
}
};
Терміни
Розробка набору шаблонів (головна + внутрішня сторінка + блог + 404) без дизайну — 2–3 дні. За готовим дизайном з 8–12 типами сторінок — 2–3 тижні.