The last tutorial taught us how to set up some routes in Flask and in this tutorial we’ll see how page templates work in Flask. The original routes we created returned simple strings to the web browser when visiting a given route. Strings are not enough to create a website, we need things like HTML, CSS, and maybe some JavaScript to create more robust pages for our users. It’s not feasible to put all of that code into one long string and return that. This is where page templates come in when using Flask. Page templates will allow us to store all the HTML and associated data in a separate HTML file that can then be loaded via one line. Let’s learn a bit more about Jinja Page Templates in Flask.
Where To Put Flask Templates
In order to use page templates with your Flask application, you need to store them somewhere. This is done by creating a templates directory in the same directory that holds the app.py file. In our example, this is in a folder named flask-tutorial so that is where we will create this directory now.
How To Make a Flask HTML Template
Inside of the templates folder, we can create and store the HTML files that will act as the templates for the application. Let’s go ahead and create a new home.html file inside of the templates directory now.
We can add some simple HTML markup to this new home.html file like so.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Homepage</title>
</head>
<body>
<h1>Hello Home Page!</h1>
</body>
</html>
How To Render A Flask Template
Now that we have an actual HTML file with some markup in it, how can we render or display that template to a user of the website? We can do this by changing the code in our app.py file to make use of the render_template() function. In the following code snippet, we import the needed function and then use it in our home route. Note that the render_template() function expects to be passed the name of the template that we want to render. In our case, that means we are passing home.html to the render_template() function.
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('home.html')
@app.route('/about')
def about():
return 'This is a tutorial Flask app on serving routes'
Looking Good!
Jinja Templates
This templating functionality is provided by Jinja, which is a powerful template engine that was created by the same people responsible for Flask. Jinja is also used in other projects besides Flask. It is quite popular, and there are many different options and functionality that you can use with Jinja. You can check out the Jinja website for more details about its features and use cases.
Passing Data To Templates
In the example above, we can see how to load a static HTML file using Jinja Templates and Flask via the render_template() function. We can also pass some data from the app.py file into the template file during rendering. This is important because it is how we can create dynamic pages that change based on the data that is passed to them. Let’s update both the app.py file and the home.html file to see how to pass this data and display it in the browser. First up, let’s see the change in app.py.
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('home.html', name='Jinja')
@app.route('/about')
def about():
return 'This is a tutorial Flask app on serving routes'
Notice that the render_template() function now has a second argument of name passed to it. In this case, we have set the value to ‘Jinja’.
Template Interpolation
How can we take this variable ‘name’ that we specified and access it inside of the template? In Jinja, you can use two curly brackets, then type out the name of your variable, which in this case is ‘name’, and then two ending curly brackets. This is a form of interpolation where what happens is the value of the variable is displayed, not the name of the variable. So here is our updated home.html file that makes use of the curly brackets in Jinja.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Homepage</title>
</head>
<body>
<h1>Hello {{ name }}!</h1>
</body>
</html>
Now when the homepage is loaded, we can see that the value of ‘Jinja’ which was passed from the app.py file to the home.html file is displayed on the screen.
Changing Values In App.py
In order to solidify this concept, let’s try a couple of different values in the app.py file for the ‘name’ variable. We will leave the home.html file untouched, only the variable contents are being updated here.
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('home.html', name='Flask')
@app.route('/about')
def about():
return 'This is a tutorial Flask app on serving routes'
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('home.html', name='Friend')
@app.route('/about')
def about():
return 'This is a tutorial Flask app on serving routes'
Learn More About How To Use Flask Page Templates
- Primer On Jinja Templating (realpython.com)
- Jinja_(Template_Engine) (en.wikipedia.org)
- Jinja Template Cheat Sheet (dev.to)
- Jinja 2 Explained (codeburst.io)
- Python Jinja (zetcode.com)
- Full Stack Jinja 2 (fullstackpython.com)
- Jinja Templates Simple Dashboard (blog.appseed.us)
- App Generator Jinja Template (github.com)
- Jinja2 Template (golinuxcloud.com)
- Basics Of Jinja Template Language (overiq.com)