Latest web development tutorials

장고 템플릿

마지막 장에서 우리는 출력 django.http.HttpResponse () 사용에 "Hello World!". MVC의 맞지 않는 데이터를 도면과 함께 혼합하는 방법은, 장고 생각.

우리가 장고 응용 프로그램 템플릿 당신에게 설명 할 것이 장에서는 템플릿 프리젠 테이션 및 콘텐츠를 별도의 문서에 대한 텍스트입니다.

템플릿 애플리케이션 예제

우리는 프로젝트의 이전 섹션을 HelloWorld 디렉토리 템플릿 디렉토리에 생성 및 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>

우리는 이중 괄호를 사용하는 템플릿 변수에서 알고있다.

다음으로 템플릿을[BASE_DIR + "/ 서식"에 DIRS을 수정, 경로 장고 템플릿 파일 구성품을 설명하여 HelloWorld / settings.py를 수정해야 ,] 다음과 같습니다 :

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에 렌더링 여기에 사용 된 것을 볼 수 있습니다. 또한 렌더링하는 매개 변수로 사전 컨텍스트를 사용합니다.

상황에 맞는 사전 "안녕하세요"의 주요 요소가 템플릿에 변수에 해당하는 "{{안녕하세요}}".

그런 다음 방문 http://192.168.45.3:8000/hello/를 방문, 당신은 페이지를 볼 수 있습니다

그리고, 우리는 데이터를 뷰를 분리 가능하게 상기 출력 데이터를 사용하여 템플릿을 완성 하였다.

다음으로, 우리는 공통 템플릿 문법 규칙을 소개합니다.

장고 템플릿 태그

/ 다른 태그 경우

다음과 같이 기본 구문은 다음과 같습니다 

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

또는 : 

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

조건에 따른 출력 여부를 결정한다. / 다른 경우 것이 중첩을 지원합니다.

{%는 % 경우} 태그는 허용하고, 또는 여부를 예를 들어 (안) 부정 여러 변수 또는 변수에 키워드를 판단하기 위해 : 

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

라벨

{%를 들면 %가} 우리가 순서를 반복 할 수 있습니다.

그리고 비슷한 문에 대한 파이썬의 경우, 루프 구문은 Y에서 X를 들어, Y는 반복 할 순서이고, X는 각각의 특정주기에 사용되는 변수 이름입니다.

루프를 통해 때마다, 템플릿 시스템은 모든 {%를 %} {%의 ENDFOR의 %} 사이의 콘텐츠를 렌더링합니다.

예를 들어, 운동 선수 athlete_list 변수의 목록을 제공, 우리는이 목록을 표시하려면 다음 코드를 사용할 수 있습니다 : 

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

역 반복자 있도록 되돌릴 수 목록을 추가 할 레이블 : 

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

당신은 {% %를} 태그를 중첩 될 수 있습니다 : 

{% 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 %}을 주도했습니다.

다음은 템플릿 변수 사용자와 두 currentuser을 비교 : 

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

그리고 {% %이 경우} 마찬가지로, {%의 ifequal의 %가} 옵션 {% 다른 사람 %} 태그를 지원합니다 : 8 

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

노트 탭

장고 주석을 사용하여 {##}. 

{# 这是一个注释 #}

필터

필터 템플릿을 수정하기 전에 변수에 표시 할 수있는 필터 파이프 문자로서 다음 

{{ name|lower }}

{{이름}} 변수는 낮은 필터 처리 된 후, 대문자 소문자로 텍스트를 변환 문서화합니다.

필터 파이프 소켓 * 모두는 출력 필터 파이프라고하고, 다음 파이프 라인의 입력으로 사용할 수있을 수있다 : 

{{ my_list|first|upper }}

위의 예에서의 첫 번째 요소와 대문자로 변환.

일부 필터 매개 변수가 있습니다. 콜론 항상 따옴표 다음에 필터 매개 변수 후. 예를 들면 : 

{{ bio|truncatewords:"30" }}

이 변수는 바이오의 첫 30 단어를 표시합니다.

다른 필터 :

  • addslashes는 : 어떤 작은 따옴표 나 큰 따옴표 앞에 백 슬래시 백 슬래시를 추가합니다.
  • 날짜 : 형식 문자열 인수 형식을 지정된 날짜 또는 날짜 개체 인스턴스를 누르십시오 : 
    {{ pub_date|date:"F j, Y" }}
  • 길이 : 변수의 길이를 돌려줍니다.

태그를 포함

{%는 %를 포함} 태그는 템플릿의 템플릿을 포함 다른 콘텐츠를 할 수 있습니다.

다음 두 예는 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라는 태그는 부품의 교체 후속 될 수 있다는 것이다.

모든 {% 블록 %} 태그는 아이 템플릿이 부분을 대체 할 수있는 템플릿 엔진을 알려줍니다.

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/를 방문, 출력 결과는 다음과 같습니다