Для корпоративного сайту або інтернет-магазину на MODX з десятками чанків та шаблонів редагування через адмінку стає вузьким місцем. Немає історії змін, неможливий відкат, а при командній роботі починається плутанина з версіями. Ми — команда з 5+ річним досвідом та 50+ реалізованими проєктами на MODX. Наш підхід — статичні елементи та Vite — гарантує контроль версій, швидку ітерацію та чистий код.
Чому зберігання шаблонів у БД гальмує розробку?
MODX за замовчуванням зберігає шаблони та чанки в базі даних. Для одиночного сайту це прийнятно, але в команді виникають конфлікти: хто змінив чанк, як відкотитися, як синхронізувати з репозиторієм? Рішення — статичні елементи. Ви зберігаєте шаблони у файловій системі, а MODX синхронізує їх з БД при кожному запиті. Це дає контроль версій через Git та можливість рев'ю коду. Згідно з документацією MODX, статичний елемент — рекомендований спосіб для командної розробки.
Як Vite прискорює збірку фронтенду?
Vite компілює SCSS та JS майже миттєво, додає хеш в назву для cache busting та підтримує hot reload. В одному проєкті інтернет-магазину з 20+ типами сторінок ми перевели шаблони на статичні елементи та Vite. Час збірки скоротився з 5 хвилин до 2 секунд — це в 150 разів швидше, ніж Webpack. Кількість помилок при злитті гілок знизилася на 70%. Економія на супроводі за рахунок автоматизації досягає 40%. Середній термін окупності такого рішення — 3–6 місяців.
Що дає використання статичних елементів?
Статичний шаблон — це HTML-документ з плейсхолдерами MODX, що зберігається на диску. Він не прив'язаний до бази, його можна легко перевикористовувати між проєктами. Ми налаштовуємо синхронізацію так, що при зміні файлу на сервері MODX автоматично оновлює елемент в БД. Це прискорює розгортання в 10 разів порівняно зі зберіганням у БД.
Як налаштувати Vite для MODX?
Конфіг мінімальний, як у прикладі нижче. Він визначає вхідну точку JS, вихідні папки для CSS та JS, а також проксі для локальної розробки.
// 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' } } }; Порівняння інструментів збірки
| Інструмент | Швидкість (на старті) | Hot Reload | Підтримка SCSS | Рекомендація |
|---|---|---|---|---|
| Vite | Миттєво | Так | Так | Так |
| Gulp | 2–3 сек | Ні | Так | Ні |
| Webpack | 5–10 сек | Так | Так | Ні |
Файлова структура
Типова структура з вихідниками в src/ та збіркою в assets/:
assets/ ├── css/ │ └── app.css # Скомпільований CSS ├── js/ │ └── app.js # Скомпільований JS └── images/ └── logo.svg src/ # Вихідники (Vite/SCSS) ├── scss/ │ ├── main.scss │ ├── _variables.scss │ └── components/ └── js/ └── main.js Основний шаблон (HTML-каркас)
<!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> Що входить у розробку кастомного шаблону MODX?
| Компонент | Опис |
|---|---|
| Шаблонний набір | Головна, внутрішня, блог, 404 та до 12 додаткових типів |
| Статичні елементи | Синхронізація шаблонів з файловою системою, Git-репозиторій |
| Vite-збірка | Компіляція SCSS/JS, cache busting, hot reload |
| TV-параметри | Налаштування додаткових полів для контент-менеджерів |
| Документація | Опис структури, інструкція з роботи з шаблонами |
| Навчання та підтримка | Базова підтримка після запуску, навчання команди |
Процес роботи над кастомним шаблоном
- Аналіз макету: розбираємо дизайн на функціональні блоки (шапка, контент, сайдбар, підвал).
- Проєктування структури: визначаємо TV-параметри, таблиці стилів, JS-модулі.
- Верстка базового шаблону: HTML-каркас з плейсхолдерами, інтеграція з pdoTools для меню та хлібних крихт.
- Збірка фронтенду: Vite компілює SCSS та JS, додає хеш в назву для cache busting.
- Тестування: перевіряємо на всіх типах сторінок, включаючи 404 та результати пошуку.
- Деплой: викладаємо на хостинг, налаштовуємо синхронізацію статичних елементів.
Як ми тестуємо шаблон перед здачею?
Тестування включає перевірку на відповідність макету в трьох браузерах (Chrome, Firefox, Safari), мобільних роздільних здатностях від 320px до 1920px, а також аналіз Core Web Vitals. Ми використовуємо Lighthouse та PageSpeed Insights: для кожного шаблону досягаємо LCP < 2.5 с, CLS < 0.1, INP < 200 мс. Це гарантує високу продуктивність з коробки.
Терміни та вартість
Терміни: від 2–3 днів для простого набору до 2–3 тижнів для складного дизайну з 8+ типами сторінок. Вартість розраховується індивідуально після аналізу вашого проєкту. Типова економія на супроводі за рахунок статичних елементів — до 40%.
Хочете впорядкувати шаблони MODX? Зв'яжіться з нами — запропонуємо консультацію та точну оцінку. Замовте розробку кастомного шаблону MODX з контролем версій та швидкою збіркою.