Розробка сайту на CMS Craft CMS

Розробка вебсайту на CMS Craft CMS

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

Сильні сторони Craft CMS

Matrix Fields — блоки контенту довільної структури в межах поля, аналог WordPress Gutenberg, але з кодом, а не UI-конструктором. Дозволяє будувати page builder без плагінів.

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

Relations — нативні двосторонні зв'язки між Entry будь-яких типів.

Live Preview — редактор бачить зміни в реальному часі в iframe із реальною сторінкою.

Архітектура типового сайту

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 Field — основа гнучкої вёрстки

Matrix Field містить блоки різних типів. Приклад поля pageContent:

Block Types:
├── richText: body (Redactor)
├── imageBlock: image (Assets), caption (Text), alignment (Select)
├── codeBlock: code (Code), language (Select)
├── quote: text (Text), author (Text), role (Text)
├── cta: title (Text), text (Text), buttonLabel (Text), buttonUrl (URL)
└── gallery: images (Assets multiple), columns (Select 2/3/4)

У Twig-шаблоні:

{% 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 %}

Запити через 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 %}

Трансформація зображень

{# Трансформації — 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>

Екосистема плагінів

Терміни розробки