The goal of this tutorial is to provide an introduction to working with templates in Flask using Jinja2, a modern and designer-friendly templating language for Python. This will give you the ability to build more dynamic and complex web applications.
By the end of this tutorial, you will learn:
Prerequisites:
This tutorial assumes you have a basic understanding of Python and Flask. Familiarity with HTML is also beneficial.
Flask uses the Jinja2 template engine to render templates. A template in Flask is simply a text file that can generate any text-based format like XML, CSV, HTML, etc.
To render a template you can use the render_template() method. This function takes the name of a template and a variable list of template arguments and returns the rendered template.
Jinja2 supports template inheritance, which allows you to build a base "skeleton" template that contains all the common elements of your site and defines blocks that child templates can override.
Here is a simple example of how to define and render a template in Flask.
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('home.html')
In this example, home.html is the template file. Flask will look for templates in the templates folder in the same directory as your application.
You can also pass variables to your templates. Here's an example where we pass a title variable to a template.
@app.route('/hello')
def hello():
return render_template('hello.html', title='Hello Flask')
You can then use these variables in your template like this:
<h1>{{ title }}</h1>
Here is an example of how to use template inheritance in Jinja2. First, we define a base template.
<!-- base.html -->
<html>
<head>
<title>{% block title %}{% endblock %}</title>
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>
Then, we define a child template that extends the base template.
<!-- home.html -->
{% extends "base.html" %}
{% block title %}
Home
{% endblock %}
{% block body %}
<h1>Welcome to my home page!</h1>
{% endblock %}
In this tutorial, we've covered the basics of working with templates in Flask using Jinja2. We have learned how to define and render templates, pass variables to templates, and use template inheritance.
For further learning, consider exploring how to use conditionals and loops in Jinja2 templates, as well as how to include and import templates.
Exercise: Create a Flask application that renders a template with a list of names passed as a variable. The template should display each name in a separate line.
Exercise: Create a Flask application with two routes. Each route should render a different template, but both templates should extend the same base template.
@app.route('/names')
def names():
names = ['Alice', 'Bob', 'Charlie']
return render_template('names.html', names=names)
<!-- names.html -->
{% for name in names %}
<p>{{ name }}</p>
{% endfor %}
@app.route('/')
def home():
return render_template('home.html')
@app.route('/about')
def about():
return render_template('about.html')
<!-- base.html -->
<html>
<head>
<title>{% block title %}{% endblock %}</title>
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>
<!-- home.html -->
{% extends "base.html" %}
{% block title %}
Home
{% endblock %}
{% block body %}
<h1>Welcome to my home page!</h1>
{% endblock %}
<!-- about.html -->
{% extends "base.html" %}
{% block title %}
About
{% endblock %}
{% block body %}
<h1>About me</h1>
{% endblock %}