장고 템플릿


이전 장에서는 django.http.HttpResponse()를 사용하여 "Hello World!"를 출력했습니다. 이 방법은 Django의 MVC 아이디어를 따르지 않는 데이터와 뷰를 혼합합니다.

이 장에서는 Django 템플릿의 활용 방법을 자세히 소개합니다. 템플릿은 문서의 프레젠테이션 형식과 내용을 구분하는 데 사용되는 텍스트입니다.

템플릿 적용 예시

이전 장의 프로젝트를 이어가며 HelloWorld 디렉토리 아래에 template 디렉토리를 생성하고 hello.html 파일을 생성합니다. 전체 디렉토리 구조는 다음과 같습니다. 

HelloWorld/
|-- HelloWorld
|   |-- __init__.py
|   |-- __init__.pyc
|   |-- settings.py
|   |-- settings.pyc
|   |-- urls.py
|   |-- urls.pyc
|   |-- view.py
|   |-- view.pyc
|   |-- wsgi.py
|   `-- wsgi.pyc
|-- manage.py
`-- templates
    `-- hello.html

hello.html 파일은 다음과 같습니다. 코드는 다음과 같습니다: 

<h1>{{ hello }}</h1>

From 템플릿에서 우리는 변수가 이중 괄호를 사용한다는 것을 알고 있습니다.

다음으로 템플릿 파일의 경로를 Django에 설명하고, HelloWorld/settings.py를 수정하고, TEMPLATES의 DIRS를 아래와 같이 [BASE_DIR+"/templates",]로 수정해야 합니다. 

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR+"/templates",],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

이제 view.py를 수정하고 템플릿에 데이터를 제출하기 위한 새 개체를 추가합니다. 

# -*- coding: utf-8 -*-

#from django.http import HttpResponse
from django.shortcuts import render

def hello(request):
    context          = {}
    context['hello'] = 'Hello World!'
    return render(request, 'hello.html', context)

보다시피 여기서는 이전에 사용된 HttpResponse를 대체하기 위해 render를 사용합니다. render는 또한 사전 컨텍스트를 매개변수로 사용합니다.

컨텍스트 사전에 있는 요소의 키 값 "hello"는 템플릿의 변수 "{{ hello }}"에 해당합니다.

http://192.168.45.3:8000/hello/를 다시 방문하면 다음 페이지를 볼 수 있습니다.

1041.jpg

이렇게 하여 데이터 출력을 위한 템플릿 사용을 완료하여 데이터와 뷰의 분리를 달성했습니다.

다음에는 템플릿에서 흔히 사용되는 문법 규칙을 자세히 소개하겠습니다.

Django 템플릿 태그

if/else 태그

기본 구문 형식은 

{% if condition %}
     ... display
{% endif %}

or: 

{% if condition1 %}
   ... display 1
{% elif condiiton2 %}
   ... display 2
{% else %}
   ... display 3
{% endif %}

조건에 따라 출력 여부를 결정합니다. if/else는 중첩을 지원합니다.

{% if %} 태그는 여러 변수를 판단하거나 변수를 부정(not)하기 위해 and, or or not 키워드를 허용합니다. 예: 

{% if athlete_list and coach_list %}
     athletes 和 coaches 变量都是可用的。
{% endif %}

for 태그

{% for %}를 사용하면 순서.

Python의 for 문과 유사하게 루프 구문은 for X in Y입니다. 여기서 Y는 반복할 시퀀스이고 X는 각 특정 루프에 사용되는 변수 이름입니다.

각 루프에서 템플릿 시스템은 {% for %}와 {% endfor %} 사이의 모든 것을 렌더링합니다.

예를 들어, Athletic_list 변수에 운동선수 목록이 있으면 다음 코드를 사용하여 목록을 표시할 수 있습니다. 


<ul>
{% for athlete in athlete_list %}
    <li>{{ athlete.name }}</li>
{% endfor %}
</ul>

목록이 역순으로 반복되도록 레이블에 reversed를 추가하세요. 

{% for athlete in athlete_list reversed %}
...
{% endfor %}

될 수 있습니다. {% for %} 태그를 사용하여 중첩: 

{% for athlete in athlete_list %}
    <h1>{{ athlete.name }}</h1>
    <ul>
    {% for sport in athlete.sports_played %}
        <li>{{ sport }}</li>
    {% endfor %}
    </ul>
{% endfor %}

ifequal/ifnotequal 태그

{% ifequal %} 태그는 두 값을 비교하여 동일할 경우 {% ifequal %}와 {% endifequal % 사이의 모든 값을 표시합니다. }.

다음 예에서는 두 개의 템플릿 변수 user와 currentuser를 비교합니다. 

{% ifequal user currentuser %}
    <h1>Welcome!</h1>
{% endifequal %}

{% if %}와 유사하게, {% ifequal %}는 선택적 {% else%} 태그를 지원합니다. 8

{% ifequal section 'sitenews' %}
    <h1>Site News</h1>
{% else %}
    <h1>No News Here</h1>
{% endifequal %}

Comment 태그

Django 사용 { # #} 댓글입니다. 

{# 这是一个注释 #}

Filters

템플릿 필터는 변수가 표시되기 전에 수정할 수 있습니다. 필터는 아래와 같이 파이프 문자를 사용합니다. 

{{ name|lower }}

{{ name }} 변수가 Lower 필터에 의해 처리된 후 문서 대문자 변환 텍스트는 소문자로 변경됩니다.

필터 파이프는 *소켓*될 수 있습니다. 즉, 한 필터 파이프의 출력을 다음 파이프의 입력으로 사용할 수 있습니다. 

{{ my_list|first|upper }}

위 예에서는 첫 번째 요소를 가져와 대문자로 변환합니다.

일부 필터에는 매개변수가 있습니다. 필터 인수는 콜론 뒤에 오고 항상 큰따옴표로 묶입니다. 예: 

{{ bio|truncatewords:"30" }}

이것은 변수 bio의 처음 30개 단어를 표시합니다.

기타 필터:

  • addslashes : 백슬래시, 작은따옴표 또는 큰따옴표 앞에 백슬래시를 추가합니다.

  • date: 지정된 형식 문자열 매개변수에 따라 날짜 또는 날짜/시간 개체의 형식을 지정합니다. 예: 

    {{ pub_date|date:"F j, Y" }}

  • length: 변수의 길이를 반환합니다.

include 태그

{% include %} 태그를 사용하면 다른 템플릿의 콘텐츠를 템플릿에 포함할 수 있습니다.

다음 두 예제 모두 nav.html 템플릿을 포함합니다. 

{% include "nav.html" %}

템플릿 상속

템플릿은 상속을 통해 재사용할 수 있습니다.

다음으로 먼저 이전 프로젝트의 템플릿 디렉터리에 base.html 파일을 생성합니다. 코드는 다음과 같습니다. 

<html>
  <head>
    <title>Hello World!</title>
  </head>

  <body>
    <h1>Hello World!</h1>
    {% block mainbody %}
       <p>original</p>
    {% endblock %}
  </body>
</html>

위 코드에서 mainbody라는 블록 태그는 후속 작업으로 대체될 수 있는 부분입니다.

모든 {% block %} 태그는 하위 템플릿이 이러한 부분을 재정의할 수 있음을 템플릿 엔진에 알립니다.

hello.html은 base.html을 상속하고 특정 블록을 대체합니다. hello.html의 수정된 코드는 다음과 같습니다. 

{% extends "base.html" %}

{% block mainbody %}
<p>继承了 base.html 文件</p>
{% endblock %}

코드의 첫 번째 줄은 hello.html이 base.html 파일을 상속함을 나타냅니다. 보시다시피, 여기서 같은 이름을 가진 블록 태그는 base.html의 해당 블록을 대체하는 데 사용됩니다.

주소 http://192.168.45.3:8000/hello/를 다시 방문하면 출력 결과는 다음과 같습니다.

1042.jpg