[Django] 장고 html template문법

장고 생활코딩

장고 템플릿 문법.

{% extends "base_generic.html" %}

{% block title %}{{ section.title }}{% endblock %}

{% block content %}
<h1>{{ section.title }}</h1>

{% for story in story_list %}
<h2>
  <a href="{{ story.get_absolute_url }}">
      {{ story.headline|upper }}

  </a>
</h2>
<p>{{ story.tease|truncatewords:"100" }}</p>
{% endfor %}
{% endblock %}

• {{}}두개는 변수.
• 뷰에서 탬플릿으로 context전달이 가능하다.
  • 함수에서 html문서로 객체의 전달이 가능하다.
  • sectin.title은 뷰에서section이라는 객체를 html문서로 보냈다는 뜻이고 그 안에 title속성을 전달했다는 뜻.(.은 변수속성에 접근)
• 장고 탬플릿 변수를 사용해 html문서상에서도 어떤 객체의 속성들에 접근할 수 있고, 이를 출력할 수 있도록 지원함.

 

---

템플릿 필터

• 템플릿 변수의 값을 특정 형식으로 변환할 때 사용
• 템플릿 변수 다음에 바('|')를 그은 다음 적용하고자 하는 필터를 명시
• {{ story.headline | upper }}의 'upper'
  • 'upper'라고 명시하였으므로, 'story.headline'의 값을 대문자 형식으로 변환
• default : {{ value|default:"nothing" }} 변수가 false또는 비어있는경우 default값을 사용한다.
• length : 값의 길이를 반환한다.
• truncatewords:30 : 변수값중 앞에서 30개 단어만 보여주고 줄바꿈 문자는 모두 없애줌.
• join:"//" : //로 인자 전부 묶어줌.
• ...필터는 커스텀할수도 있음.참고
• 참고

---

탬플릿 태그

• {% %}
• load static, for, if 흐름 제어가 가능. html상에서 프로그래밍 적 로직의 구현을 위함.
• for태그 loop에 사용할 수 있는 변수(i같은거)
  • forloop.counter : 현재까지 루프 실행한 loopcounter(1부터)
  • forloop.counter0 (0부터)
  • forloop.recounter : loop끝에서 현재가 몇번째인지 카운트한 숫자(1부터)
  • forloop.recounter0
  • forloop.first :첫번째 실행이면 true
  • forloop.last : 마지막실행이면 true
  • forloop.parentloop : 중첩된 루프에서 현재의 루프 바로 상위의 루프값.
• if뒤 변수가 True만 아래문장 실행. 필터, 연산자 사용가능. 필터가 스트링반환시에 산술연산은 불가.
  • and, or, not, and not, > >=, < <= ,in, not in 등 비교연산 가능
• {% csrf_token %} CSRF 공격 방지를 위한 태그, 장고 내부적으로 CSRF 토큰값의 유효성을 검증.
  • form태그 바로 첫줄에 넣음.
• {% url %} url하드코딩을 방지.
  • {% url'namespace:view-name' arg1 arg2 %}
• {% with %} : eith ~ endwith 내에 특정값을 변수에 저장해두는 기능.
  • {% with call = store.owner.count %}{% endwith %}
  • ​ {{ call }} people in store
• {% load %} : 필터 및 사용자 정의 태그를 로딩해줌.
• block, extends : 중복되는 html파일 반복해서 작성 해야하는 번거로움을 줄여준다.(탬플릿 상속)
  • 상속하는 부모 템플릿에는 {% block %} {% endblock %}
  • 상속 받는 자식 템플릿은 {% extends %}를 ''최상단''에 표시.(무조건 첫번째 탬플릿태그여야함.)
  • 즉 extends 가 탬플릿 상단에 있으면 템플릿 세스템은 부모 템플릿부터 찾게됨.
  • 태그에 가독성을 위한 이름 부여 가능. {% block aa %} {% endblock aa %}

참고

참고

---

탬플릿 코멘트

• 주석. 출력되지 않음.
• {# #}
• {% comment %}
• {% endcomment %}