03_Template & DTL

1. Django Template Language (DTL)

• Django template 에서 사용하는 built-in template system
• 조건, 반복, 변수 치환, 필터 등의 기능 제공
• 프로그래밍적 로직 x!! 프레젠테이션을 표현하기 위한 것
• if, for 등을 사용한다고 해서 Python 코드인 것은 아님

 

 

1) Variable

{{ variable }}

• render()를 사용하여 views.py에서 정의한 변수를 template 파일로 넘겨 받아 사용
• 변수명은 영어, _로 구성. _로 시작 불가. 공백, 구두점 사용 불가.
• dot(.)을 사용하여 변수 속성에 접근
• render()의 세번째 인자로 'key' : value의 딕셔너리 형태로 넘겨줌.
  여기서 정의한 key에 해당하는 문자열이 template에서 사용 가능한 변수명.

 

 

2) Filters

• 표시할 변수를 수정할 때 사용

{{ variable|filter }}


# name 변수를 모두 소문자로 출력
{{ name|lower }}


# chained 가능, 일부 필터는 인자를 받기도 함
{{ variable|truncatewords:30 }}

 

 

3) Tags

{% tag %}

{% if %}{% endif %}

• 출력 텍스트를 만들거나, 반복 또는 논리를 수행하여 제어 흐름 만듦.
• 변수보다 복잡한 일들을 수행
• 일부 태그는 시작과 종료 태그 필요

 

 

4) Comments

# 한 줄 주석
{# #}


# 여러줄 주석
{% comment %}
{% endcomment %}

 

 

 

2. 코드 작성 순서

• urls.py -> views.py -> templates

# urls.py

urlpatterns = [
	path('admin/', admin.site.urls),
    path('index/', views.index),
    path('greeting/', views.greeting),
]

# views.py

def greeting(request):
	return render(request, 'greeting.html', {'name':'Hong'})

<!-- greeting.html -->

<p> 안녕 나는 {{ name }} 이야. </p>

 

• 실습

# views.py

def greeting(request):
	foods = ['apple', 'banana', 'mango',]
    info = {
    	'name' : 'Hong'
    }
    context = {
    	'foods' : foods,
        'info' : info,
    }
    return render(request, 'greeting.html', context)

<!-- greeting.html -->

<h1> 안녕 나는 {{ info.name }} 이야.</h1>
<p> 난 {{ foods }}를 좋아해.</p>
<p> 특히 {{ foods.0 }}을 가장 좋아하지.</p>

<a href="/index/">뒤로</a>

 

• 랜덤 인자 넘겨주기 + filter

# urls.py

urlpatterns = [
	...,
    path('dinner/', views.dinner),
]

# views.py

import random

def dinner(request):
	foods = ['햄버거', '피자', '치킨', '삼겹살']
    pick = random.choice(foods)
    context = {
    	'pick' : pick,
        'foods' : foods,
    }
    return render(request, 'dinner.html', context)

<!-- dinner.html -->

<h1> 오늘 메뉴는 {{ pick }}</h1>
<p>{{ pick }}은 {{ pick|length }}글자</p>
<p>{[ foods|join:", "}}</p>

 

 

 

2. Tags

• for로 반복문 돌리기

<!-- dinner.html -->

<h1>메뉴판</h1>
<ul>
  {% for food in foods %}
    <li>{{ food }}</li>
  {% endfor %}
</ul>

 

• extends (override) / 상속

{% extends 'base.html' %}

- 자식(하위) 템플릿이 부모 템플릿을 확장한다는 것을 알림
- 반드시 템플릿 최상단에 작성

 

• block content (overridden)

{% block content %}
{% endblock %}

- 하위 템플릿에서 재지정(overridden) 할 수 있는 블록 정의
- 즉, 하위 템플릿이 채울 수 있는 공간

 

# settings.py

TEMPLATES = [
	...,
    'DIRS' : [BASE_DIR / 'templates'],
    ...,
]

- app_name/templates 디렉토리 외 템플릿 추가 경로 설정

 

• include (다른 템플릿 포함)

{% include '' %}

- 템플릿을 로드하고, 현재 페이지로 렌더링
- 템플릿 내에 다른 템플릿을 "포함(including)"
ex) {% include '_nav.html' %}을 base.html에 써주기