[Django] 장고 템플릿 언어의 문법을 살펴보자.
Engineering/Django

[Django] 장고 템플릿 언어의 문법을 살펴보자.

728x90
반응형

오늘은 장고만이 가지는 장고 내부 언어의 문법을 살펴보겠다👵

 

장고 템플릿 언어

  • 파이썬의 변수 및 문법을 HTML 문서 안에서 사용할 수 있게 장고에서 지원하는 언어

  • 따라서 기존 HTML, 파이썬과 조금씩 다르다.

  • 변수는 {{ 변수 }} : 띄어쓰기는 불허용. _ 와 대소문자를 이용해서 표현 해줌. 또한 ' . ' 을 이용해서 변수의 속성으로 접근 가능 e.g.) {{ article.headline }}

  • 필터 | 파이프 : 필터를 적용해 변수에 효과를 줄 수 있음. 장고에서는 약 30개의 필터 제공 e.g.) {{ article.pub_date|date:"F j, Y" }}

  • 태그 {% Tag %}: 일반적으로 if문, for문 등에 쓰이며 장고에서는 약 24개의 기본 태그 제공

    e.g.)

    {% for athlete in athlete_list %}
        <li>{{ athlete.name }}</li>
    {% endfor %}
  • 템플릿 상속

    : 장고 템플릿에서 가장 유용한 부분이 바로 템플릿 상속. 네비게이션바 또는 하단 바와 같이 웹사이트의 공통이 되는 부분을 모든 하위 템플릿에서 상속 받아 사용할 수 있게끔 해줌.

  • base.html -> 상속이 될 상위 템플릿 👇

  • 이때 {% block %} {% endblock %} 태그 안에는 하위 템플릿의 내용이 삽입됨.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <link rel="stylesheet" href="style.css">
      <title>{% block title %}My amazing site{% endblock %}</title>
    </head>
    
    <body>
      <div id="content">
          {% block content %}{% endblock %}
      </div>
    </body>
    </html>
  • 상속을 받는 하위 템플릿👇

  • 기본적으로 base.html이나 nav.html에 정의를 해서 하위 템플릿에서 extends태그('확장의 의미')를 통해 -> {% extends "base.html" %} 상속받음.

  • 블록 태그 안에 있는 내용이 화면에 출력

    {% extends "base.html" %}
    
    {% block title %}My amazing blog{% endblock %}
    
    {% block content %}
    {% for entry in blog_entries %}
      <h2>{{ entry.title }}</h2>
      <p>{{ entry.body }}</p>
    {% endfor %}
    {% endblock %}

참고 문헌 -> 장고 공식 문서

반응형