Шаг 6: Шаблоны¶
Теперь нам следует поработать над шаблонами. Если мы будем сейчас
запрашивать URL, мы получим лишь исключения, означающие, что Flask не
может найти шаблоны. Шаблоны используют синтаксис Jinja2 и по
умолчанию имеют автоматическую обработку специальных последовательностей
(autoescaping). Это означает, что если вы в шаблоне вы не пометили
значение с помощью Markup
или с помощью фильтра
|safe
, Jinja2 гарантирует, что особые символы, например <
или
>
, будут заменены спецпоследовательностями их XML-эквивалентов.
Также мы используем наследование шаблонов, что делает возможным повторно использовать макет веб-сайта на всех страницах.
Поместите в папку templates следующие шаблоны:
layout.html¶
Этот шаблон содержит скелет HTML, заголовок и ссылку для входа на сайт
(или выхода, если пользователь уже вошёл). Он также отображает всплывающие
сообщения, если они есть. Блок {% block body %}
может быть заменён в
дочернем шаблоне на блок с тем же именем (body
).
Также из шаблона доступен словарь session
, и вы можете
его использовать для проверки - вошёл ли пользователь или нет. Заметим,
что в Jinja вы можете иметь доступ к отсутствующим атрибутам и элементам
объектов / словарей, что делает следующий код работоспособным, даже при
отсутствии в сессии ключа '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()
. Также мы
сообщаем форме, чтобы она предала данные вашей функции add_entry,
используя при этом POST в качестве метода HTTP:
{% 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¶
Наконец, шаблон для осуществления входа, который просто-напросто отображает форму, позволяющую пользователю войти под своим логином:
{% 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: Добавление стиля.