Jinja2 template inheritance in Flask

What is inheritance?

If you are new to Python and Flask, then one of the primary obstacles to learning is the terminology. Below are some terms that will help make this blog post a little clearer for you:

 

Jinja2 - this is a templating language for Python, you can read more about it here.

Inheritance - the process of inheriting features. E.g you have two html files and you want them to look exactly the same, but you still wish to have the freedom to edit the text. Inheritance allows you to do this.

Parent - the parent acts as your template. The parent is the master html file that all the other html files feed from.

Child -  the child html files inherit from that one single parent html file.

 

Base Template

Jinja2 allows you to use a base html file that will can act as the back bone for the other html files you create. Essentially, it allows you to have a parent html file that will be used for the other child html files. The parent/child relationship here allows the child html files to inherit from the parent html file. It will inherit things such as styling, layout and text.

Jinja2 Inheritance Syntax

The Jinja2 logic and syntax so far has been relatively pain free and straight forward. Nevertheless, I needed some focus and patience for the logic to become clear to me. I will lay out the process of html inheritance in 3 easy steps:

Inheritance 3 Step Process

1. Four Key Code Blocks: Parents must look after themselves before they can effectively attend to their children. With this logic in mind, lets start with the four key code blocks you can insert in the parent html file:

As you can see above, there are code blocks that inherit from the head, title, body and footer. Wrap these blocks around the content within the html tags. Each block needs to end with an {% endblock %}, you can think of it as the closing html tag. All 4 blocks are not necessary, you can pick and choose what you wish to inherit. If you don't want to inherit the title for example then you should omit the Jinja2 code for the title inheritance.

Inheritance Variations: I realised that there are variations in how you inherit. I will provide you with the example of title inheritance.

The below code is from my index.html parent, the text - Denis Murphy - Python Portfolio, between the {% block title %} and {% endblock %} will be omitted in my child html file. However if I put this block before the text, then this text and the new text I add in the child html file will appear.

 

title_inheritance

 

 

2. Extends: Now to the child html files. Begin by inserting this piece of code at the top of each child html file:

{% extends "index.html" %}

In my case, I want my about.html and my python_apps.html files to inherit from my index.html file. Change "index.html" to whatever html file you want to use as the parent. Below is what my python_app child html file looks like:

 

extends_code on each child html file

 

 

3. Jinja2 Blocks for the child html files: Basically the Jinja2 code blocks that you inserted in your parent html file from step1 allow the child html file to overwrite the parent's code between these blocks. In order to overwrite the code blocks in the parent html file corresponding blocks need to be added to the child files. You can then edit within the Jinja2 code blocks on the child html file. THE JINJA2 CODE BLOCKS ARE WRITTEN EXACTLY THE SAME AS STEP 1.

 

childhtml

 

Above is an example of me replacing the {% block content %}{% endblock %} from the parent index.html. The result is that I edited the text while having consistent styling:

text on my parent index.html file

 

 

 

 

 

 

Word of Caution -  all the content within your {% block content %}{% endblock %} in the parent html file will be replaced with what you insert between this block in the child html file.

 

Did you find this blog post useful? Are you currently building a project in Flask? Do you have problems with the Jinja2 syntax? If so I would love to hear from you in the comments section below or by dropping me an e-mail.