Templating With Jinja2 in Flask

Web applications often require dynamic content, where data from Python needs to be displayed inside HTML pages. Flask supports this using a templating engine called Jinja2, which allows to embed Python-like expressions, variables and control structures directly within HTML files.

Using Jinja2 templates one can display dynamic data, apply conditions, loop through data and reuse layouts across multiple pages.

Installing Required Package

Jinja2 is already included when installing Flask, so there is no need to install it separately. Installing Flask will automatically install the Jinja2 templating engine. Run the following command:

pip install flask

Project Directory Structure

Before writing the code, the project should follow this structure:

• app.py -> Main Flask application file.
• templates/ -> Contains all HTML files used by Flask.
• static/ -> Stores static resources such as CSS and JavaScript.

Main Flask Application File

The app.py file defines the routes of the application and renders the HTML templates.

Explanation:

• app = Flask(__name__) creates the Flask application instance.
• @app.route("/") defines the homepage route.
• render_template("index.html") loads and displays the index.html template.
• render_template("variable_example.html", name=user) passes the variable user from Python to the HTML template.
• render_template("for_example.html", courses=list_of_courses) sends a list of courses to the template so it can be displayed using a loop.
• redirect(url_for('var')) redirects the user to another route using url_for().
• app.run(debug=False) runs the Flask application.

Jinja Template Variables

Jinja2 allows displaying Python variables inside HTML templates.

Syntax:

{{ variable_name }}

variable_example.html

Output

Explanation: {{name}} displays the value of the variable name passed from the Flask application.

Jinja Template if Statement

Jinja2 supports conditional statements similar to Python. These are used to display content based on certain conditions.

Syntax:

{% if condition %}
...
{% else %}
...
{% endif %}

if_example.html

Output

Explanation:

• {% if(name == "Geeksforgeeks") %} checks whether the value of name equals "Geeksforgeeks".
• {% else %} executes when the condition is false.
• {{name}} displays the variable value passed from Python.
• {% endif %} marks the end of the conditional block.

Jinja Template for Loop

Jinja2 also supports loops, which allow iterating through lists or sequences.

Syntax:

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

for_example.html

Output

Explanation:

• {% for course in courses %} loops through the courses list sent from the Flask application.
• {{course}} displays each item in the list.
• {% endfor %} marks the end of the loop.

Jinja Template Inheritance

Template inheritance allows multiple HTML pages to share a common layout, such as headers and footers. A parent template defines the structure, and child templates extend it.

Syntax:

layout.html

{% block content %}
{% endblock %}

index.html

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

layout.html (Parent Template)

index.html (Child Template) 

Output

layout.html

index.html

Explanation:

• {% extends "layout.html" %} makes layout.html the parent template.
• {% block content %} defines a section that child templates can modify.
• {% endblock %} marks the end of the block.

Jinja Template url_for Function

The url_for() function is used to generate URLs dynamically and manage redirection between routes.

Syntax:

url_for(function_name)

Example 1: In this example, the url_for() function is used inside the Flask application file (app.py) to redirect users to different routes based on their input.

Output

Explanation:

• @app.route("/choice/<pick>") creates a dynamic route where the value entered in the URL is stored in pick.
• def choice(pick): defines a function that receives the value from the URL.
• url_for('var') generates the URL for the var() route defined in the Flask application.
• redirect() redirects the user to the generated route.

Example 2: The url_for() function can also be used inside HTML templates to link static files such as CSS or JavaScript. When used in HTML templates, it must be written inside {{ }} because it is treated as a Jinja2 expression.

Now, inside the static folder, create a file named style.css.

Output

Explanation:

• {{ url_for('static', filename='style.css') }} generates the correct path to the style.css file inside the static folder.
• filename='style.css' specifies the CSS file that should be loaded.