Template System

Django Template system

: 파이썬 데이터(context)를 HTML 문서(Template)와 결합하여, 로직과 표현을 분리한 채 동적인 웹페이지를 생성하는 도구

→ ex) 뉴스 사이트 경우, 모든 기사는 헤더, 폰트, 광고 위치 등 동일한 페이지 틀을 공유함. 하지만 각 페이지에 들어가는 데이터(context), 즉 기사 제목, 내용, 기자 이름은 모두 다름

“페이지 틀”에 “데이터”를 동적으로 결합하여 수많은 페이지를 효율적으로 만들어내기 위함

Django Template Language (DTL)

: Template에서 조건, 반복, 변수 등의 프로그래밍적 기능을 제공하는 시스템

DTL Syntax

Variable
- Django Template에서의 변수
- render 함수의 세번째 인자로 딕셔너리 타입으로 전달됨
- 해당 딕셔너리 key에 해당하는 문자열이 template에서 사용 가능한 변수명이 됨
- dot(’.’)을 사용하여 변수 속성에 접근 가능
Filters
- 표시할 변수를 수정할 때 사용 (변수 + | + 필터)
- chained(연결)이 가능하며 일부 필터는 인자를 받기도 함
- 약 60개의 built-in template filers를 제공
Tags
- 반복 또는 논리를 수행하여 제어 흐름을 만듦
- 일부 태그는 시작과 종료 태그가 필요
- 약 24개의 built-in template tags를 제공
- if, else, endif 태그
- for 태그
Comments
- 주석
  - inline
  - multiline

DTL 예시

<aside> 📌

이 화면을 DTL을 활용하여 구성해 보자

</aside>

urls.py

"""
URL configuration for firstpjt project.

The `urlpatterns` list routes URLs to views. For more information please see:
    <https://docs.djangoproject.com/en/5.2/topics/http/urls/>
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path, include
from articles import views

urlpatterns = [
    path('admin/', admin.site.urls),
    # articles 앱의 views 모듈의 index 함수가 호출됨
    path('articles/', include('articles.urls')),
    path('dinner/', views.dinner),

]

views.py

→ 위의 예시 사진을 보여줄 articles/dinner.html 페이지를 렌더링해옴

import random
from django.shortcuts import render

def index(request):
    context = {
        'name' : 'Jane',
    }
    return render(request, 'articles/index.html', context)

def dinner(request):
    foods = [
        '국밥',
        '국수',
        '카레',
        '탕수육',
    ]
    picked = random.choice(foods)
    context = {
        'foods' : foods,
        'picked': picked,
    }
    # render : 객체 + 템플릿 + 변수 context
    return render(request, 'articles/dinner.html', context)
    pass

dinner.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>저녁 메뉴 추천!</h1>
  <p>{{ picked }} 메뉴는 {{picked|length}}글자 입니다. </p>

  <h2> 메뉴판 </h2>
  <ul>
	  # foods라는 리스트 변수에서 하나씩 빼옴
    {% for food in foods %}
      <li>{{food}}</li>
    {% endfor %}
  </ul>
	
	{% if foods|length == 0 %}
		<p1> 메뉴가 모두 소진되었습니다.</p1>
	{% else %}
		<p1> 아직 메뉴가 남았습니다.</p1>
	{% endif %}

</body>
</html>