Django 기초 - Template Language

ID짱재·2021년 7월 21일

django

Django

목록 보기

7/43

🌈 Template Language

🔥 Template 태그 : {% 문법 %}

🔥 Template 변수 : {{ 변수 }}

🔥 Template 필터 : {{ 변수|옵션 }}

Template Language로는 Template 태그, Template 변수, Template 필터가있는데요,, 이 Template Language 통해 python 코드를 html 탬플릿 안에서 활용할 수 있어요!
Template 태그는 html문서에서 python code를 사용할 수 있게하는 문법이고, Template 변수로는 view를 통해 전달한 변수를 템플릿 안에서 다룰 수 있어요.
Template 필터는 템플릿 변수 안에 담긴 문자열이나 리스트 등을 쉽게 다룰 수 있게해주는 기능을 하고 있어요.
참고 : https://docs.djangoproject.com/en/3.2/ref/templates/builtins/

2. Template 태그 : {% 문법 %}

1) {% for in %} ~ {% endfor %}

탬플릿 태그을 통해 python 문법의 if, else, for문을 사용할 수 있고,, extends, block, include 등을 통해 다른 템플릿을 상속받거나 포함시킬 수 있답니다.

{{forloop.counter}}는 반복문안에서 사용하면 반복 횟수만큼 count해줍니다.

🔍 {{forloop.counter}} : 1부터 반복횟수만큼 count

🔍 {{forloop.counter0}} : 0부터 반복횟수만큼 count

🔍 {{forloop.revcounter}} : 전체 길이로 시작해서 1까지 count

🔍 {{forloop.revcounter0}} : 전체 길이로 시작해서 0까지 count
from django.shortcuts import render, redirect
from django.http import HttpResponse, JsonResponse
from .models import Notice # 👈 models.py에 Model(Notice)를 가져옴
# Create your views here.
def sample(request):
    data = Notice.objects.all() # 👈 모든 데이터를 data에 담음
    return render(request, 'sample.html', {'value':data}) 👈 딕셔너리 형태로 전달
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <h1>Template Language!</h1>
    <p>{{value}}</p>
    {% for i in value %}
    <div>번호 : {{forloop.counter}} 번째 data</div>
    <div>제목 : {{i.title}}</div>
    <div>추천수 : {{i.likeCount}}</div>
    <div>조회수 : {{i.viewCount}}</div>
    <div>내용 : {{i.contents}}</div>
    <br />
    {% endfor %}
  </body>
</html>

2) {% if %} .. {% elif %} .. {% else %} .. {% endif %}

탬플릿 태그를 통해 if, elif, else문도 아래 처럼 사용할 수 있어요!

{%load static%}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <h1>Template Language!</h1>
    <p>{{value}}</p>
    {% for i in value %}
    <div>{{forloop.counter}} 번째 data</div>
    <div>제목 : {{i.title}}</div>
    <div>추천수 : {{i.likeCount}}</div>
    <div>조회수 : {{i.viewCount}}</div>
    <div>내용 : {{i.contents}}</div>
    {% if i.viewCount > 10 %}
    <p>조회수가 10이상 입니다.</p>
    {% elif i.viewCount > 5 %}
    <p>조회수가 5이상 10미만 입니다.</p>
    {% else %}
    <p>조회수가 5미만 입니다.</p>
    {% endif %}
    <br />
    {% endfor %}
  </body>
</html>

3) {% with 변수명 = '값' %}

템플릿 태그를 사용해 html안에서 변수를 선언한 뒤 사용할 수도 있답니다!

{%load static%}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <h1>Template Language!</h1>
    {% with value='hello Django'%}  👈 "hello Django"를 value라는 변수에 담았어요:)
    <h4>{{value}}</h4>
    {% endwith %}
  </body>
</html>

3. Template 변수 : {{ 변수 }}

view에서 변수에 데이터를 넣어 템플릿으로 전달하면 html 파일 안에서 해당 변수를 쉽게 사용할 수 있어요. Dict형, list형 모두 전달 가능 합니다.

# views.py
from django.shortcuts import render, redirect
from django.http import HttpResponse, JsonResponse
def sample(request):
    d = {'name':'jaewon', 'age':99, 'location':'seoul', 'isman':True}
    l = [100,200,300]
    return render(request, 'sample.html', {'d':d, 'l':l})

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <h1>Template Language!</h1>
    <<p>
      <div>l 출력 : {{l}}</div>
      <div>l의 0번째 값은 : {{l.0}}</div>
      <div>l의 1번째 값은 : {{l.1}}</div>
      <div>l의 2번째 값은 : {{l.2}}</div>
    </p>
    <p>
      <div>d 출력 : {{d}}</div>
      <div>d의 key(name) 값은 : {{d.name}}</div>
      <div>d의 key(age)) 값은 : {{d.age}}</div>
      <div>d의 key(location) 값은 : {{d.location}}</div>
      <div>d의 key(isman) 값은 : {{d.isman}}</div>
    </p>
  </body>
</html>

4. Template 필터 : {{ 변수|옵션 }}

템플릿 필터는 템플릿 변수의 값을 변환시키기 위한 옵션으로 템플릿 변수에 파이프(|)를 붙인 뒤 사용해요.

주로 문자열이나 리스트 등의 길이구하기, 슬라이싱, 합치기 등에 활용됩니다.

길이 구하기 : 🔍 {{ 템플릿변수 | length }}

리스트를 문자열로 합치기 : 🔍 {{ 변수|join:"옵션" }}

소문자 & 대문자로 변환 : 🔍 {{ 변수|lower }} / 🔍 {{ 변수|upper }}

리스트에서 random하게 추출 : 🔍 {{ 리스트형 변수|random }}

문자열로 슬라이싱 : 🔍 {{ 변수|slice:"n:n" }}

Django Templates에서 lorem 사용하는 방법은 아래와 같아요:)

🔍 {{ lorem [count][mehod][random] }}
{%load static%}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <h1>Template Language!</h1>
    {% with value='hello Django'%}
    <h4>{{value}}</h4>
    {% endwith %}
    {% lorem %}    
	{% lorem 3 p%} 
    {% lorem 2 w random %} {% lorem 5 w random %} 
  </body>
</html>