관리자 템플릿 사용자 정의

Wagtail을 사용하는 프로젝트에서는 관리자 인터페이스 내의 Wagtail 로고와 같은 요소를 자체 브랜딩으로 바꾸고 싶을 수 있습니다. 이는 Django의 템플릿 상속 메커니즘을 통해 수행할 수 있습니다.

앱 중 하나에 templates/wagtailadmin/ 폴더를 만들어야 합니다. 이 앱은 기존 앱이거나 이 목적을 위해 새로 만든 앱(예: dashboard)일 수 있습니다. 이 앱은 wagtail.admin 보다 먼저 INSTALLED_APPS 에 등록되어야 합니다.

INSTALLED_APPS = (
    # ...

    'dashboard',

    'wagtail',
    'wagtail.admin',

    # ...
)

사용자 정의 브랜딩

관리자 인터페이스에서 브랜딩을 사용자 정의하는 데 사용할 수 있는 템플릿 블록은 다음과 같습니다.

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

VariableUsage
--w-color-blackShadows only
--w-color-grey-800Backgrounds for panels in dark theme
--w-color-grey-700Backgrounds for panels in dark theme
--w-color-grey-600Body copy, user content
--w-color-grey-500Panels, dividers in dark mode
--w-color-grey-400Help text, placeholders, meta text, neutral state indicators
--w-color-grey-200Dividers, button borders
--w-color-grey-150Field borders
--w-color-grey-100Dividers, panel borders
--w-color-grey-50Background for panels, row highlights
--w-color-whitePage backgrounds, Panels, Button text
--w-color-primaryWagtail branding, Panels, Headings, Buttons, Labels
--w-color-primary-200Accent for elements used in conjunction with primary colour in sidebar
--w-color-secondaryPrimary buttons, action links
--w-color-secondary-600Hover states for two-tone buttons
--w-color-secondary-400Two-tone buttons, hover states
--w-color-secondary-100UI element highlights over dark backgrounds
--w-color-secondary-75UI element highlights over dark text
--w-color-secondary-50Button backgrounds, highlighted fields background
--w-color-info-125Hover background only, for information messages
--w-color-info-100Background and icons for information messages
--w-color-info-75Info text in the dark theme
--w-color-info-50Background only, for information messages
--w-color-positive-100Positive states
--w-color-positive-50Background only, for positive states
--w-color-warning-100Background and icons for potentially dangerous states
--w-color-warning-75Background only, for potentially dangerous states, in enhanced-contrast theme
--w-color-warning-50Background only, for potentially dangerous states
--w-color-critical-200Dangerous actions or states (over light background), errors
--w-color-critical-100Dangerous actions or states (over dark background)
--w-color-critical-50Background only, for dangerous states

Light & dark theme colours

LightDarkVariable
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_loginbelow_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_formbelow_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를 확장하는 여러 가지 방법을 제공합니다.