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