mirror of https://github.com/mitsuhiko/flask.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
3.7 KiB
113 lines
3.7 KiB
.. _tutorial-templates: |
|
|
|
Step 7: The Templates |
|
===================== |
|
|
|
Now it is time to start working on the templates. As you may have |
|
noticed, if you make requests with the app running, you will get |
|
an exception that Flask cannot find the templates. The templates |
|
are using `Jinja2`_ syntax and have autoescaping enabled by |
|
default. This means that unless you mark a value in the code with |
|
:class:`~flask.Markup` or with the ``|safe`` filter in the template, |
|
Jinja2 will ensure that special characters such as ``<`` or ``>`` are |
|
escaped with their XML equivalents. |
|
|
|
We are also using template inheritance which makes it possible to reuse |
|
the layout of the website in all pages. |
|
|
|
Create the follwing three HTML files and place them in the |
|
:file:`templates` folder: |
|
|
|
.. _Jinja2: http://jinja.pocoo.org/docs/templates |
|
|
|
layout.html |
|
----------- |
|
|
|
This template contains the HTML skeleton, the header and a link to log in |
|
(or log out if the user was already logged in). It also displays the |
|
flashed messages if there are any. The ``{% block body %}`` block can be |
|
replaced by a block of the same name (``body``) in a child template. |
|
|
|
The :class:`~flask.session` dict is available in the template as well and |
|
you can use that to check if the user is logged in or not. Note that in |
|
Jinja you can access missing attributes and items of objects / dicts which |
|
makes the following code work, even if there is no ``'logged_in'`` key in |
|
the session: |
|
|
|
.. sourcecode:: html+jinja |
|
|
|
<!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 |
|
----------------- |
|
|
|
This template extends the :file:`layout.html` template from above to display the |
|
messages. Note that the ``for`` loop iterates over the messages we passed |
|
in with the :func:`~flask.render_template` function. Notice that the form is |
|
configured to submit to the `add_entry` view function and use ``POST`` as |
|
HTTP method: |
|
|
|
.. sourcecode:: html+jinja |
|
|
|
{% 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 }}</li> |
|
{% else %} |
|
<li><em>Unbelievable. No entries here so far</em></li> |
|
{% endfor %} |
|
</ul> |
|
{% endblock %} |
|
|
|
login.html |
|
---------- |
|
|
|
This is the login template, which basically just displays a form to allow |
|
the user to login: |
|
|
|
.. sourcecode:: html+jinja |
|
|
|
{% 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 %} |
|
|
|
Continue with :ref:`tutorial-css`.
|
|
|