Настройка шаблонов админки
В ваших проектах с 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 %}
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