관리자 템플릿 사용자 정의¶
Wagtail을 사용하는 프로젝트에서는 관리자 인터페이스 내의 Wagtail 로고와 같은 요소를 자체 브랜딩으로 바꾸고 싶을 수 있습니다. 이는 Django의 템플릿 상속 메커니즘을 통해 수행할 수 있습니다.
앱 중 하나에 templates/wagtailadmin/ 폴더를 만들어야 합니다. 이 앱은 기존 앱이거나 이 목적을 위해 새로 만든 앱(예: dashboard)일 수 있습니다. 이 앱은 wagtail.admin 보다 먼저 INSTALLED_APPS 에 등록되어야 합니다.
INSTALLED_APPS = (
# ...
'dashboard',
'wagtail',
'wagtail.admin',
# ...
)
사용자 정의 브랜딩¶
관리자 인터페이스에서 브랜딩을 사용자 정의하는 데 사용할 수 있는 템플릿 블록은 다음과 같습니다.
branding_logo¶
기본 로고를 바꾸려면 블록 branding_logo 를 재정의하는 템플릿 파일 dashboard/templates/wagtailadmin/base.html 을 만듭니다.
{% extends "wagtailadmin/base.html" %}
{% load static %}
{% block branding_logo %}
<img src="{% static 'images/custom-logo.svg' %}" alt="Custom Project" width="80" />
{% endblock %}
로고는 다음 페이지에도 나타나며 해당 템플릿 파일로 바꿀 수 있습니다.
로그인 페이지 -
branding_logo블록을 덮어쓰는 템플릿 파일dashboard/templates/wagtailadmin/login.html을 만듭니다.404 오류 페이지 -
branding_logo블록을 재정의하는 템플릿 파일dashboard/templates/wagtailadmin/404.html을 만듭니다.wagtail 사용자 표시줄 -
branding_logo블록을 덮어쓰는 템플릿 파일dashboard/templates/wagtailadmin/userbar/base.html을 만듭니다.
branding_favicon¶
관리자 페이지를 볼 때 표시되는 파비콘을 바꾸려면 블록 branding_favicon 을 재정의하는 템플릿 파일 dashboard/templates/wagtailadmin/admin_base.html 을 만듭니다.
{% extends "wagtailadmin/admin_base.html" %}
{% load static %}
{% block branding_favicon %}
<link rel="shortcut icon" href="{% static 'images/favicon.ico' %}" />
{% endblock %}
branding_title¶
제목 접두사(기본값은 ‘Wagtail’)를 바꾸려면 블록 branding_title 을 재정의하는 템플릿 파일 dashboard/templates/wagtailadmin/admin_base.html 을 만듭니다.
{% extends "wagtailadmin/admin_base.html" %}
{% block branding_title %}Frank's CMS{% endblock %}
branding_login¶
로그인 메시지를 바꾸려면 블록 branding_login 을 재정의하는 템플릿 파일 dashboard/templates/wagtailadmin/login.html 을 만듭니다.
{% extends "wagtailadmin/login.html" %}
{% block branding_login %}Sign in to Frank's Site{% endblock %}
branding_welcome¶
대시보드의 환영 메시지를 바꾸려면 블록 branding_welcome 을 재정의하는 템플릿 파일 dashboard/templates/wagtailadmin/home.html 을 만듭니다.
{% extends "wagtailadmin/home.html" %}
{% block branding_welcome %}Welcome to Frank's Site{% endblock %}
사용자 정의 사용자 프로필 아바타¶
UserProfile 모델 또는 gravatar에서 가져온 아바타 이외의 사용자 아바타를 렌더링하려면 get_avatar_url 후크를 사용하고 원하는 대로 아바타의 이미지 URL을 확인할 수 있습니다.
예를 들어, 익숙한 패턴으로 auth.User 모델에 키가 지정된 자체 애플리케이션의 Profile 모델에 아바타가 있을 수 있습니다. 이 경우 다음 예와 같이 후크를 등록할 수 있으며 Wagtail 관리자 아바타는 그에 따라 자체 Profile 아바타로 바뀝니다.
@hooks.register('get_avatar_url')
def get_profile_avatar(user, size):
return user.profile.avatar
또한 요청에 첨부하거나 이미지에 대한 추가 처리를 수행해야 하는 경우 후크에 전달되는 기본 size 매개변수를 사용할 수 있습니다.
사용자 정의 사용자 인터페이스 글꼴¶
관리자 사용자 인터페이스에서 사용되는 글꼴 모음을 사용자 정의하려면 insert_global_admin_css 후크를 사용하여 CSS 파일을 삽입하고 :root 선택기 내에서 변수를 재정의합니다.
:root {
--w-font-sans: Papyrus;
--w-font-mono: Courier;
}
사용자 정의 사용자 인터페이스 색상¶
경고
기본 Wagtail 색상은 WCAG2.1 AA 수준 색상 대비 요구 사항을 준수합니다. 관리자 색상을 사용자 정의할 때 Axe와 같은 도구를 사용하여 대비를 테스트해야 합니다.
관리자 사용자 인터페이스에서 사용되는 색상을 사용자 정의하려면 insert_global_admin_css 후크를 사용하여 CSS 파일을 삽입하고 :root 선택기 내에서 원하는 변수를 설정합니다. 색상 변수는 관리자 인터페이스의 밝은 테마와 어두운 테마 모두에서 재사용됩니다. 특정 테마의 색상을 변경하려면 다음을 사용합니다.
밝은 테마의 경우
:root, .w-theme-light.어두운 테마의 경우
.w-theme-dark.시스템 설정을 통한 밝은 테마의 경우
@media (prefers-color-scheme: light) { .w-theme-system { […] }}.시스템 설정을 통한 어두운 테마의 경우
@media (prefers-color-scheme: dark) { .w-theme-system { […] }}.
Wagtail의 색상 구성표를 사용자 정의하는 방법에는 두 가지가 있습니다.
정적 색상 변수를 설정하면 밝은 테마와 어두운 테마 모두에서 다양한 UI 구성 요소에서 재사용됩니다.
의미론적 색상을 설정하면 더 많지만 특정 UI 구성 요소를 사용자 정의할 수 있습니다.
정적 색상의 경우 각 색상을 개별적으로 설정하거나(예: --w-color-primary: #2E1F5E;) HSL(--w-color-primary-hue, --w-color-primary-saturation, --w-color-primary-lightness) 변수를 개별적으로 설정하여 모든 음영을 한 번에 사용자 정의합니다. 예를 들어 --w-color-secondary-hue: 180; 을 설정하면 모든 보조 음영이 한 번에 사용자 정의됩니다.
Make sure to test any customisations against our Contrast Grid. Try out your own customisations with this interactive style editor:
Static colours
| Variable | Usage | |
|---|---|---|
--w-color-black | Shadows only | |
--w-color-grey-800 | Backgrounds for panels in dark theme | |
--w-color-grey-700 | Backgrounds for panels in dark theme | |
--w-color-grey-600 | Body copy, user content | |
--w-color-grey-500 | Panels, dividers in dark mode | |
--w-color-grey-400 | Help text, placeholders, meta text, neutral state indicators | |
--w-color-grey-200 | Dividers, button borders | |
--w-color-grey-150 | Field borders | |
--w-color-grey-100 | Dividers, panel borders | |
--w-color-grey-50 | Background for panels, row highlights | |
--w-color-white | Page backgrounds, Panels, Button text | |
--w-color-primary | Wagtail branding, Panels, Headings, Buttons, Labels | |
--w-color-primary-200 | Accent for elements used in conjunction with primary colour in sidebar | |
--w-color-secondary | Primary buttons, action links | |
--w-color-secondary-600 | Hover states for two-tone buttons | |
--w-color-secondary-400 | Two-tone buttons, hover states | |
--w-color-secondary-100 | UI element highlights over dark backgrounds | |
--w-color-secondary-75 | UI element highlights over dark text | |
--w-color-secondary-50 | Button backgrounds, highlighted fields background | |
--w-color-info-125 | Hover background only, for information messages | |
--w-color-info-100 | Background and icons for information messages | |
--w-color-info-75 | Info text in the dark theme | |
--w-color-info-50 | Background only, for information messages | |
--w-color-positive-100 | Positive states | |
--w-color-positive-50 | Background only, for positive states | |
--w-color-warning-100 | Background and icons for potentially dangerous states | |
--w-color-warning-75 | Background only, for potentially dangerous states, in enhanced-contrast theme | |
--w-color-warning-50 | Background only, for potentially dangerous states | |
--w-color-critical-200 | Dangerous actions or states (over light background), errors | |
--w-color-critical-100 | Dangerous actions or states (over dark background) | |
--w-color-critical-50 | Background only, for dangerous states |
Light & dark theme colours
| Light | Dark | Variable |
|---|---|---|
| Surfaces - General | ||
--w-color-surface-page | ||
--w-color-surface-field | ||
--w-color-surface-field-inactive | ||
--w-color-surface-header | ||
--w-color-surface-menus | ||
--w-color-surface-menu-item-active | ||
--w-color-surface-tooltip | ||
--w-color-surface-button-default | ||
--w-color-surface-button-hover | ||
--w-color-surface-button-inactive | ||
--w-color-surface-button-outline-hover | ||
--w-color-surface-button-critical-hover | ||
--w-color-surface-status-label | ||
--w-color-surface-info-panel | ||
--w-color-surface-dashboard-panel | ||
| Text | ||
--w-color-text-button | ||
--w-color-text-label-menus-default | ||
--w-color-text-label-menus-active | ||
--w-color-text-label | ||
--w-color-text-context | ||
--w-color-text-meta | ||
--w-color-text-placeholder | ||
--w-color-text-link-default | ||
--w-color-text-link-hover | ||
--w-color-text-button-outline-default | ||
--w-color-text-button-outline-hover | ||
--w-color-text-highlight | ||
--w-color-text-error | ||
--w-color-text-button-critical-outline-hover | ||
--w-color-text-status-label | ||
--w-color-text-link-info | ||
| Icons | ||
--w-color-icon-primary | ||
--w-color-icon-primary-hover | ||
--w-color-icon-secondary | ||
--w-color-icon-secondary-hover | ||
| Borders | ||
--w-color-border-furniture | ||
--w-color-border-button-small-outline-default | ||
--w-color-border-field-default | ||
--w-color-border-field-inactive | ||
--w-color-border-field-hover | ||
--w-color-border-button-outline-default | ||
--w-color-border-button-outline-hover | ||
--w-color-border-interactive-more-contrast | ||
--w-color-border-interactive-more-contrast-hover | ||
--w-color-border-interactive-more-contrast-dark-bg | ||
--w-color-border-interactive-more-contrast-dark-bg-hover | ||
--w-color-border-furniture-more-contrast | ||
| Misc | ||
--w-color-focus | ||
--w-color-box-shadow-md | ||
사용자 정의 UI 정보 밀도¶
관리자 사용자 인터페이스의 정보 밀도를 사용자 정의하려면 insert_global_admin_css 후크를 사용하여 CSS 파일을 삽입합니다. UI 밀도를 높이거나 줄이려면 --w-density-factor CSS 변수를 설정합니다. 기본값은 1 이고 “snug” UI 테마는 0.5 를 사용합니다. 다음은 재정의 예입니다.
:root,
:host {
/* 기본 테마 사용자의 UI 밀도를 20% 줄입니다. */
--w-density-factor: 0.8;
}
:root,
:host {
/* 기본 테마 사용자의 UI 밀도를 20% 높입니다. */
--w-density-factor: 1.2;
}
.w-density-snug {
/* snug 테마 사용자의 경우 바닐라 Wagtail보다 훨씬 낮은 UI 밀도를 설정합니다. */
--w-density-factor: 0.25;
}
--w-density-factor 를 사용하도록 설계된 UI 구성 요소는 그에 따라 크기나 간격이 늘어납니다.
브랜딩에서 사이트 또는 페이지 지정¶
관리자 인터페이스에는 관리자 페이지에서 브랜딩을 사용자 정의하는 데 사용할 수 있는 렌더러 컨텍스트에 사용할 수 있는 여러 변수가 있습니다. 이는 다중 테넌트 Wagtail 설치에서 대시보드를 사용자 정의하는 데 유용할 수 있습니다.
root_page¶
현재 로그인한 사용자에 대해 가장 높은 탐색 가능한 페이지 개체를 반환합니다. 사용자에게 탐색 권한이 없으면 기본값은 None 입니다.
root_site¶
위의 루트 페이지에 대한 사이트 레코드의 이름을 반환합니다.
site_name¶
None 으로 평가되지 않는 한 root_site 의 값을 반환합니다. 이 경우 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 %} 7일 이내에 이메일을 받지 못한 경우 저희에게 전화하십시오. {% 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 %}
클라이언트 측 JavaScript 확장¶
Wagtail은 클라이언트 측 JavaScript를 확장하는 여러 가지 방법을 제공합니다.