목차
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) %}
[예제2] - 기본값 사용 O {% macro greet(name="회원님") %} {% endmacro %} {{ greet() }}
ps. 매크로 호출 시 독립변수가 없어, 기본값이 출력됨.
[예제3] - 매크로 구문 안에 다른 구문(예: 조건문) 사용.
{% 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_name option1 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 변수는 삽입 템플릿에서만 사용 가능.
<!-- 현재 템플릿 (= 메인 템플릿) --> {{ main_title }} </title> {% include "header.html" with title="메인 페이지" only %}
<!-- header.html 템플릿 (= 삽입 템플릿) --> {{ 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>
