Flask Templates

Templates make it easy to write valid HTML. Flask supports my favourite template engine, Jinja2.

Prerequisites: Hello Flask - Write a Python Web App and Linux command line and administration.

Always start from Hello world. Once that's working, we can add HTML templates.

Directory Structure # ↑

Directory structure is pretty simple. HTML templates to to templates/ folder.

$ tree -F
.
├── templates/
│   └── base.html
└── templates-flask.py

Templates-flask.py # ↑

Our app has just two new lines compared to "hello world".

#!/usr/bin/python3
"Return HTML templated page"

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def templated():
	return render_template("base.html", greeting="Hello Templates!")

app.run(debug=True)

Let's have a look at those new lines

from flask import Flask, render_template

We must import what we use. Render template is imported to main namespace, so we can call it just "render_template()" instead of "flask.render_template".

return render_template("base.html", greeting="Hello Templates!")

In "hello world", we just returned a string 'return "Hello"'. Writing a whole HTML5 page like that would be tedious. Here, we have the HTML template in a separate file.

We declare a new variable called "greeting" for use in the template.

templates/base.html # ↑

By default, templates go to templates/ folder.

/2020/flask-templates/02-templates/templates/base.html

<!doctype html>
<html>
	<head>
		<title>Hello Templates</title>
		<meta charset="utf-8">
	</head>
	<body>
		<h1>{{ greeting }}</h1>
		<p>
			Learn Flask templates at  
			<a href="http://TeroKarvinen.com">TeroKarvinen.com.</a>
		</p>
	</body>
</html>

It's just plain HTML, except for the variables.

<h1>{{ greeting }}</h1>

Variables are marked with curly brackets, also known as handlebars, mustache, curly braces (fi: aaltosulkeet). This {{ greeting }} is replaced with the value of the greeting, in this case "Hello Variables!".

Let's Run # ↑

$ python3 flask-templates.py

Browse to http://localhost:5000.

That's it. You're now using templates.

What Next? More Template Tricks # ↑

Flask uses my favourite template engine, Jinja2. It has support for a couple of more useful things, which you can learn from Jinja2 documenation.

• Template inheritage. Most of my templates are short, as they inherit the HTML5 boilerplate from base.html. {% extends "base.html" %} {% block content %} Hello {% endblock %}
• Control structures: {% for book in books %} {{ book }} {{ endfor }}
• Filters: {{ message.body|truncate(160) }}

Adminstrivia # ↑

This page has been updated.