Spec-Zone.ru › Wagtail 3

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

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

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

INSTALLED_APPS = (
    # ...

    'dashboard',

    'wagtail',
    '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 %}

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

Предупреждение

Цвета Wagtail по умолчанию соответствуют требованиям к контрасту цветов WCAG2.1 уровня AA. При настройке цветов администрирования вы должны проверить контраст, используя такие инструменты, как Axe.

Чтобы настроить основной цвет, используемый в пользовательском интерфейсе администрирования, вставьте файл 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;

Страницы с редакторами форматированного текста также имеют доступ к:

// '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;

© 2014-present Torchbox Ltd and individual contributors.
All rights are reserved.
Licensed under the BSD License.
https://docs.wagtail.org/en/v3.0.3/advanced_topics/customisation/admin_templates.html

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API