스텝 6: 템플릿¶
이제 우리는 템플릿을 작업해야 한다. 만약 우리가 지금까지 만든 flaskr에
URL을 요청하는 경우 Flask는 템플릿(templates)을 찾을 수 없다는 예외를 발생시킬것이다.
템플릿들은 Jinja2 문법을 사용하고 있고 autoescaping 가 기본으로 활성화되있다.
이 의미는 개발자가 직접 :class”~flask.Markup 이나 혹은 |safe
필터를 템플릿에서
직접 관리하지 않아도 된다는 뜻이다.
Jinja2는 <
혹은 >
와 같은 특별한 문자들에 대하여 XML에서 표기하는 동등한 표기법으로
탈피할 수 있도록 보장한다.
우리는 또한 가능한 모든 페이지에서 웹 사이트의 레이아웃을 재사용 할 수있도록 템플릿 상속을 할 수 있도록 하고 있다.
다음의 템플릿을 templates 폴더에 넣도록 하자:
layout.html¶
이 템플릿은 HTML의 뼈대(skeleton)을, 헤더 및 로그인링크 (혹은 사용자가 로그인
한 경우에는 로그아웃 링크)들을 포함하고 있다. 또한 상황에 딸라 메시지를 보여주기도 한다.
부모 템플릿의 {% block body %}
블럭은 이를 상속받은 후손 템플릿에서 동일한 이름의 블럭위치에
치환된다.
session
dict 객체도 템플릿안에서 사용 가능할 수 있으며 이를 이용해
사용자가 로그인되어 있는지 그렇지 않은지 확인 할 수 있다.
Jinja에서는 세션에서 키(key)가 없는 경우에도 제공된 dict 객체의 누락된 속성값이나 객체에
접근이 가능하다. 세션곅체에 'logged_in'
키가 없는 경우에도 가능하다.
<!doctype html>
<title>Flaskr</title>
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
<div class=page>
<h1>Flaskr</h1>
<div class=metanav>
{% if not session.logged_in %}
<a href="{{ url_for('login') }}">log in</a>
{% else %}
<a href="{{ url_for('logout') }}">log out</a>
{% endif %}
</div>
{% for message in get_flashed_messages() %}
<div class=flash>{{ message }}</div>
{% endfor %}
{% block body %}{% endblock %}
</div>
show_entries.html¶
이 템플릿은 layout.html 템플릿을 상속받는 메시지를 보여주는 템플릿이다.
유의할 점은 for 루프는 우리가 render_template()
함수에서
전달한 메시지에들 만큼 반복된다는 점이다.
우리는 또한 form이 전송될때 add_entry 함수가 HTTP`의 `POST 메소드를 통해서
전송된다는 것을 이야기 해둔다.:
{% extends "layout.html" %}
{% block body %}
{% if session.logged_in %}
<form action="{{ url_for('add_entry') }}" method=post class=add-entry>
<dl>
<dt>Title:
<dd><input type=text size=30 name=title>
<dt>Text:
<dd><textarea name=text rows=5 cols=40></textarea>
<dd><input type=submit value=Share>
</dl>
</form>
{% endif %}
<ul class=entries>
{% for entry in entries %}
<li><h2>{{ entry.title }}</h2>{{ entry.text|safe }}
{% else %}
<li><em>Unbelievable. No entries here so far</em>
{% endfor %}
</ul>
{% endblock %}
login.html¶
마지막으로 로그인 템플릿은 기본적으로 사용자가 로그인을 할 수 있도록 보여주는 form 이다. :
{% extends "layout.html" %}
{% block body %}
<h2>Login</h2>
{% if error %}<p class=error><strong>Error:</strong> {{ error }}{% endif %}
<form action="{{ url_for('login') }}" method=post>
<dl>
<dt>Username:
<dd><input type=text name=username>
<dt>Password:
<dd><input type=password name=password>
<dd><input type=submit value=Login>
</dl>
</form>
{% endblock %}
다음 섹션에서 계속 스텝 7: 스타일 추가하기.