268 lines
25 KiB
HTML
268 lines
25 KiB
HTML
<!DOCTYPE html>
|
||
|
||
<html lang="en" data-content_root="../">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Templates — Flask Documentation (3.2.x)</title>
|
||
<link rel="stylesheet" type="text/css" href="../_static/pygments.css?v=6625fa76" />
|
||
<link rel="stylesheet" type="text/css" href="../_static/flask.css?v=b87c8d14" />
|
||
<script src="../_static/documentation_options.js?v=56528222"></script>
|
||
<script src="../_static/doctools.js?v=9bcbadda"></script>
|
||
<script src="../_static/sphinx_highlight.js?v=dc90522c"></script>
|
||
<script data-project="flask" data-version="3.2.x" src="../_static/describe_version.js?v=fa7f30d0"></script>
|
||
<link rel="icon" href="../_static/shortcut-icon.png"/>
|
||
<link rel="index" title="Index" href="../genindex.html" />
|
||
<link rel="search" title="Search" href="../search.html" />
|
||
<link rel="next" title="Static Files" href="static.html" />
|
||
<link rel="prev" title="Blueprints and Views" href="views.html" />
|
||
</head><body>
|
||
<div class="related" role="navigation" aria-label="Related">
|
||
<h3>Navigation</h3>
|
||
<ul>
|
||
<li class="right" style="margin-right: 10px">
|
||
<a href="../genindex.html" title="General Index"
|
||
accesskey="I">index</a></li>
|
||
<li class="right" >
|
||
<a href="../py-modindex.html" title="Python Module Index"
|
||
>modules</a> |</li>
|
||
<li class="right" >
|
||
<a href="static.html" title="Static Files"
|
||
accesskey="N">next</a> |</li>
|
||
<li class="right" >
|
||
<a href="views.html" title="Blueprints and Views"
|
||
accesskey="P">previous</a> |</li>
|
||
<li class="nav-item nav-item-0"><a href="../index.html">Flask Documentation (3.2.x)</a> »</li>
|
||
<li class="nav-item nav-item-1"><a href="index.html" accesskey="U">Tutorial</a> »</li>
|
||
<li class="nav-item nav-item-this"><a href="">Templates</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="document">
|
||
<div class="documentwrapper">
|
||
<div class="bodywrapper">
|
||
<div class="body" role="main">
|
||
|
||
<section id="templates">
|
||
<h1>Templates<a class="headerlink" href="#templates" title="Link to this heading">¶</a></h1>
|
||
<p>You’ve written the authentication views for your application, but if
|
||
you’re running the server and try to go to any of the URLs, you’ll see a
|
||
<code class="docutils literal notranslate"><span class="pre">TemplateNotFound</span></code> error. That’s because the views are calling
|
||
<a class="reference internal" href="../api.html#flask.render_template" title="flask.render_template"><code class="xref py py-func docutils literal notranslate"><span class="pre">render_template()</span></code></a>, but you haven’t written the templates yet.
|
||
The template files will be stored in the <code class="docutils literal notranslate"><span class="pre">templates</span></code> directory inside
|
||
the <code class="docutils literal notranslate"><span class="pre">flaskr</span></code> package.</p>
|
||
<p>Templates are files that contain static data as well as placeholders
|
||
for dynamic data. A template is rendered with specific data to produce a
|
||
final document. Flask uses the <a class="reference external" href="https://jinja.palletsprojects.com/templates/">Jinja</a> template library to render
|
||
templates.</p>
|
||
<p>In your application, you will use templates to render <a class="reference external" href="https://developer.mozilla.org/docs/Web/HTML">HTML</a> which
|
||
will display in the user’s browser. In Flask, Jinja is configured to
|
||
<em>autoescape</em> any data that is rendered in HTML templates. This means
|
||
that it’s safe to render user input; any characters they’ve entered that
|
||
could mess with the HTML, such as <code class="docutils literal notranslate"><span class="pre"><</span></code> and <code class="docutils literal notranslate"><span class="pre">></span></code> will be <em>escaped</em> with
|
||
<em>safe</em> values that look the same in the browser but don’t cause unwanted
|
||
effects.</p>
|
||
<p>Jinja looks and behaves mostly like Python. Special delimiters are used
|
||
to distinguish Jinja syntax from the static data in the template.
|
||
Anything between <code class="docutils literal notranslate"><span class="pre">{{</span></code> and <code class="docutils literal notranslate"><span class="pre">}}</span></code> is an expression that will be output
|
||
to the final document. <code class="docutils literal notranslate"><span class="pre">{%</span></code> and <code class="docutils literal notranslate"><span class="pre">%}</span></code> denotes a control flow
|
||
statement like <code class="docutils literal notranslate"><span class="pre">if</span></code> and <code class="docutils literal notranslate"><span class="pre">for</span></code>. Unlike Python, blocks are denoted
|
||
by start and end tags rather than indentation since static text within
|
||
a block could change indentation.</p>
|
||
<section id="the-base-layout">
|
||
<h2>The Base Layout<a class="headerlink" href="#the-base-layout" title="Link to this heading">¶</a></h2>
|
||
<p>Each page in the application will have the same basic layout around a
|
||
different body. Instead of writing the entire HTML structure in each
|
||
template, each template will <em>extend</em> a base template and override
|
||
specific sections.</p>
|
||
<div class="literal-block-wrapper docutils container" id="id1">
|
||
<div class="code-block-caption"><span class="caption-text"><code class="docutils literal notranslate"><span class="pre">flaskr/templates/base.html</span></code></span><a class="headerlink" href="#id1" title="Link to this code">¶</a></div>
|
||
<div class="highlight-html+jinja notranslate"><div class="highlight"><pre><span></span><span class="cp"><!doctype html></span>
|
||
<span class="p"><</span><span class="nt">title</span><span class="p">></span><span class="cp">{%</span> <span class="k">block</span> <span class="nv">title</span> <span class="cp">%}{%</span> <span class="k">endblock</span> <span class="cp">%}</span> - Flaskr<span class="p"></</span><span class="nt">title</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"</span><span class="cp">{{</span> <span class="nv">url_for</span><span class="o">(</span><span class="s1">'static'</span><span class="o">,</span> <span class="nv">filename</span><span class="o">=</span><span class="s1">'style.css'</span><span class="o">)</span> <span class="cp">}}</span><span class="s">"</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">nav</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">h1</span><span class="p">></span>Flaskr<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">ul</span><span class="p">></span>
|
||
<span class="cp">{%</span> <span class="k">if</span> <span class="nv">g.user</span> <span class="cp">%}</span>
|
||
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">span</span><span class="p">></span><span class="cp">{{</span> <span class="nv">g.user</span><span class="o">[</span><span class="s1">'username'</span><span class="o">]</span> <span class="cp">}}</span><span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"</span><span class="cp">{{</span> <span class="nv">url_for</span><span class="o">(</span><span class="s1">'auth.logout'</span><span class="o">)</span> <span class="cp">}}</span><span class="s">"</span><span class="p">></span>Log Out<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
<span class="cp">{%</span> <span class="k">else</span> <span class="cp">%}</span>
|
||
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"</span><span class="cp">{{</span> <span class="nv">url_for</span><span class="o">(</span><span class="s1">'auth.register'</span><span class="o">)</span> <span class="cp">}}</span><span class="s">"</span><span class="p">></span>Register<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"</span><span class="cp">{{</span> <span class="nv">url_for</span><span class="o">(</span><span class="s1">'auth.login'</span><span class="o">)</span> <span class="cp">}}</span><span class="s">"</span><span class="p">></span>Log In<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
<span class="cp">{%</span> <span class="k">endif</span> <span class="cp">%}</span>
|
||
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||
<span class="p"></</span><span class="nt">nav</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">section</span> <span class="na">class</span><span class="o">=</span><span class="s">"content"</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">header</span><span class="p">></span>
|
||
<span class="cp">{%</span> <span class="k">block</span> <span class="nv">header</span> <span class="cp">%}{%</span> <span class="k">endblock</span> <span class="cp">%}</span>
|
||
<span class="p"></</span><span class="nt">header</span><span class="p">></span>
|
||
<span class="cp">{%</span> <span class="k">for</span> <span class="nv">message</span> <span class="k">in</span> <span class="nv">get_flashed_messages</span><span class="o">()</span> <span class="cp">%}</span>
|
||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"flash"</span><span class="p">></span><span class="cp">{{</span> <span class="nv">message</span> <span class="cp">}}</span><span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
<span class="cp">{%</span> <span class="k">endfor</span> <span class="cp">%}</span>
|
||
<span class="cp">{%</span> <span class="k">block</span> <span class="nv">content</span> <span class="cp">%}{%</span> <span class="k">endblock</span> <span class="cp">%}</span>
|
||
<span class="p"></</span><span class="nt">section</span><span class="p">></span>
|
||
</pre></div>
|
||
</div>
|
||
</div>
|
||
<p><a class="reference internal" href="../api.html#flask.g" title="flask.g"><code class="xref py py-data docutils literal notranslate"><span class="pre">g</span></code></a> is automatically available in templates. Based on if
|
||
<code class="docutils literal notranslate"><span class="pre">g.user</span></code> is set (from <code class="docutils literal notranslate"><span class="pre">load_logged_in_user</span></code>), either the username
|
||
and a log out link are displayed, or links to register and log in
|
||
are displayed. <a class="reference internal" href="../api.html#flask.url_for" title="flask.url_for"><code class="xref py py-func docutils literal notranslate"><span class="pre">url_for()</span></code></a> is also automatically available, and is
|
||
used to generate URLs to views instead of writing them out manually.</p>
|
||
<p>After the page title, and before the content, the template loops over
|
||
each message returned by <a class="reference internal" href="../api.html#flask.get_flashed_messages" title="flask.get_flashed_messages"><code class="xref py py-func docutils literal notranslate"><span class="pre">get_flashed_messages()</span></code></a>. You used
|
||
<a class="reference internal" href="../api.html#flask.flash" title="flask.flash"><code class="xref py py-func docutils literal notranslate"><span class="pre">flash()</span></code></a> in the views to show error messages, and this is the code
|
||
that will display them.</p>
|
||
<p>There are three blocks defined here that will be overridden in the other
|
||
templates:</p>
|
||
<ol class="arabic simple">
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">{%</span> <span class="pre">block</span> <span class="pre">title</span> <span class="pre">%}</span></code> will change the title displayed in the
|
||
browser’s tab and window title.</p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">{%</span> <span class="pre">block</span> <span class="pre">header</span> <span class="pre">%}</span></code> is similar to <code class="docutils literal notranslate"><span class="pre">title</span></code> but will change the
|
||
title displayed on the page.</p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">{%</span> <span class="pre">block</span> <span class="pre">content</span> <span class="pre">%}</span></code> is where the content of each page goes, such
|
||
as the login form or a blog post.</p></li>
|
||
</ol>
|
||
<p>The base template is directly in the <code class="docutils literal notranslate"><span class="pre">templates</span></code> directory. To keep
|
||
the others organized, the templates for a blueprint will be placed in a
|
||
directory with the same name as the blueprint.</p>
|
||
</section>
|
||
<section id="register">
|
||
<h2>Register<a class="headerlink" href="#register" title="Link to this heading">¶</a></h2>
|
||
<div class="literal-block-wrapper docutils container" id="id2">
|
||
<div class="code-block-caption"><span class="caption-text"><code class="docutils literal notranslate"><span class="pre">flaskr/templates/auth/register.html</span></code></span><a class="headerlink" href="#id2" title="Link to this code">¶</a></div>
|
||
<div class="highlight-html+jinja notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">extends</span> <span class="s1">'base.html'</span> <span class="cp">%}</span>
|
||
|
||
<span class="cp">{%</span> <span class="k">block</span> <span class="nv">header</span> <span class="cp">%}</span>
|
||
<span class="p"><</span><span class="nt">h1</span><span class="p">></span><span class="cp">{%</span> <span class="k">block</span> <span class="nv">title</span> <span class="cp">%}</span>Register<span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span><span class="p"></</span><span class="nt">h1</span><span class="p">></span>
|
||
<span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span>
|
||
|
||
<span class="cp">{%</span> <span class="k">block</span> <span class="nv">content</span> <span class="cp">%}</span>
|
||
<span class="p"><</span><span class="nt">form</span> <span class="na">method</span><span class="o">=</span><span class="s">"post"</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"username"</span><span class="p">></span>Username<span class="p"></</span><span class="nt">label</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"username"</span> <span class="na">id</span><span class="o">=</span><span class="s">"username"</span> <span class="na">required</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"password"</span><span class="p">></span>Password<span class="p"></</span><span class="nt">label</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"password"</span> <span class="na">name</span><span class="o">=</span><span class="s">"password"</span> <span class="na">id</span><span class="o">=</span><span class="s">"password"</span> <span class="na">required</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"submit"</span> <span class="na">value</span><span class="o">=</span><span class="s">"Register"</span><span class="p">></span>
|
||
<span class="p"></</span><span class="nt">form</span><span class="p">></span>
|
||
<span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span>
|
||
</pre></div>
|
||
</div>
|
||
</div>
|
||
<p><code class="docutils literal notranslate"><span class="pre">{%</span> <span class="pre">extends</span> <span class="pre">'base.html'</span> <span class="pre">%}</span></code> tells Jinja that this template should
|
||
replace the blocks from the base template. All the rendered content must
|
||
appear inside <code class="docutils literal notranslate"><span class="pre">{%</span> <span class="pre">block</span> <span class="pre">%}</span></code> tags that override blocks from the base
|
||
template.</p>
|
||
<p>A useful pattern used here is to place <code class="docutils literal notranslate"><span class="pre">{%</span> <span class="pre">block</span> <span class="pre">title</span> <span class="pre">%}</span></code> inside
|
||
<code class="docutils literal notranslate"><span class="pre">{%</span> <span class="pre">block</span> <span class="pre">header</span> <span class="pre">%}</span></code>. This will set the title block and then output
|
||
the value of it into the header block, so that both the window and page
|
||
share the same title without writing it twice.</p>
|
||
<p>The <code class="docutils literal notranslate"><span class="pre">input</span></code> tags are using the <code class="docutils literal notranslate"><span class="pre">required</span></code> attribute here. This tells
|
||
the browser not to submit the form until those fields are filled in. If
|
||
the user is using an older browser that doesn’t support that attribute,
|
||
or if they are using something besides a browser to make requests, you
|
||
still want to validate the data in the Flask view. It’s important to
|
||
always fully validate the data on the server, even if the client does
|
||
some validation as well.</p>
|
||
</section>
|
||
<section id="log-in">
|
||
<h2>Log In<a class="headerlink" href="#log-in" title="Link to this heading">¶</a></h2>
|
||
<p>This is identical to the register template except for the title and
|
||
submit button.</p>
|
||
<div class="literal-block-wrapper docutils container" id="id3">
|
||
<div class="code-block-caption"><span class="caption-text"><code class="docutils literal notranslate"><span class="pre">flaskr/templates/auth/login.html</span></code></span><a class="headerlink" href="#id3" title="Link to this code">¶</a></div>
|
||
<div class="highlight-html+jinja notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">extends</span> <span class="s1">'base.html'</span> <span class="cp">%}</span>
|
||
|
||
<span class="cp">{%</span> <span class="k">block</span> <span class="nv">header</span> <span class="cp">%}</span>
|
||
<span class="p"><</span><span class="nt">h1</span><span class="p">></span><span class="cp">{%</span> <span class="k">block</span> <span class="nv">title</span> <span class="cp">%}</span>Log In<span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span><span class="p"></</span><span class="nt">h1</span><span class="p">></span>
|
||
<span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span>
|
||
|
||
<span class="cp">{%</span> <span class="k">block</span> <span class="nv">content</span> <span class="cp">%}</span>
|
||
<span class="p"><</span><span class="nt">form</span> <span class="na">method</span><span class="o">=</span><span class="s">"post"</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"username"</span><span class="p">></span>Username<span class="p"></</span><span class="nt">label</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"username"</span> <span class="na">id</span><span class="o">=</span><span class="s">"username"</span> <span class="na">required</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"password"</span><span class="p">></span>Password<span class="p"></</span><span class="nt">label</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"password"</span> <span class="na">name</span><span class="o">=</span><span class="s">"password"</span> <span class="na">id</span><span class="o">=</span><span class="s">"password"</span> <span class="na">required</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"submit"</span> <span class="na">value</span><span class="o">=</span><span class="s">"Log In"</span><span class="p">></span>
|
||
<span class="p"></</span><span class="nt">form</span><span class="p">></span>
|
||
<span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span>
|
||
</pre></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="register-a-user">
|
||
<h2>Register A User<a class="headerlink" href="#register-a-user" title="Link to this heading">¶</a></h2>
|
||
<p>Now that the authentication templates are written, you can register a
|
||
user. Make sure the server is still running (<code class="docutils literal notranslate"><span class="pre">flask</span> <span class="pre">run</span></code> if it’s not),
|
||
then go to <a class="reference external" href="http://127.0.0.1:5000/auth/register">http://127.0.0.1:5000/auth/register</a>.</p>
|
||
<p>Try clicking the “Register” button without filling out the form and see
|
||
that the browser shows an error message. Try removing the <code class="docutils literal notranslate"><span class="pre">required</span></code>
|
||
attributes from the <code class="docutils literal notranslate"><span class="pre">register.html</span></code> template and click “Register”
|
||
again. Instead of the browser showing an error, the page will reload and
|
||
the error from <a class="reference internal" href="../api.html#flask.flash" title="flask.flash"><code class="xref py py-func docutils literal notranslate"><span class="pre">flash()</span></code></a> in the view will be shown.</p>
|
||
<p>Fill out a username and password and you’ll be redirected to the login
|
||
page. Try entering an incorrect username, or the correct username and
|
||
incorrect password. If you log in you’ll get an error because there’s
|
||
no <code class="docutils literal notranslate"><span class="pre">index</span></code> view to redirect to yet.</p>
|
||
<p>Continue to <a class="reference internal" href="static.html"><span class="doc">Static Files</span></a>.</p>
|
||
</section>
|
||
</section>
|
||
|
||
|
||
<div class="clearer"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span id="sidebar-top"></span>
|
||
<div class="sphinxsidebar" role="navigation" aria-label="Main">
|
||
<div class="sphinxsidebarwrapper">
|
||
|
||
|
||
<p class="logo"><a href="../index.html">
|
||
<img class="logo" src="../_static/flask-vertical.png" alt="Logo of Flask"/>
|
||
</a></p>
|
||
|
||
|
||
<h3>Contents</h3>
|
||
<ul>
|
||
<li><a class="reference internal" href="#">Templates</a><ul>
|
||
<li><a class="reference internal" href="#the-base-layout">The Base Layout</a></li>
|
||
<li><a class="reference internal" href="#register">Register</a></li>
|
||
<li><a class="reference internal" href="#log-in">Log In</a></li>
|
||
<li><a class="reference internal" href="#register-a-user">Register A User</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<h3>Navigation</h3>
|
||
<ul>
|
||
<li><a href="../index.html">Overview</a>
|
||
<ul>
|
||
<li><a href="index.html">Tutorial</a>
|
||
<ul>
|
||
<li>Previous: <a href="views.html" title="previous chapter">Blueprints and Views</a>
|
||
<li>Next: <a href="static.html" title="next chapter">Static Files</a></ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<search id="searchbox" style="display: none" role="search">
|
||
<h3 id="searchlabel">Quick search</h3>
|
||
<div class="searchformwrapper">
|
||
<form class="search" action="../search.html" method="get">
|
||
<input type="text" name="q" aria-labelledby="searchlabel" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"/>
|
||
<input type="submit" value="Go" />
|
||
</form>
|
||
</div>
|
||
</search>
|
||
<script>document.getElementById('searchbox').style.display = "block"</script><div id="ethical-ad-placement"></div>
|
||
</div>
|
||
</div>
|
||
<div class="clearer"></div>
|
||
</div>
|
||
<div class="footer" role="contentinfo">
|
||
© Copyright 2010 Pallets.
|
||
Created using <a href="https://www.sphinx-doc.org/">Sphinx</a> 8.1.3.
|
||
</div>
|
||
</body>
|
||
</html>
|