Spec-Zone.ru › Wagtail

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

В ваших проектах с 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 %}

Логотип также отображается на следующих страницах, и его можно заменить файлом шаблона:

  • Страница входа — создайте файл шаблона dashboard/templates/wagtailadmin/login.html для переопределения блока branding_logo.
  • Страница ошибки 404 — создайте файл шаблона dashboard/templates/wagtailadmin/404.html для переопределения блока branding_logo.
  • Панель пользователя Wagtail — создайте файл шаблона dashboard/templates/wagtailadmin/userbar/base.html для переопределения блока branding_logo.

branding_favicon

Чтобы заменить значок избранного (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 {
    --w-font-sans: Papyrus;
    --w-font-mono: Courier;
}

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

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

Стандартные цвета Wagtail соответствуют требованиям контрастности WCAG2.1 уровня AA. При настройке цветов админки необходимо проверить контрастность с помощью инструментов, таких как Axe.

Чтобы настроить цвета, используемые в пользовательском интерфейсе админки, вставьте файл CSS с помощью хука insert_global_admin_css и установите нужные переменные внутри селектора :root. Есть два варианта настройки: либо задать каждый цвет отдельно (например, --w-color-primary: #2E1F5E;); либо задать отдельно переменные HSL (--w-color-primary-hue, --w-color-primary-saturation, --w-color-primary-lightness) для одновременной настройки всех оттенков. Например, установка --w-color-secondary-hue: 180; позволит настроить все вторичные оттенки сразу.

Убедитесь, что вы протестировали все настройки по нашему Contrast Grid. Попробуйте свои собственные настройки с помощью этого интерактивного редактора стилей:

Переменная Применение
--w-color-black Только тени
--w-color-grey-600 Основной текст, пользовательский контент
--w-color-grey-400 Подсказки, метки, метатекст, индикаторы нейтрального состояния
--w-color-grey-200 Разделители, границы кнопок
--w-color-grey-150 Границы полей
--w-color-grey-100 Разделители, границы панелей
--w-color-grey-50 Фон панелей, выделение строк
--w-color-white Фон страниц, панелей, текст кнопок
--w-color-primary Фирменный стиль Wagtail, панели, заголовки, кнопки, метки
--w-color-primary-200 Акцент для элементов, используемых совместно с основным цветом в боковой панели
--w-color-secondary Основные кнопки, ссылки на действия
--w-color-secondary-600 Состояния наведения для кнопок с двумя цветами
--w-color-secondary-400 Кнопки с двумя цветами, состояния наведения
--w-color-secondary-100 Выделение элементов пользовательского интерфейса на темных фонах
--w-color-secondary-75 Выделение элементов пользовательского интерфейса на темном тексте
--w-color-secondary-50 Фон кнопок, выделенный фон полей
--w-color-info-100 Фон и значки для сообщений об информации
--w-color-info-50 Только фон для сообщений об информации
--w-color-positive-100 Положительные состояния
--w-color-positive-50 Только фон для положительных состояний
--w-color-warning-100 Фон и значки для потенциально опасных состояний
--w-color-warning-50 Только фон для потенциально опасных состояний
--w-color-critical-200 Опасные действия или состояния (на светлом фоне), ошибки
--w-color-critical-100 Опасные действия или состояния (на темном фоне)
--w-color-critical-50 Только фон для опасных состояний

Указание сайта или страницы в оформлении

В контексте рендеринга интерфейса админки доступно несколько переменных, которые можно использовать для настройки оформления страниц админки. Это может быть полезно для настройки панели управления на установке 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>
        <div>
            <label for="id_two-factor-auth">Two factor auth token</label>
            <input type="text" name="two-factor-auth" id="id_two-factor-auth">
        </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 %}

Расширение формы запроса сброса пароля

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

above_form и below_form

Для добавления контента над или под формой сброса пароля переопределите эти блоки:

{% extends "wagtailadmin/account/password_reset/form.html" %}

{% block above_login %} If you have not received your email within 7 days, call us. {% endblock %}

submit_buttons

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

{% extends "wagtailadmin/account/password_reset/form.html" %}

{% block submit_buttons %}
    <a href="{% url 'helpdesk' %}">Contact the helpdesk</a>
{% 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.DraftUtils;
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/stable/advanced_topics/customisation/admin_templates.html

Spec-Zone.ru

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