해당 글은 공부를 위해 https://flask.palletsprojects.com/en/1.1.x/tutorial/templates/ 을 번역한 글입니다.
Templates
응용 프로그램에 대한 인증 View를 작성했지만 서버를 실행하고 URL로 이동하려고 하면 TemplateNotFound 오류가 표시된다.
View에서 render_template()라고 하는데 아직 템플릿을 작성하지 않았기 때문이다.
템플릿 파일은 Flask Package 내의 templates directory에 저장될 것이다.
템플릿은 동적 데이터를 위한 자리 표시자뿐만 아니라 정적 데이터를 포함하는 파일이다.템플릿은 최종 문서를 작성하기 위해 특정 데이터와 함께 렌더링된다.Flask는 Jinja 템플릿 라이브러리를 사용하여 템플릿을 렌더링한다.
응용 프로그램에서 사용자의 브라우저에 표시될 HTML을 렌더링하기 위해 템플릿을 사용할 것이다.
Flask에서 Jinja는 HTML 템플릿으로 렌더링되는 모든 데이터를 자동으로 escaping 하도록 구성된다.이것은 사용자 입력을 렌더링하는 것이 안전하다는 것을 의미한다.
그들이 입력한 문자는 브라우저에서 같은 것처럼 보이지만 원하지 않는 효과를 일이키지 않는 안전한 값으로 유출될 것이다.
Jinja는 대부분 Python처럼 보이고 행동한다. 특수 구분 기호는 템플릿의 정적 데이터와 Jinja 구문을 구분하는 데 사용된다.
{{ }} 사이의 어떤 것이든 최종 문서에 출력될 표현이다.
{% %} 는 if 와 for 같은 제어 흐름문을 나타낸다.
Python과 달리 블록 내의 정적 텍스트가 들여쓰기를 변경할 수 있기 때문에 들여쓰기가 아닌 시작 태그와 끝 태그로 블록을 나타낸다.
기본 레이아웃
응용 프로그램의 각 페이지는 다른 본문 주위에 동일한 기본 레이아웃을 갖는다.
각 템플릿에 전체 HTML 구조를 작성하는 대신 각 템플릿은 기본 템플릿을 확장하고 특정 색션을 재정의 한다.
# flaskr/templates/base.html
<!doctype html>
<title>{% block title %}{% endblock %} - Flaskr</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<nav>
<h1>Flaskr</h1>
<ul>
{% if g.user %}
<li><span>{{ g.user['username'] }}</span>
<li><a href="{{ url_for('auth.logout') }}">Log Out</a>
{% else %}
<li><a href="{{ url_for('auth.register') }}">Register</a>
<li><a href="{{ url_for('auth.login') }}">Log In</a>
{% endif %}
</ul>
</nav>
<section class="content">
<header>
{% block header %}{% endblock %}
</header>
{% for message in get_flashed_messages() %}
<div class="flash">{{ message }}</div>
{% endfor %}
{% block content %}{% endblock %}
</section>g는 템플릿을 자동으로 사용할 수 있다.g.user가 설정된 경우, 사용자 이름과 로그아웃 링크가 표시되거나 Register 및 Login 링크가 표시된다.
url_for()도 자동으로 사용할 수 있으며, 수동으로 작성하지 않고 View에 대한 URL 을 생성하는데 사용된다.
페이지 제목 뒤에, 내용 앞에, 템플릿은 get_flashed_messages()로 반환된 각 메시지에 대해 반복한다.오류 메시지를 표시하기 위해 보기에서 flash()를 사용했으며 , 이것이 오류 메시지를 표시하는 코드이다.
여기에 다른 템플릿에서 재정의 될 세 개의 블록이 정의되어 있다.
1. {% block title %} 브라우저의 탭에 표시되는 제목과 창 제목을 변경한다.
2. {% block header %} 유사 title 하지만 페이지에 표시되는 제목을 변경한다.
3. {% block content %} 로그인 양식이나 블로그 게시물과 같은 각 페이지의 내용이 있는 곳이다.
기본 템플릿은 templates 디렉토리에 직접 있다.
다른 구성 요소를 유지하기 위해 Blueprint의 템플릿은 Bluprint와 이름이 같은 디렉토리에 배치된다.
Register (등록)
# flaskr/templates/auth/register.html
{% extends 'base.html' %}
{% block header %}
<h1>{% block title %}Register{% endblock %}</h1>
{% endblock %}
{% block content %}
<form method="post">
<label for="username">Username</label>
<input name="username" id="username" required>
<label for="password">Password</label>
<input type="password" name="password" id="password" required>
<input type="submit" value="Register">
</form>
{% endblock %}{% extends 'base.html' %} 은 Jinja에게 이 템플릿이 기본 템플릿의 블록을 대체해야한다고 알려준다.
렌더링 된 모든 콘텐츠는 기본 템플릿의 블록을 재정의하는 {% block %} 태그 내부에 표시되어야 한다.
여기서 사용되는 유용한 패턴 {% block title %} 을 {% block header %} 안에 배치하는 것이다.이렇게 하면 제목 블록을 설정한 다음 그 값을 헤더 블록으로 출력하여 창과 페이지 모두 두 번 쓰지 않고도 동일한 제목을 공유할 수 있다.
입력 태그는 여기서 필요한 속성을 사용하고 있다.
이것은 브라우저에게 해당 필드가 입력될 때까지 양식을 제출하지 말라고 말한다.
사용자가 해당 속성을 지원하지 않는 이전 브라우저를 사용중이거나, 요청을 하기 위해 이외의 다른 브라우저를 사용하는 경우, Flask View에서 데이터의 유효성을 검사해야한다.
클라이언트가 일부 유효성 검사를 수행하더라도 서버에 있는 데이터를 항상 완전히 검증하는 것이 중요하다.
Login
제목과 제출 버튼을 제외하고는 Register 템플릿과 동일하다.
# flaskr/templates/auth/login.html
{% extends 'base.html' %}
{% block header %}
<h1>{% block title %}Log In{% endblock %}</h1>
{% endblock %}
{% block content %}
<form method="post">
<label for="username">Username</label>
<input name="username" id="username" required>
<label for="password">Password</label>
<input type="password" name="password" id="password" required>
<input type="submit" value="Log In">
</form>
{% endblock %}