Разработка кастомного шаблона 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="ru">
<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 недели.