템플릿 작성¶

페이지 콘텐츠¶

각 페이지에 입력된 데이터/콘텐츠는 Django의 {{ double-brace }} 표기법을 통해 액세스/출력됩니다. 모델의 각 필드는 page. 를 접두사로 사용하여 액세스해야 합니다. 예를 들어 페이지 제목 {{ page.title }} 또는 작성자 필드 {{ page.author }}.

페이지 모델 wagtail.models.Page.context_object_name 에서 사용자 지정 변수 이름을 구성할 수 있습니다. 사용자 지정 이름이 정의된 경우 page 는 공유 템플릿에서 계속 사용할 수 있습니다.

또한 request. 를 사용할 수 있으며 Django의 요청 객체를 포함합니다.

사용자 이미지¶

사용자가 Wagtail 사이트에 업로드한 이미지(위에서 언급한 개발자의 정적 파일과 대조적으로)는 이미지 라이브러리로 이동하여 페이지 편집기 인터페이스를 통해 페이지에 추가됩니다.

다른 CMS와 달리 페이지에 이미지를 추가하는 것은 사용할 이미지의 “버전”을 선택하는 것을 포함하지 않습니다. Wagtail에는 미리 정의된 이미지 “형식” 또는 “크기”가 없습니다. 대신 템플릿 개발자는 템플릿 내의 특수 구문을 통해 이미지가 요청될 때 즉석에서 이미지 조작이 발생하도록 정의합니다.

라이브러리의 이미지는 이 구문을 사용하여 요청해야 하지만, 개발자의 정적 이미지는 img 태그와 같은 일반적인 방법을 통해 추가할 수 있습니다. 라이브러리의 이미지만 즉석에서 조작할 수 있습니다.

이미지 조작 구문에 대한 자세한 내용은 여기를 참조하십시오: 템플릿에서 이미지 사용하는 방법.

여러 형식의 이미지¶

picture 태그는 image 처럼 작동하지만, 여러 형식을 지정하여 <picture> 요소와 <source> 요소 및 대체 <img> 를 생성할 수 있습니다.

예를 들어:

{% load wagtailimages_tags %}
...

{% picture page.photo format-{avif,webp,jpeg} width-400 %}

전체 문서는 여러 형식를 참조하십시오.

여러 크기의 이미지¶

srcset_image 태그는 image 처럼 작동하지만, 여러 크기를 지정하여 srcset 속성을 생성하고 반응형 이미지 규칙을 활용할 수 있습니다.

예를 들어:

{% load wagtailimages_tags %}
...

{% srcset_image page.photo width-{400,800} sizes="(max-width: 600px) 400px, 80vw" %}

picture 를 사용하여 여러 형식과 크기를 동시에 생성할 수도 있습니다.

{% picture page.photo format-{avif,webp,jpeg} width-{400,800} sizes="80vw" %}

전체 문서는 반응형 이미지를 참조하십시오.

반응형 임베드¶

Wagtail은 템플릿에 자체 스타일을 적용하지 않으므로 이미지 및 포함된 미디어는 HTML에 의해 결정된 고정 너비로 표시됩니다. 이미지는 다음과 같은 CSS 규칙을 사용하여 컨테이너에 맞게 크기를 조정할 수 있습니다.

.body img {
    max-width: 100%;
    height: auto;
}

여기서 body 는 템플릿에서 이미지를 둘러싸는 컨테이너 요소입니다.

포함된 미디어를 크기 조정 가능하게 만드는 것도 가능하지만, 일반적으로 미디어의 가로 세로 비율과 일치하는 사용자 지정 스타일 규칙이 필요합니다. 이를 돕기 위해 Wagtail은 반응형 임베드에 대한 내장 지원을 제공하며, 프로젝트 설정에서 WAGTAILEMBEDS_RESPONSIVE_HTML = True 로 설정하여 활성화할 수 있습니다. 이렇게 하면 임베드에 responsive-object CSS 클래스와 인라인 padding-bottom 스타일이 추가되어 다음 CSS와 함께 사용됩니다.

.responsive-object {
    position: relative;
}

.responsive-object iframe,
.responsive-object object,
.responsive-object embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

pageurl¶

페이지 객체를 받아 현재 페이지와 동일한 사이트에 있는 경우 상대 URL(/foo/bar/)을 반환하고, 그렇지 않은 경우 절대 URL(http://example.com/foo/bar/)을 반환합니다.

{% load wagtailcore_tags %}
...
<a href="{% pageurl page.get_parent %}">색인으로 돌아가기</a>

fallback 키워드 인수를 제공할 수 있습니다. 이는 URL 문자열, 매개변수 없이 해결할 수 있는 명명된 URL 경로 또는 get_absolute_url 메서드가 있는 객체일 수 있으며, 전달된 페이지가 None 일 때 대체 URL로 사용됩니다.

{% load wagtailcore_tags %}

{% for publication in page.related_publications.all %}
    <li>
        <a href="{% pageurl publication.detail_page fallback='coming_soon' %}">
            {{ publication.title }}
        </a>
    </li>
{% endfor %}

fullpageurl¶

페이지 객체를 받아 절대 URL(http://example.com/foo/bar/)을 반환합니다.

{% load wagtailcore_tags %}
...
<meta property="og:url" content="{% fullpageurl page %}" />

pageurl 과 마찬가지로 fallback 키워드 인수를 제공할 수 있습니다.

slugurl¶

페이지의 “홍보” 탭에 정의된 slug 를 받아 일치하는 페이지의 URL을 반환합니다. 동일한 슬러그를 가진 여러 페이지가 있는 경우 선택되는 페이지는 결정되지 않습니다.

pageurl 과 마찬가지로 가능한 경우 상대 링크를 제공하려고 시도하지만, 페이지가 다른 사이트에 있는 경우 절대 링크로 기본 설정됩니다. 이는 최상위 탐색 또는 사이트 전체 링크와 같은 공유 페이지 요소를 만들 때 가장 유용합니다.

{% load wagtailcore_tags %}
...
<a href="{% slugurl 'news' %}">뉴스 색인</a>

wagtail_site¶

현재 요청에 해당하는 Site 객체를 반환합니다.

{% load wagtailcore_tags %}

{% wagtail_site as current_site %}

미리 보기 인식 캐싱¶

{% wagtailcache %} 태그는 Django의 {% cache %} 태그와 유사하게 작동하지만, Wagtail에서 페이지(또는 다른 모델)를 미리 볼 때 캐시된 콘텐츠를 캐시하거나 제공하지 않습니다.

{% load wagtail_cache %}

{% wagtailcache 500 sidebar %}
    <!-- 사이드바 -->
{% endwagtailcache %}

{% cache %} 와 마찬가지로 make_template_fragment_key를 사용하여 캐시 키를 얻을 수 있습니다.

페이지 인식 캐싱¶

{% wagtailpagecache %} 는 {% wagtailcache %} 의 확장으로, 현재 page 및 site 를 인식하고 캐시 키의 일부로 포함합니다. 이를 통해 페이지의 일부에 캐싱을 쉽게 추가할 수 있으며, 페이지가 어디에 있는지 걱정할 필요가 없습니다. {% wagtailpagecache %} 는 의도적으로 가정을 합니다. 더 많은 사용자 지정을 위해서는 {% wagtailcache %} 를 사용하는 것이 좋습니다.

{% load wagtail_cache %}

{% wagtailpagecache 500 hero %}
    <!-- 히어로 -->
{% endwagtailpagecache %}

이는 다음과 동일합니다.

{% wagtail_site as current_site %}

{% wagtailcache 500 hero page.cache_key current_site.id %}
    <!-- 히어로 -->
{% endwagtailcache %}

페이지의 캐시 키를 사용하면 페이지가 업데이트될 때 캐시가 자동으로 무효화됩니다.

캐시 키를 얻으려면 make_wagtail_template_fragment_key 를 사용할 수 있습니다(Django의 make_template_fragment_key 기반).

from django.core.cache import cache
from wagtail.coreutils import make_wagtail_template_fragment_key

key = make_wagtail_template_fragment_key("hero", page, site)
cache.delete(key)  # 캐시된 템플릿 조각 무효화