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.
HTML
<!DOCTYPE html> <html> <head> <title>Jinja2 and Flask</title> </head> <body> <h1>Welcome to w3wiki</h1> <h4>A Computer Science portal for geeks.</h4> {% block content %} {% endblock %} </body> </html> |
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.
HTML
{% extends "layout.html" %} {% block content %} <ul> <li><a href="default"> Check Layout(Inheritance) </a></li> <li><a href="/variable"> Try Variable Example </a></li> <li><a href="/if"> Try If-else Example </a></li> <li><a href="/for"> Try For Example </a></li> <li><a href="/url"> Try URL Example </a></li> </ul> {% endblock %} |
Output:
layout.html
index.html
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
Contact Us