Jinja란
- Flask의 HTML 렌더링은 상황에 따라 다른 페이지를 보여주기 힘들다
- 이런 경우 사용하는 것이 Jinja와 같은 웹 탬플릿 엔진
(탬플릿 엔진은 맞춤형 웹페이지 생성을 도와준다.)
Jinja 표현
- HTML에서 Jinja를 사용할시 {}를 이용한다
<body>
<h1>{{ title }}</h1>
</body>- {% ... %}
if나 for과 같은 구문에 주로 사용된다. - {{ ... }}
변수처럼 탬플릿 결과에 출력할 값이다. - {# ... #}
주석처리에 이용된다.
Flask 에서 Jinja 로 변수넘기기
- Jinja에 변수 전달을 앞서 정리한 Flask의 render_template으로 할 수 있다.
@app.route('/')
def index():
apple = 'red'
apple_count = 10
return render_template('index.html', fruit_color=apple, number=apple_count)- 혹은 HTML에서 지정해준다.
<body>
<h2>Apple is {{ fruit_color }}</h2>
<h2>{{ number }} 개의 과일이 있습니다.</h2>
</body>Jinja 기능
- 객체 태그
변수를 넘겨주는 방법
{{ var }}딕셔너리에서 세부선택은 .
# fruit 딕셔너리의 apple 키의 값만 출력
{{ fruits.apple }}리스트에서 세부선택은 []
{{ vegetables[0] }}- if 구문
파이썬과 동일하게 if, elif, else 사용가능하다.
{% if True %}
<h1>It is True</h1>
{% endif %}- for 구문
HTML 엘리먼트를 반복사용할 때 많이 사용한다.
{% for item in item_list %}
<p>{{ item }}</p>
{% endfor %}loop속성을 통해 다양한 반복 사용가능하다.
{% for item in item_list %}
# 0부터 1씩 증가시킨다.
<p>인덱스 : {{ loop.index0 }}, 이름 : {{ item }}</p>
{% endfor %}Jinja 상속
반복적으로 사용되는 부분들을 하나로 묶어서 사용하게한다.
- 자식상속
부모-자식 관계의 형성이다.
부모 템플릿의 경로를 자식 템플릿 파일의 첫 줄에 적어준다.
# 상속은 여러번 가능하다.
{% extends "base.html" %}- 진자블록
Jinja는 상속시 부모,자식 구분이 없다.
따라서 상속된 파일에서 변경가능한 HTML 블록을 지정한다.
{% block %}, {% endblock %}을 이용한다.
<head>
# head는 블록의 이름이다. 겹치면 안됨
{% block head %}
<title>{% block title %}{% endblock %} - My Webpage</title>
{% endblock %}
</head>자식이 부모블록의 내용을 이용할시 super를 이용한다.
(2번 상속된 파일의 가장 상위 부모내용 접근시 super.super()이용한다.)
{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block head %}
{{ super() }}
<h1>자식 블록에서 출력한 h1 입니다.</h1>
{% endblock %}
For DE, DA / There is no royal road to learning