Налаштування Panel (адмін-панелі) Kirby

Налаштування Panel (адмін-панелі) Kirby

Panel — вбудований інтерфейс управління контентом Kirby. Працює на Vue.js, відкривається по /panel (або налаштовуваному шляху). Вся поведінка панелі описується через Blueprint-файли в YAML — без кліків у налаштуваннях, все версіонується разом з кодом.

Першочергова налаштування

При першому звертанні до /panel без існуючих користувачів Kirby показує форму реєстрації адміністратора. Після створення — форма закривається автоматично. Для вимкнення ручного створення:

// site/config/config.php
return [
    'panel' => [
        'install' => false, // заборонює створення користувачів через браузер
        'slug'    => 'manage', // /manage замість /panel
    ],
];

Blueprint сайту

# site/blueprints/site.yml
title: Налаштування сайту

tabs:
    general:
        label: Основне
        icon: settings
        fields:
            site_name:
                type: text
                label: Назва сайту
                required: true
            site_description:
                type: textarea
                label: Опис
                maxlength: 160
            logo:
                type: files
                label: Логотип
                max: 1
                query: site.files.filterBy("extension", "svg")

    contacts:
        label: Контакти
        icon: email
        fields:
            email:
                type: email
                label: Email
            phone:
                type: tel
                label: Телефон
            address:
                type: textarea
                label: Адреса

    social:
        label: Соцсети
        icon: globe
        fields:
            social_links:
                type: structure
                label: Ссилки
                fields:
                    platform:
                        type: select
                        options:
                            telegram: Telegram
                            vk: VKontakte
                            youtube: YouTube
                            github: GitHub
                    url:
                        type: url

Blueprint сторінки зі вкладками

# site/blueprints/pages/service.yml
title: Послуга

columns:
    left:
        width: 2/3
        sections:
            content:
                type: fields
                fields:
                    title:
                        type: text
                        label: Заголовок
                        required: true
                    intro:
                        type: writer
                        label: Вступ
                        marks:
                            - bold
                            - italic
                    body:
                        type: blocks
                        label: Вміст
                        fieldsets:
                            - heading
                            - text
                            - image
                            - list
                            - callout

    right:
        width: 1/3
        sections:
            meta:
                type: fields
                fields:
                    slug:
                        type: slug
                        label: URL
                        sync: title
                    status:
                        type: select
                        label: Статус
                        options:
                            draft: Чорновик
                            listed: Опубліковано
                    sort:
                        type: number
                        label: Порядок сортування
                    icon:
                        type: files
                        label: Іконка
                        max: 1
                    seo_title:
                        type: text
                        label: SEO заголовок
                    seo_description:
                        type: textarea
                        label: SEO опис
                        maxlength: 160

Налаштування прав доступу

Ролі описуються в site/blueprints/users/:

# site/blueprints/users/editor.yml
title: Редактор

permissions:
    access:
        panel: true
        settings: false
        users: false
    pages:
        create: true
        delete: false
        duplicate: true
        update: true
        changeSlug: false
        changeStatus: true
    files:
        create: true
        delete: true
        update: true
    user:
        changePassword: true
        changeRole: false

Для тонкого налаштування прав через код:

// site/config/config.php
return [
    'permissions' => [
        'pages' => [
            'delete' => function (): bool {
                /** @var \Kirby\Cms\User $user */
                $user = kirby()->user();
                // тільки адміністратори можуть видаляти опубліковані сторінки
                if ($this->isListed()) {
                    return $user->isAdmin();
                }
                return $user->role()->id() === 'editor';
            },
        ],
    ],
];

Користувацькі розділи панелі

Раздел — це список дочірніх сторінок або файлів з кастомною конфігурацією:

# site/blueprints/pages/blog.yml
title: Блог

sections:
    articles:
        type: pages
        label: Статті
        template: article
        status: all
        layout: table
        info: "{{ page.date.toDate('d.m.Y') }}"
        columns:
            title:
                label: Заголовок
                width: 1/2
            date:
                label: Дата
                width: 1/4
            tags:
                label: Теги
                width: 1/4
        sortBy: date desc
        empty: Статей пока нет

    drafts:
        type: pages
        label: Чорновики
        status: draft
        template: article
        layout: list

Поле «pages» для зв'язків

related_articles:
    type: pages
    label: Похожие статьи
    query: site.find('blog').children.listed
    max: 3
    template: article
    layout: cards
    image:
        query: page.cover.toFile
        cover: true

Кастомизація виду карточки у списку

# у розділі або полі pages
info: "{{ page.date.toDate('d.m.Y') }} · {{ page.readingTime }} хв"
image:
    query: page.cover.toFile
    ratio: 3/2
    cover: true

Перевизначення CSS панелі

// site/config/config.php
return [
    'panel' => [
        'css' => 'assets/panel.css',
    ],
];

/* assets/panel.css */
:root {
    --color-black: #1a1a2e;
    --color-focus: #e94560;
}

.k-header-logo img {
    height: 32px;
}

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

Базова налаштування панелі з blueprints для 5–7 типів сторінок і двома ролями: 1–2 дні. Зі складними структурними полями, кастомними правами та кастомним CSS: 2–3 дні.