Отметим: когда дизайн-макет не вписывается в стандартную сетку Drupal, а клиент настаивает на pixel-perfect вёрстке — кастомная тема становится единственным выходом. Мы не натягиваем Bootstrap на Drupal, а перекладываем макет в Twig-шаблоны так, чтобы каждый блок дышит именно так, как задумано. За 5 лет на рынке и 30+ проектов на Drupal мы научились выжимать максимум из производительности: на одном лендинге для конференции удалось сократить LCP с 3,2 до 1,1 сек, убрав все неиспользуемые скрипты и заменив jQuery на vanilla JS. Это привело к снижению TTFB на 200 мс и сокращению HTTP-запросов с 45 до 12. Дополнительно мы уделяем внимание accessibility: добавляем ARIA-роли и атрибуты, что улучшает UX и SEO.
Почему кастомная тема Drupal быстрее готовой?
Разница в подходе: вместо монолитной библиотеки мы собираем только необходимые компоненты. Сравните: кастомная тема загружается на 40% быстрее готовой темы с кучей лишних модулей. Экономия бюджета на переделку достигает 30%, а затраты на обслуживание снижаются на 20% за счёт отсутствия неиспользуемого кода.
Как избежать bundle bloat при разработке темы?
Первое, что мы делаем — анализируем дизайн и режем его на компоненты: шапка, подвал, сетка контента, карточки. Для каждого компонента создаём отдельный Twig-шаблон и подключаем только нужные CSS/JS через библиотеки. Это исключает bundle bloat — в отличие от готовых тем, где сплошь и рядом тянутся неиспользуемые стили.
Что даёт правильная декомпозиция шаблонов?
Каждый компонент живёт в своём файле: block--system-branding-block.html.twig, node--article--full.html.twig, field--field-image.html.twig. Это позволяет переопределять шаблоны точечно, не затрагивая остальные страницы. В результате мы получаем чистую иерархию, которую легко поддерживать, и избегаем конфликтов при обновлении ядра Drupal. Правильное именование шаблонов — залог масштабируемости, как рекомендовано в Drupal Twig documentation.
Что входит в разработку кастомной темы
| Этап | Что делаем | Результат |
|---|---|---|
| 1. Аналитика | Изучаем дизайн-макет, режем на компоненты, подбираем шрифты и цвета | Декомпозиция макета с указанием всех состояний |
| 2. Прототипирование | Создаём info.yml, libraries.yml, базовые Twig-шаблоны страниц | Структура темы готова к интеграции |
| 3. Вёрстка компонентов | Верстаем каждый компонент: шаблон + CSS + JS | Pixel-perfect компоненты для всех типов контента |
| 4. Интеграция | Подключаем реальные данные, настраиваем поля, изображения, блоки | Тема работает с реальным контентом |
| 5. Performance-оптимизация | Настраиваем image styles, lazy load, минифицируем ресурсы | Core Web Vitals в зелёной зоне |
| 6. Тестирование | Проверяем адаптивность, кроссбраузерность, скорость | Протокол тестов |
| 7. Деплой и документация | Выгружаем тему, описываем структуру, передаём доступы и обучение | Готовая тема + инструкция для редакторов |
Пример структуры темы
web/themes/custom/my_theme/ ├── my_theme.info.yml ├── my_theme.libraries.yml ├── my_theme.theme ├── config/ │ └── install/ ├── css/ │ └── components/ ├── js/ ├── images/ ├── templates/ │ ├── layout/ │ │ ├── html.html.twig │ │ └── page.html.twig │ ├── content/ │ │ ├── node.html.twig │ │ └── node--article--full.html.twig │ └── field/ └── screenshot.png Библиотеки CSS/JS
# my_theme.libraries.yml global: version: VERSION css: base: css/base.css: {} layout: css/layout.css: {} js: js/main.js: { defer: true } dependencies: - core/drupal - core/once slider: version: VERSION css: component: css/components/slider.css: {} js: js/slider.js: {} dependencies: - core/once Подключаем библиотеку только там, где она нужна — через attach_library('my_theme/slider') в шаблоне. Это снижает объём загружаемого JS на 30%. А для изображений используем native lazy loading через атрибут loading="lazy" (подробнее на MDN).
Пример Twig-шаблона статьи
{# node--article--full.html.twig #} <article{{ attributes.addClass('article', 'article--full') }}> {% if label %} <h1{{ title_attributes.addClass('article__title') }}>{{ label }}</h1> {% endif %} <div class="article__meta"> {% if display_submitted %} <span class="article__author">{{ author_name }}</span> <time class="article__date" datetime="{{ date.attributes.datetime }}">{{ date }}</time> {% endif %} </div> {{ content|without('links') }} </article> Процесс работы и сроки
Мы работаем в несколько итераций: после каждого этапа показываем промежуточный результат. Сроки зависят от сложности:
| Уровень сложности | Срок | Что входит |
|---|---|---|
| Базовая тема | 5–8 дней | Шаблоны статей и страниц, адаптивная вёрстка, библиотеки |
| С анимациями и кастомными блоками | 10–15 дней | Slider, lightbox, responsive images, кастомные блоки |
| Комплексная тема | от 20 дней | Кастомная админка, несколько view modes, сложная JS-логика |
Оценку даём после анализа макета. Оставьте заявку — мы пришлём коммерческое предложение в течение дня.
Типичные ошибки при разработке кастомных тем
- Игнорирование иерархии шаблонов — если не использовать специфичные имена, Drupal будет рендерить общие шаблоны, и кастомные блоки не отобразятся.
- Перегрузка глобальной библиотеки — все скрипты и стили на всех страницах. Правильно: только critical CSS глобально, остальное — асинхронно или по требованию.
- Забыть про image styles — без них изображения грузятся в оригинальном размере, убивая LCP и CLS.
- Не использовать Twig debug mode — без включения
development.services.ymlсложно найти нужный шаблон для переопределения.
Иерархия Twig-шаблонов Drupal
Drupal использует соглашение об именовании шаблонов: чем специфичнее имя файла (например, node--article--full.html.twig), тем выше приоритет. Это позволяет переопределять шаблоны для отдельных типов контента или режимов отображения, не затрагивая остальные.
Мы гарантируем, что кастомная тема пройдёт проверку Core Web Vitals на зелёную зону. Опыт 30+ проектов подтверждает: правильный Twig и минимум зависимостей дают скорость на уровне статики. Получите консультацию — расскажем, как реализовать ваш проект.