Гибкая архитектура сайтов на Craft CMS для сложных проектов

Отметим: когда структура данных сложнее, чем блог с новостями — товарный каталог с многомерными характеристиками, мультиязычность, различные типы контента — стандартные CMS заканчиваются. Craft CMS решает такие задачи на уровне архитектуры, а не плагинов. Мы разрабатываем сайты на Craft CMS много лет, и кастомный каталог для нас — рутина.

Craft CMS — PHP/Yii-based CMS с кодом на GitHub, работающая на MySQL или PostgreSQL. Отличается гибкой системой полей, мощным шаблонизатором Twig, встроенными мультисайтовостью и локализацией. Занимает нишу между WordPress (слишком ограниченным для сложных структур) и полностью кастомными решениями — и в этой нише он лучше какого-либо другого решения в 80% случаев.

Особенности Craft CMS для кастомного каталога

Matrix Fields — блоки контента произвольной структуры внутри поля, аналог WordPress Gutenberg, но с кодом, а не UI-конструктором. Позволяет строить page builder без плагинов. Сравните: в WordPress вам потребуется ACF + связка плагинов, в Craft это нативная возможность.

Sections — три типа: Channel (блог, новости), Structure (иерархия страниц), Single (одиночные страницы). Каждый Section имеет свои Entry Types с разными наборами полей.

Relations — нативные двусторонние связи между Entry любых типов. Live Preview — редактор видит изменения в реальном времени в iframe с реальной страницей сайта.

В типовом проекте мы проектируем Content Model на первом этапе. Модель включает структуру разделов и их поля. Например, для корпоративного сайта:

Sections:
├── Homepage (Single)
│   └── Entry Type: homepage
│       └── Fields: hero (Matrix), about (Matrix), stats (Table)
├── Services (Structure)
│   └── Entry Type: service
│       └── Fields: intro (Text), features (Matrix), cta (Object)
├── Blog (Channel)
│   ├── Entry Type: article
│   │   └── Fields: body (Matrix), author (Users), tags (Tags)
│   └── Entry Type: video
│       └── Fields: videoUrl (URL), transcript (Redactor)
└── Team (Channel)
    └── Entry Type: teamMember
        └── Fields: role (Text), bio (Redactor), photo (Assets)

Ускорение разработки с Matrix Fields

Matrix Field содержит блоки разных типов. Пример поля pageContent с пятью типами блоков позволяет гибко конструировать страницы без лишнего кода. В Twig-шаблоне блоки обрабатываются через switch, что даёт полный контроль над версткой:

{% for block in entry.pageContent.all() %}
    {% switch block.type %}
        {% case "richText" %}
            <div class="prose">{{ block.body }}</div>
        {% case "imageBlock" %}
            <figure class="image-block align-{{ block.alignment }}">
                {% set image = block.image.one() %}
                {% if image %}
                    <img src="{{ image.getUrl('large') }}" alt="{{ image.alt }}" width="{{ image.width }}" height="{{ image.height }}">
                    {% if block.caption %}
                        <figcaption>{{ block.caption }}</figcaption>
                    {% endif %}
                {% endif %}
            </figure>
        {% case "cta" %}
            <div class="cta-block">
                <h3>{{ block.title }}</h3>
                <p>{{ block.text }}</p>
                <a href="{{ block.buttonUrl }}" class="btn">{{ block.buttonLabel }}</a>
            </div>
        {% case "gallery" %}
            <div class="gallery cols-{{ block.columns }}">
                {% for image in block.images.all() %}
                    <img src="{{ image.getUrl('medium') }}" alt="{{ image.alt }}">
                {% endfor %}
            </div>
    {% endswitch %}
{% endfor %}

Как GraphQL расширяет возможности Craft CMS?

Craft CMS предоставляет встроенный GraphQL API, что позволяет гибко управлять контентом из внешних систем. Например, вы можете запрашивать только нужные поля, использовать фрагменты и объединять данные из разных секций. Это особенно полезно для JAMstack-архитектур и мобильных приложений. API поддерживает авторизацию и кэширование, делая его production-ready. Enterprise-проекты часто используют GraphQL для интеграции с headless frontends.

Что такое Eager Loading и почему это важно?

Twig-шаблоны используют ElementQuery для фильтрации и пагинации. Пример вывода последних постов:

{# Последние посты с пагинацией #}
{% set query = craft.entries()
    .section('blog')
    .type('article')
    .status('live')
    .orderBy('postDate desc')
    .limit(12) %}
{% set totalPosts = query.count() %}
{% set posts = query.offset(pageInfo.offset).all() %}
{% for post in posts %}
    {% include '_components/post-card' with { post: post } %}
{% endfor %}
{% if pageInfo.totalPages > 1 %}
    {% include '_components/pagination' %}
{% endif %}

Для производительности используйте Eager Loading (with) чтобы избежать N+1 запросов, которые увеличивают нагрузку на сервер до 5 раз на страницу. На одном проекте мы сократили время генерации страницы с 2.3 с до 0.4 с, применив with для связанных авторов и изображений.

Преобразования изображений

Craft использует Named Transforms для генерации оптимизированных копий изображений. Можно задать формат WebP, качество 85% и несколько размеров для адаптивных картинок. Например, для hero-изображения мы используем три размера: 800w, 1600w и 2400w с crop-режимом. Это снижает объём передаваемых данных на 30–50%.

{# Трансформации — Named Transforms или inline #}
{% set transform = { width: 1200, height: 630, mode: 'crop', position: 'center-center', format: 'webp', quality: 85 } %}
<picture>
    <source srcset="{{ entry.heroImage.one().getUrl({ width: 800, format: 'webp' }) }} 800w, {{ entry.heroImage.one().getUrl({ width: 1600, format: 'webp' }) }} 1600w" type="image/webp">
    <img src="{{ entry.heroImage.one().getUrl(transform) }}" alt="{{ entry.heroImage.one().alt }}" loading="lazy">
</picture>

Плагины экосистемы

Типичные ошибки при работе с Craft CMS

• N+1 запросы в цикле Twig — используйте with для Eager Loading.
• Неправильные права доступа к папке storage — настройте chmod сразу после установки.
• Игнорирование кэширования: Blitz или Redis обязательны для продакшена.
• Избыточная сложность Matrix-полей — проектируйте Content Model с учётом реальных потребностей.

Процесс работы над проектом

1. Аудит контента и проектирование Content Model — определяем типы контента, поля, связи. Создаём маппинг.
2. Настройка Craft и структуры — установка, создание секций, entry types, матричных полей.
3. Разработка Twig-шаблонов — вёрстка blocks, layouts, partials. Оптимизация запросов.
4. Интеграция плагинов — SEO, кэширование, формы, импорт.
5. Тестирование и деплой — проверка на staging, выкатка на production.

Что входит в результаты

• Документация по Content Model и инструкция для редакторов
• Доступы к админке и репозиторию
• Обучение команды (2-3 часа)
• Гарантия на код и поддержка 30 дней

Сроки разработки

Оценим ваш проект за 1 день — свяжитесь с нами для консультации по внедрению Craft CMS. Закажите разработку под ключ с гарантией качества. Получите индивидуальный расчёт стоимости и сроков.