Розробка користувацької теми Pico (Twig)
Тема Pico — директорія в themes/ з Twig-шаблонами та статикою. Мінімальна тема складається з одного файлу index.twig. Повна тема для реального проекту включає кілька шаблонів, часткові блоки та стилі.
Структура теми
themes/my-theme/
index.twig # базовий шаблон (використовується за замовчуванням)
blog.twig # шаблон типу сторінки блог
post.twig # шаблон окремого посту
service.twig # шаблон сторінки послуги
404.twig # сторінка помилки
partials/
header.twig
footer.twig
nav.twig
meta.twig
css/
theme.css
js/
theme.js
images/
theme.yml # метадані теми
Змінні Pico у Twig
Pico передає в кожен шаблон стандартний набір змінних:
{{ site_title }} {# назва сайту з config.yml #}
{{ base_url }} {# корінь сайту #}
{{ theme_url }} {# URL директорії теми #}
{{ meta.title }} {# заголовок поточної сторінки #}
{{ meta.description }} {# опис з frontmatter #}
{{ meta.date }} {# дата сторінки #}
{{ meta.template }} {# назва шаблону #}
{{ content }} {# HTML-вміст сторінки #}
{{ pages }} {# масив всіх сторінок #}
{{ current_page }} {# об'єкт поточної сторінки #}
{{ prev_page }} {# попередня сторінка в тій же директорії #}
{{ next_page }} {# наступна сторінка #}
{{ is_front_page }} {# true якщо головна сторінка #}
Базовий шаблон index.twig
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
{{ meta.title ? meta.title ~ ' | ' : '' }}{{ site_title }}
</title>
{% if meta.description %}
<meta name="description" content="{{ meta.description }}">
{% endif %}
<link rel="stylesheet" href="{{ theme_url }}/css/theme.css">
</head>
<body class="{{ meta.template ?: 'default' }}{% if is_front_page %} front-page{% endif %}">
{% include theme_url ~ '/partials/nav.twig' %}
<main>
<h1>{{ meta.title }}</h1>
{{ content }}
</main>
{% include theme_url ~ '/partials/footer.twig' %}
<script src="{{ theme_url }}/js/theme.js" defer></script>
</body>
</html>
Навігація
{# partials/nav.twig #}
<nav>
<a href="{{ base_url }}" class="{{ is_front_page ? 'active' : '' }}">
{{ site_title }}
</a>
<ul>
{% for page in pages %}
{# Показати тільки сторінки першого рівня #}
{% if page.id|split('/')|length == 1 and not page.hidden %}
<li>
<a href="{{ page.url }}"
class="{{ current_page.id starts with page.id ? 'active' : '' }}">
{{ page.title }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</nav>
Шаблон блога зі списком постів
{# blog.twig #}
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="utf-8">
<title>{{ meta.title }} | {{ site_title }}</title>
<link rel="stylesheet" href="{{ theme_url }}/css/theme.css">
</head>
<body class="blog-index">
{% include theme_url ~ '/partials/nav.twig' %}
<main class="container">
<h1>{{ meta.title }}</h1>
{{ content }}
<div class="posts-grid">
{% for page in pages %}
{% if page.id starts with 'blog/' and page.id != 'blog/' and not page.hidden %}
<article class="post-card">
{% if page.meta.date %}
<time datetime="{{ page.meta.date|date('Y-m-d') }}">
{{ page.meta.date|date('d.m.Y') }}
</time>
{% endif %}
<h2><a href="{{ page.url }}">{{ page.title }}</a></h2>
{% if page.meta.description %}
<p>{{ page.meta.description }}</p>
{% endif %}
</article>
{% endif %}
{% endfor %}
</div>
</main>
{% include theme_url ~ '/partials/footer.twig' %}
</body>
</html>
Переключення шаблону через frontmatter
---
Title: Послуги
Template: service
---
Pico шукає шаблон service.twig в темі. Якщо не знайдено — використовує index.twig.
theme.yml
# themes/my-theme/theme.yml
name: Моя тема
version: 1.0.0
author: Ім'я розробника
Робота з користувацькими мета-полями
Pico передає всі frontmatter-поля в об'єкт meta:
---
Title: Заголовок
Hero_image: hero.jpg
Show_sidebar: true
Custom_field: значення
---
{% if meta.hero_image %}
<img src="{{ base_url }}/content/services/{{ meta.hero_image }}" alt="{{ meta.title }}">
{% endif %}
{% if meta.show_sidebar %}
{% include theme_url ~ '/partials/sidebar.twig' %}
{% endif %}
Імена полів у шаблоні — нижний регістр незалежно від написання в frontmatter.