Разработка сайта на CMS Statamic
Statamic — PHP CMS на Laravel, хранящий контент в flat-файлах (YAML/Markdown) или базе данных. Отличается от WordPress и Craft подходом «git-first»: вся структура и контент живут в репозитории, деплой — это просто git push.
Flat-file vs. Eloquent
Flat-file (default) — контент в content/ директории как YAML/Markdown. Нет нужды в БД для хостинга. Идеально для небольших сайтов, блогов, документации, где контент меняется редко и через деплой.
Eloquent — контент в базе данных MySQL/PostgreSQL. Нужен для: тысяч записей, сложного поиска, частых редактирований без деплоя, многопользовательских сред с конфликтами.
Архитектура Statamic
my-site/
├── content/
│ ├── collections/
│ │ ├── pages/ # Collection: страницы
│ │ └── blog/ # Collection: блог
│ ├── trees/
│ │ └── pages.yaml # Структура дерева навигации
│ └── globals/
│ └── site.yaml # Глобальные переменные
├── resources/
│ ├── blueprints/
│ │ ├── collections/
│ │ │ ├── pages/article.yaml
│ │ │ └── blog/post.yaml
│ │ └── globals/site.yaml
│ ├── views/ # Antlers-шаблоны
│ └── fieldsets/ # Переиспользуемые группы полей
├── config/statamic/
└── public/
Blueprint — описание структуры контента
# resources/blueprints/collections/blog/post.yaml
title: Blog Post
sections:
main:
display: Main
fields:
- handle: title
field:
type: text
required: true
display: Заголовок
- handle: slug
field:
type: slug
generate: true
display: Slug
- handle: content
field:
type: bard
buttons: [h2, h3, bold, italic, link, anchor, image, blockquote, quote, table, code]
display: Содержание
- handle: featured_image
field:
type: assets
container: assets
max_files: 1
display: Главное изображение
- handle: categories
field:
type: terms
taxonomies: [categories]
display: Категории
seo:
display: SEO
fields:
- import: seo
Antlers — шаблонизатор Statamic
{{# layouts/default.antlers.html #}}
<!DOCTYPE html>
<html lang="{{ site:locale }}">
<head>
<meta charset="utf-8">
<title>{{ title ?? site:name }} | {{ site:name }}</title>
{{ partial:meta }}
{{ vite src="resources/js/app.js|resources/css/app.css" }}
</head>
<body>
{{ partial:navigation }}
<main>{{ template_content }}</main>
{{ partial:footer }}
</body>
</html>
{{# resources/views/blog/index.antlers.html #}}
{{ collection:blog
sort="date:desc"
paginate="12"
status:is="published"
}}
{{ if no_results }}
<p>Публикаций пока нет.</p>
{{ /if }}
<div class="posts-grid">
{{ results }}
<article class="post-card">
{{ if featured_image }}
<img src="{{ featured_image | glide:width=800:height=400:fit=crop }}" alt="{{ title }}">
{{ /if }}
<h2><a href="{{ url }}">{{ title }}</a></h2>
<time datetime="{{ date format='Y-m-d' }}">{{ date format="d F Y" }}</time>
{{ if excerpt }}<p>{{ excerpt }}</p>{{ /if }}
<a href="{{ url }}">Читать далее →</a>
</article>
{{ /results }}
</div>
{{ paginate }}
<nav class="pagination">
{{ if prev_page_url }}<a href="{{ prev_page_url }}">← Назад</a>{{ /if }}
{{ if next_page_url }}<a href="{{ next_page_url }}">Вперёд →</a>{{ /if }}
</nav>
{{ /paginate }}
{{ /collection:blog }}
Glide — трансформация изображений
Statamic использует League/Glide для ресайза «на лету»:
{{# Простой ресайз #}}
{{ featured_image | glide:width=1200:height=630:fit=crop }}
{{# Preset-трансформации (config/statamic/assets.php) #}}
{{ featured_image | glide:preset=hero }}
{{# Responsive srcset #}}
{{ responsive:featured_image
sizes="(max-width: 768px) 100vw, 50vw"
webp="true"
}}
Электронный магазин: Statamic + Simple Commerce
Официальный плагин doublethreedigital/simple-commerce:
composer require doublethreedigital/simple-commerce
php artisan simple-commerce:install
Добавляет: Products Collection, Orders Collection, Stripe/PayPal gateway, налоги, купоны.
Сроки разработки
| Этап | Время |
|---|---|
| Установка + настройка коллекций | 1 день |
| Blueprints (5–8 типов) | 1–2 дня |
| Antlers-шаблоны | 3–7 дней |
| Навигация и структура | 0.5 дня |
| Аддоны (SEO, формы, поиск) | 1–2 дня |
| Корпоративный сайт | 8–14 дней |