Настройка шаблонов административной панели

В ваших проектах с Wagtail вы можете заменить такие элементы, как логотип Wagtail, на собственный брендинг в интерфейсе администратора. Это можно сделать с помощью механизма наследования шаблонов Django.

Вам нужно создать папку templates/wagtailadmin/ в одном из ваших приложений — это может быть существующее приложение или новое, созданное для этой цели, например, dashboard. Это приложение должно быть зарегистрировано в INSTALLED_APPS перед wagtail.admin:

INSTALLED_APPS = (
    # ...

    'dashboard',

    'wagtail.core',
    'wagtail.admin',

    # ...
)

Настройка брендинга

Доступные шаблоны блоков для настройки брендинга в интерфейсе администратора приведены ниже:

branding_logo

Чтобы заменить логотип по умолчанию, создайте файл шаблона dashboard/templates/wagtailadmin/base.html, который переопределяет блок branding_logo:

{% extends "wagtailadmin/base.html" %}
{% load static %}

{% block branding_logo %}
    <img src="{% static 'images/custom-logo.svg' %}" alt="Custom Project" width="80" />
{% endblock %}

Логотип также отображается на странице ошибки 404 администратора; чтобы заменить его и там, создайте файл шаблона dashboard/templates/wagtailadmin/404.html, который переопределяет блок branding_logo.

Логотип также отображается в панели Wagtail; чтобы заменить его и там, создайте файл шаблона dashboard/templates/wagtailadmin/userbar/base.html, который переопределяет блок branding_logo.

branding_favicon

Чтобы заменить значок избранного, отображаемый при просмотре страниц администратора, создайте файл шаблона dashboard/templates/wagtailadmin/admin_base.html, который переопределяет блок branding_favicon:

{% extends "wagtailadmin/admin_base.html" %}
{% load static %}

{% block branding_favicon %}
    <link rel="shortcut icon" href="{% static 'images/favicon.ico' %}" />
{% endblock %}

branding_title

Чтобы заменить префикс заголовка (который по умолчанию равен «Wagtail»), создайте файл шаблона dashboard/templates/wagtailadmin/admin_base.html, который переопределяет блок branding_title:

{% extends "wagtailadmin/admin_base.html" %}

{% block branding_title %}Frank's CMS{% endblock %}

branding_login

Чтобы заменить сообщение входа в систему, создайте файл шаблона dashboard/templates/wagtailadmin/login.html, который переопределяет блок branding_login:

{% extends "wagtailadmin/login.html" %}

{% block branding_login %}Sign in to Frank's Site{% endblock %}

branding_welcome

Чтобы заменить приветственное сообщение на панели мониторинга, создайте файл шаблона dashboard/templates/wagtailadmin/home.html, который переопределяет блок branding_welcome:

{% extends "wagtailadmin/home.html" %}

{% block branding_welcome %}Welcome to Frank's Site{% endblock %}

Настройка цветов пользовательского интерфейса

Чтобы настроить основной цвет, используемый в пользовательском интерфейсе администратора, вставьте файл CSS с помощью хука insert_global_admin_css и переопределите переменные внутри селектора :root:

:root {
    --color-primary-hue: 25;
}

color-primary представляет собой hsl цвет, состоящий из 3 переменных CSS - --color-primary-hue (0-360 без единиц), --color-primary-saturation (процент) и --color-primary-lightness (также процент). Разделение цвета на 3 части позволяет рассчитывать вариации цвета для использования наряду с основным цветом. При необходимости вы также можете управлять этими вариациями вручную, установив переменные hue, saturation, и lightness для следующих цветов: color-primary-darker, color-primary-dark, color-primary-lighter, color-primary-light, color-input-focus, и color-input-focus-border:

:root {
    --color-primary-hue: 25;
    --color-primary-saturation: 100%;
    --color-primary-lightness: 25%;
    --color-primary-darker-hue: 24;
    --color-primary-darker-saturation: 100%;
    --color-primary-darker-lightness: 20%;
    --color-primary-dark-hue: 23;
    --color-primary-dark-saturation: 100%;
    --color-primary-dark-lightness: 15%;
}

Если вместо этого вы хотите установить все доступные цвета, вы можете использовать любые допустимые цвета CSS:

:root {
    --color-primary: mediumaquamarine;
    --color-primary-darker: rebeccapurple;
    --color-primary-dark: hsl(330, 100%, 70%);
    --color-primary-lighter: azure;
    --color-primary-light: aliceblue;
    --color-input-focus: rgb(204, 0, 102);
    --color-input-focus-border: #4d0026;
}

Указание сайта или страницы в брендинге

Интерфейс администратора имеет ряд переменных, доступных в контексте рендера, которые могут использоваться для настройки брендинга на странице администратора. Это может быть полезно для настройки панели мониторинга в многосайтовом установке Wagtail:

root_page

Возвращает самую верхнюю страницу объекта для текущего пользователя, авторизованного на входе. Если у пользователя нет прав на просмотр, это по умолчанию None.

root_site

Возвращает имя записи сайта для вышеуказанной корневой страницы.

site_name

Возвращает значение root_site, если оно не равно None. В противном случае возвращает значение settings.WAGTAIL_SITE_NAME.

Чтобы использовать эти переменные, создайте файл шаблона dashboard/templates/wagtailadmin/home.html, как если бы вы переопределяли один из блоков шаблонов в панели мониторинга, и используйте их как любые другие переменные шаблона Django:

{% extends "wagtailadmin/home.html" %}

{% block branding_welcome %}Welcome to the Admin Homepage for {{ root_site }}{% endblock %}

Расширение формы входа в систему

Чтобы добавить дополнительные элементы управления в форму входа в систему, создайте файл шаблона dashboard/templates/wagtailadmin/login.html.

above_login и below_login

Чтобы добавить содержимое над или под формой входа в систему, переопределите эти блоки:

{% extends "wagtailadmin/login.html" %}

{% block above_login %} If you are not Frank you should not be here! {% endblock %}

fields

Чтобы добавить дополнительные поля в форму входа в систему, переопределите блок fields. Вам нужно добавить {{ block.super }} где-то в ваш блок, чтобы включить поля имени пользователя и пароля:

{% extends "wagtailadmin/login.html" %}

{% block fields %}
    {{ block.super }}
    <li class="full">
        <div class="field iconfield">
            Two factor auth token
            <div class="input icon-key">
                <input type="text" name="two-factor-auth">
            </div>
        </div>
    </li>
{% endblock %}

submit_buttons

Чтобы добавить дополнительные кнопки в форму входа в систему, переопределите блок submit_buttons Вам нужно добавить {{ block.super }} где-то в ваш блок, чтобы включить кнопку входа в систему:

{% extends "wagtailadmin/login.html" %}

{% block submit_buttons %}
    {{ block.super }}
    <a href="{% url 'signup' %}"><button type="button" class="button">{% trans 'Sign up' %}</button></a>
{% endblock %}

login_form

Чтобы полностью настроить форму входа в систему, переопределите блок login_form Этот блок заключает все содержимое элемента <form>:

{% extends "wagtailadmin/login.html" %}

{% block login_form %}
    <p>Some extra form content</p>
    {{ block.super }}
{% endblock %}

Расширение компонентов клиентской стороны

Часть интерфейса администратора Wagtail написана на клиентском JavaScript с React. Для настройки или расширения этих компонентов вам может потребоваться использовать React и другие связанные библиотеки. Чтобы это было проще, Wagtail предоставляет свои зависимости React как глобальные переменные в администраторе. Вот доступные пакеты:

// 'focus-trap-react'
window.FocusTrapReact;
// 'react'
window.React;
// 'react-dom'
window.ReactDOM;
// 'react-transition-group/CSSTransitionGroup'
window.CSSTransitionGroup;

Wagtail также предоставляет некоторые собственные компоненты React. Вы можете использовать:

window.wagtail.components.Icon;
window.wagtail.components.Portal;

Страницы с редактором rich text также имеют доступ к:

// 'draft-js'
window.DraftJS;
// 'draftail'
window.Draftail;

// Wagtail’s Draftail-related APIs and components.
window.draftail;
window.draftail.ModalWorkflowSource;
window.draftail.ImageModalWorkflowSource;
window.draftail.EmbedModalWorkflowSource;
window.draftail.LinkModalWorkflowSource;
window.draftail.DocumentModalWorkflowSource;
window.draftail.Tooltip;
window.draftail.TooltipEntity;