목차
- jinja 소개
- 출력(Output)
- 주석(Comments)
- 조건문(Conditionals)
- 반복문(Loops)
- 필터(Filters)
- 매크로(Macros)
- 템플릿 상속(Template Inheritance)
- 마크업 삽입
- 다른 파일의 템플릿을 삽입 (Include)
- 다른 파일의 코드(예: 변수/매크로/블럭)를 사용 (Import)
jinja 소개
※ 그누보드6에 사용된 jinja2 기준으로 설명.
- Jinja는 Python 기반의 템플릿 엔진임.
- 주로 웹 프레임워크인 Flask와 함께 사용.
- 동적으로 생성되는 텍스트 작성 위한 도구.
출력(Output)
- '변수/표현식 출력' 구문: {{ ... }}
[예제]
- {{ variable_name }}
- {{ 2 + 2 }}
- {{ "Hello " + name }}
- {{ age > 18 }}
주석(Comments)
- 주석은 "코드설명" 또는 "코드실행방지"할 때 사용.
- 주석 구문: {# ... #}
[예제]
{# This is a comment in Jinja template #}
조건문(Conditionals)
- if 조건문 구문: {% if condition %} ... {% endif %}
[예제]
(예제1)
{% if user.role == 'admin' %}
Welcome, Admin!
{% elif user.role == 'user' %}
Welcome, User!
{% else %}
Unknown role
{% endif %}
(예제2)
{% if score >= 90 %}
A
{% elif score >= 80 %}
B
{% else %}
C
{% endif %}
반복문(Loops)
- for...in... 반복문 구문: {% for item in iterable %} ... {% endfor %}
[예제]
<ul>
{% for item in items %}
<li>{{ item }}</li>
{% endfor %}
</ul>
필터(Filters)
- 필터는 변수나 표현식에 적용되어 값을 변환하거나 포맷팅할 때 사용.
- 구문1: {{ variable|filter_name }}
- 구문2: {{ variable|filter_name(parameter) }}
[예제]
- {{ user.name|capitalize }}
- {{ date|format("YYYY-MM-DD") }}
매크로(Macros)
- 매크로는 특정 코드 조각을 재사용하기 위함. (함수 비슷한 역할)
- 정의 구문: {% macro macroName(param1, param2) %} <p>{{ param1 }} - {{ param2 }}</p> {% endmacro %}
- 호출 구문: {{ macroName(value1, value2, ...) }}
PS. 함수처럼 매개변수 기본값 지정 가능. (예) param1="basicValue1"
[예제1] - 기본값 사용 X
{% macro greet(name) %}
Hello, {{ name }}!
{% endmacro %}
{{ greet("홈짱") }}
[예제2] - 기본값 사용 O
{% macro greet(name="회원님") %}
Hello, {{ name }}!
{% endmacro %}
{{ greet() }}
ps. 매크로 호출 시 독립변수가 없어, 기본값이 출력됨.
[예제3] - 매크로 구문 안에 다른 구문(예: 조건문) 사용.
{% macro greet(name) %}
{% if name %}
Hello, {{ name }}!
{% else %}
Hello, Guest!
{% endif %}
{% endmacro %}
{{ greet("홈짱") }}
템플릿 상속(Template Inheritance)
- 기본 템플릿 만들고 다른 템플릿에서 상속해 확장 가능.
- 템플릿 상속을 통해 공통된 레이아웃을 재사용 가능함.
- 구문: {% extends "base_template.html" %}
[예제]
<!-- base_template.html -->
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}Default Title{% endblock %}</title>
</head>
<body>
<div id="content">
{% block content %}{% endblock %}
</div>
</body>
</html>
<!-- child_template.html -->
{% extends "base_template.html" %}
{% block title %}Custom Title{% endblock %}
{% block content %}
<p>This is the content of the child template.</p>
{% endblock %}
마크업 삽입
- jinja가 해석하지 않고 그대로 마크업 코드를 출력시킬 때 사용.
- 구문: {% raw %} ... {% endraw %}
- 템플릿에서 JavaScript 코드나 다른 템플릿 엔진의 문법 등을 그대로 표현하고자 할 때 사용.
- 특정 부분을 다른 프로그래밍 언어나 문법에 대해 유연하게 사용 가능.
- 한 페이지에 너무 많이 사용 시 가독성에 안 좋음.
(예제)
{% raw %}
{{ variable_name }}
{% endraw %}
다른 파일의 템플릿을 삽입 (Include)
- include 구문은 다른 파일은 현재 파일에 삽입할 때 사용.
- 구문: {% include "파일경로" option1 option2 ... %}
1. 파일명 동적 지정 구문.
{% set template_name = "파일경로" %}
{% include template_nameoption1 option2 ... %}
2. include 구문의 옵션 종류
- with 옵션 - 삽입 템플릿에 전달한 변수와 값 지정.
- ignore missing 옵션 - 삽입될 파일이나 변수가 존재 안 해도 오류 발생시키지 않고 무시하지 진행.
- only 옵션 - 삽입 템플릿에 전달하는 변수를 삽입 템플릿에서만 사용 가능하게 함.
with 옵션
삽입되는 파일에 전달한 변수명과 값을 지정.
{% include "header.html" with title="메인 페이지" subtitle="웰컴 페이지" %}
PS. for 반복문 이용해 각 파일별로 다른 변수값을 전달 가능.
{% for user in users %}
{% include "user_card.html" with user=user %}
{% endfor %}
ignore missing 옵션
삽입될 파일이나 변수가 존재 안 해도 오류 발생시키지 않고 무시하지 진행.
{% include "mobile/bbs/menu.html" ignore missing %}
only 옵션
삽입 템플릿에 전달하는 변수를 삽입 템플릿에서만 사용 가능하게 함.
(예) 삽입 템플릿에 전달하는 title 변수는 삽입 템플릿에서만 사용 가능.
<!-- 현재 템플릿 (= 메인 템플릿) -->
<!DOCTYPE html>
<html>
<head>
<title>{{ main_title }}</title>
</head>
<body>
{% include "header.html" with title="메인 페이지" only %}
</body>
</html>
<!-- header.html 템플릿 (= 삽입 템플릿) -->
<header> <h1>{{ title }}</h1></header>
Jinja 템플릿 문법은 이외에도 다양한 기능을 제공. 공식 홈피 참고.
다른 파일의 코드(예: 변수/매크로/블럭)를 사용 (Import)
- 외부에서 정의된 변수, 매크로, 혹은 블록을 현재 템플릿으로 가져오는데 사용됨. (즉, import 구문을 통해 다른 템플릿에서 정의된 코드를 현재 템플릿에서 사용 가능.)
- 임포트 구문: {% import "external_template.html" as alias %}
PS. import 구문 사용 시 주의사항.
- import 구문은 템플릿의 최상위에 위치해야 함.
- import 구문을 사용하면 가져온 템플릿의 모든 코드가 현재 템플릿에 포함됨. 이는 변수, 매크로, 블록 등을 모두 가져옴을 의미.
- import로 가져온 내용을 사용할 때는 앞에 별칭을 붙여주어야 함.
<!-- external_template.html -->
{% macro greet(name) %}
Hello, {{ name }}!
{% endmacro %}
{% set default_name = "Guest" %}
<!-- main_template.html -->
{% import "external_template.html" as ex %}
<!DOCTYPE html>
<html>
<head>
<title>{{ main_title }}</title>
</head>
<body>
<p>{{ ex.greet("홈짱") }}</p>
<!-- external_template.html에 정의된 greet 매크로 호출 -->
<p>{{ ex.default_name }}</p>
<!-- external_template.html에 정의된 default_name 변수 호출 -->
<!-- 나머지 내용 -->
</body>
</html>
