# 관리자 템플릿 사용자 정의

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

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

```python
INSTALLED_APPS = (
    # ...

    'dashboard',

    'wagtail',
    'wagtail.admin',

    # ...
)
```

(custom_branding)=

## 사용자 정의 브랜딩

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

### `branding_logo`

기본 로고를 바꾸려면 블록 `branding_logo` 를 재정의하는 템플릿 파일 `dashboard/templates/wagtailadmin/base.html` 을 만듭니다.

```html+django
{% 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` 을 만듭니다.

```html+django
{% 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` 을 만듭니다.

```html+django
{% extends "wagtailadmin/admin_base.html" %}

{% block branding_title %}Frank's CMS{% endblock %}
```

### `branding_login`

로그인 메시지를 바꾸려면 블록 `branding_login` 을 재정의하는 템플릿 파일 `dashboard/templates/wagtailadmin/login.html` 을 만듭니다.

```html+django
{% extends "wagtailadmin/login.html" %}

{% block branding_login %}Sign in to Frank's Site{% endblock %}
```

### `branding_welcome`

대시보드의 환영 메시지를 바꾸려면 블록 `branding_welcome` 을 재정의하는 템플릿 파일 `dashboard/templates/wagtailadmin/home.html` 을 만듭니다.

```html+django
{% extends "wagtailadmin/home.html" %}

{% block branding_welcome %}Welcome to Frank's Site{% endblock %}
```

(custom_user_profile_avatar)=

## 사용자 정의 사용자 프로필 아바타

`UserProfile` 모델 또는 [gravatar](https://gravatar.com/)에서 가져온 아바타 이외의 사용자 아바타를 렌더링하려면 [`get_avatar_url`](#get_avatar_url) 후크를 사용하고 원하는 대로 아바타의 이미지 URL을 확인할 수 있습니다.

예를 들어, 익숙한 패턴으로 `auth.User` 모델에 키가 지정된 자체 애플리케이션의 `Profile` 모델에 아바타가 있을 수 있습니다. 이 경우 다음 예와 같이 후크를 등록할 수 있으며 Wagtail 관리자 아바타는 그에 따라 자체 `Profile` 아바타로 바뀝니다.

```python
@hooks.register('get_avatar_url')
def get_profile_avatar(user, size):
    return user.profile.avatar
```

또한 요청에 첨부하거나 이미지에 대한 추가 처리를 수행해야 하는 경우 후크에 전달되는 기본 `size` 매개변수를 사용할 수 있습니다.

(custom_user_interface_fonts)=

## 사용자 정의 사용자 인터페이스 글꼴

관리자 사용자 인터페이스에서 사용되는 글꼴 모음을 사용자 정의하려면 [](insert_global_admin_css) 후크를 사용하여 CSS 파일을 삽입하고 `:root` 선택기 내에서 변수를 재정의합니다.

```css
:root {
    --w-font-sans: Papyrus;
    --w-font-mono: Courier;
}
```

(custom_user_interface_colors)=

## 사용자 정의 사용자 인터페이스 색상

```{warning}
기본 Wagtail 색상은 WCAG2.1 AA 수준 색상 대비 요구 사항을 준수합니다. 관리자 색상을 사용자 정의할 때 [Axe](https://www.deque.com/axe/browser-extensions/)와 같은 도구를 사용하여 대비를 테스트해야 합니다.
```

관리자 사용자 인터페이스에서 사용되는 색상을 사용자 정의하려면 [](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](https://en.wikipedia.org/wiki/HSL_and_HSV)(`--w-color-primary-hue`, `--w-color-primary-saturation`, `--w-color-primary-lightness`) 변수를 개별적으로 설정하여 모든 음영을 한 번에 사용자 정의합니다. 예를 들어 `--w-color-secondary-hue: 180;` 을 설정하면 모든 보조 음영이 한 번에 사용자 정의됩니다.

```{include} ../../_static/wagtail_colors_tables.txt

```

(custom_ui_information_density)=

## 사용자 정의 UI 정보 밀도

관리자 사용자 인터페이스의 정보 밀도를 사용자 정의하려면 [](insert_global_admin_css) 후크를 사용하여 CSS 파일을 삽입합니다. UI 밀도를 높이거나 줄이려면 `--w-density-factor` CSS 변수를 설정합니다. 기본값은 `1` 이고 "snug" UI 테마는 `0.5` 를 사용합니다. 다음은 재정의 예입니다.

```css
: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 템플릿 변수처럼 사용합니다.

```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`

로그인 양식 위나 아래에 콘텐츠를 추가하려면 다음 블록을 재정의합니다.

```html+django
{% extends "wagtailadmin/login.html" %}

{% block above_login %} If you are not Frank you should not be here! {% endblock %}
```

### `fields`

로그인 양식에 추가 필드를 추가하려면 `fields` 블록을 재정의합니다. 사용자 이름 및 암호 필드를 포함하려면 블록 어딘가에 `{{ block.super }}` 를 추가해야 합니다.

```html+django
{% 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 }}` 를 추가해야 합니다.

```html+django
{% 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>` 요소의 전체 내용을 래핑합니다.

```html+django
{% 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`

암호 재설정 양식 위나 아래에 콘텐츠를 추가하려면 다음 블록을 재정의합니다.

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

{% block above_login %} 7일 이내에 이메일을 받지 못한 경우 저희에게 전화하십시오. {% endblock %}
```

### `submit_buttons`

암호 재설정 양식에 추가 버튼을 추가하려면 `submit_buttons` 블록을 재정의합니다. 원래 제출 버튼을 포함하려면 블록 어딘가에 `{{ block.super }}` 를 추가해야 합니다.

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

{% block submit_buttons %}
    <a href="{% url 'helpdesk' %}">Contact the helpdesk</a>
{% endblock %}
```

## 클라이언트 측 JavaScript 확장

Wagtail은 [클라이언트 측 JavaScript를 확장](extending_client_side)하는 여러 가지 방법을 제공합니다.