Templating With Jinja2 in Flask

Flask is a lightweight WSGI framework that is built on Python programming. WSGI simply means Web Server Gateway Interface. Flask is widely used as a backend to develop a fully-fledged Website. And to make a sure website, templating is very important. Flask is supported by inbuilt template support named Jinja2. Jinja2 is one of the most used Web template engines for Python. This Web template engine is a fast, expressive, extensible templating engine. Jinja2 extensively helps to write Python code within the HTML file. Further, it also includes: 

• Async support for generating templates that automatically handle sync and async functions without extra syntax.
• Template inheritance and inclusion.
• The Template engine makes debugging easier.
• Support of both High-level and Low-level API support.

Install the required package

To install the Jinja2 package in Python, check your latest pip version and stay updated. Install Jinja2 using the following command: 

pip install Jinja2

But since we are dealing with the Templating with Jinja2 in Flask, there is no need to separately install Jinja2. When you install the Flask framework, the Jinja2 comes installed with it. 

pip install flask

Templating with Jinja2 in Flask

Before we proceed with the coding part, this is how our project directory should look like:

 

Main Python File

Here is the common app.py file that interfaces with all the HTML files. 

Jinja Template Variables

To declare the variable using Jinja Template we use {{variable_name}} within the HTML file. As a result, the variable will be displayed on the Website.

Syntax of Jinja Template Variables

{{any_variable_name}}

variable_example.html

Output

 

Jinja Template if Statements

Just like declaring the variable in the Jinja2 template, if conditions have almost similar syntax. But here we specify the beginning and end of the if block.

Syntax of Jinja Template if Statements

{% if conditions %}
 ...
 ...
 ...
{% endif %}

Our app.py will stay the same. Just only one change instead of GeeksforLazyroar tries giving Geeks so that we can verify the else block.

if_example.html

Output:

 

Jinja Template for Loop

Jinja for loop syntax is similar to the if statements, the only difference is for loop requires sequence to loop through.

Syntax of Jinja Template for Loops

{% for variable_name in sequence%}
 ...
 ...
 ...
{% endfor %}

for_example.html

Output:

 

Jinja Template Inheritance

If you closely check the project files, you will find the index.html and layout.html. In this example, we gonna take look into Template Inheritance. In most of the websites, if you notice, the footer and header remain the same, which means they share similar formats. In this example, layout.html will contain the default design that is common to all the pages, but here we will keep it specifically for index.html to understand how it works. 

The syntax for layout.html contains the default text, along with the block contain, that will be inherited by other HTML files. You can think of layout.html as the parent and index.html as a child. 

Syntax of Jinja Template Inheritance

layout.html

{% block content %}
{% endblock %}

index.html

{% extends "layout.html" %}
    {% block content %}
        ....
{% endblock %}

Example

In layout.html we define the top block and specify a template to insert block content that acts as parent HTML files. 

In index.html using the layout.html as the parent file, we shall derive all its content and add the block content to the existing HTML file. 

Note: No need to define the HTML, head, and body tag in the child HTML file. 

Output:

layout.html

 

index.html

 

Jinja Template url_for Function

To build a dynamic website you need multiple re-direction within the website. url_for function is a very handy method that helps in re-direction from one page to another. url_for is also used to link HTML templates with static CSS or JavaScript files. 

In our example since we have multiple choice for example, i.e., variable, if and for. Using url_for, we can create a custom function in which the user can alter the URL to get the specific result. For example, we shall define a function inside app.py and in example 2 we will take link HTML with CSS. 

Syntax of Jinja Template url_for Function

url_for(function_name)

Example 1:

In the below example, if the user enters choice/<his choice> then it will redirect to that HTML file. Make sure redirect and url_for are imported.

Output:

 

 

Example 2: 

In example 1 we used url_for inside a Python file. Now we shall use url_for inside the layout.html (parent file) HTML file, it will follow the variable define syntax i.e., to be enclosed within {{}}.  Just like templates, create a static file for CSS. 

{{ url_for('static', filename='<path of the file>') }}

Output