Розробка кастомного шаблону Statamic (Antlers/Blade)
Statamic підтримує обидва шаблонізатори: Antlers (власний, рекомендований) та Blade (Laravel-стандарт). Вибір залежить від команди: Antlers — простіший для контент-орієнтованих шаблонів, Blade — знайомий Laravel-розробникам та підтримує компоненти.
Antlers vs Blade
| Antlers | Blade | |
|---|---|---|
| Синтаксис | {{ collection:blog }} |
@foreach($blog as $item) |
| Змінні | {{ title }} |
{{ $title }} |
| Теги Statamic | Нативні | Через фасади |
| Компоненти | Partials | Blade Components |
| Продуктивність | Аналогічна | Аналогічна |
Antlers: структура шаблонів
{{# resources/views/layouts/app.antlers.html #}}
<!DOCTYPE html>
<html lang="{{ locale:language }}">
<head>
<meta charset="utf-8">
<title>
{{ if meta_title }}{{ meta_title }} | {{ /if }}{{ site:name }}
</title>
<meta name="description" content="{{ meta_description ?? excerpt ?? '' | truncate:160 }}">
{{ vite src="resources/js/app.js|resources/css/app.css" }}
</head>
<body>
{{ partial:navigation :items="navigation:main" }}
<main>{{ template_content }}</main>
{{ partial:footer }}
</body>
</html>
Antlers: робота з даними
{{# Умови #}}
{{ if is_premium and (user:is_logged_in or not config:require_login) }}
{{ content }}
{{ elseif user:is_logged_in }}
<p>Upgrade to Premium</p>
{{ else }}
<p>Please log in</p>
{{ /if }}
{{# Цикл з вкладеними даними #}}
{{ collection:blog sort="date:desc" limit="6" }}
{{ results }}
<article>
<h2>{{ title }}</h2>
{{ categories }}
<a href="{{ url }}">{{ title }}</a>{{ unless last }}, {{ /unless }}
{{ /categories }}
{{ date format="d.m.Y" }}
</article>
{{ /results }}
{{ /collection:blog }}
{{# Scope — ізоляція даних #}}
{{ scope:post }}
{{ collection:blog limit="1" }}
{{ results }}
{{ scope:category }}
{{ categories }}
{{ title }}: {{ post:title }}
{{ /categories }}
{{ /scope:category }}
{{ /results }}
{{ /collection:blog }}
{{ /scope:post }}
Blade: шаблони Statamic
{{-- resources/views/layouts/app.blade.php --}}
<!DOCTYPE html>
<html lang="{{ Statamic::tag('locale:language') }}">
<head>
<title>{{ $page->get('meta_title') ?? $page->get('title') }} | {{ config('app.name') }}</title>
@vite(['resources/css/app.css', 'resources/js/app.ts'])
</head>
<body>
@include('partials.navigation')
<main>@yield('content')</main>
@include('partials.footer')
</body>
</html>
{{-- resources/views/blog/index.blade.php --}}
@extends('layouts.app')
@section('content')
<div class="blog-grid">
@foreach($entries as $post)
<x-post-card :post="$post" />
@endforeach
</div>
{{ $paginator->links() }}
@endsection
Blade-компонент для поста:
{{-- resources/views/components/post-card.blade.php --}}
@props(['post'])
<article>
@if($post->get('featured_image'))
<img src="{{ Statamic::tag('glide')->src($post->get('featured_image'))->width(800)->height(400)->fit('crop')->fetch() }}"
alt="{{ $post->get('title') }}">
@endif
<h2><a href="{{ $post->url() }}">{{ $post->get('title') }}</a></h2>
<time>{{ $post->date()->format('d.m.Y') }}</time>
</article>
Partial з параметрами
{{# Вызов partial #}}
{{ partial:card
title="{ title }"
url="{ url }"
image="{ featured_image }"
show_excerpt="true"
}}
{{# resources/views/partials/card.antlers.html #}}
<article class="card {{ if show_excerpt }}card--with-excerpt{{ /if }}">
{{ if image }}
<img src="{{ image | glide:width=600:height=400:fit=crop }}" alt="{{ title }}">
{{ /if }}
<h3><a href="{{ url }}">{{ title }}</a></h3>
{{ if show_excerpt && excerpt }}
<p>{{ excerpt | truncate:120 }}</p>
{{ /if }}
</article>
Навігація з деревом
{{ nav:main }}
<ul>
{{ tree }}
<li class="{{ if page:is_current || page:is_parent }}active{{ /if }}">
<a href="{{ url }}">{{ title }}</a>
{{ if children }}
<ul>
{{ children }}
<li><a href="{{ url }}">{{ title }}</a></li>
{{ /children }}
</ul>
{{ /if }}
</li>
{{ /tree }}
</ul>
{{ /nav:main }}
Розробка набору шаблонів (layout, nav, footer, список, детальна, статичні сторінки) — 4–8 днів.