Django Template Inheritance with Examples | Explanation
June 14, 2021 2022-12-19 3:09Django Template Inheritance with Examples | Explanation
What is Django Template inheritance?
We have published a tutorial on what is template in Django, you can read it from start to end. Now, we want to move next, So, in this Django tutorial, we will discuss Django template inheritance. Before discussing template inheritance, we discuss what is template is actually?. The template is the HTML document that is used to display the content to the frontend side. We can develop or design or create a basic structure of a template using HTML. With HTML, we also use other technologies like CSS (cascading style sheets), JavaScript (to achieving required functionalities).
Inheriting means to get something from someone else, for example, ‘A’ has 3 things and we want to inherit ‘B’ from ‘A’. Then ‘B’ will also have 3 things as ‘A’ have. So in template inheritance, a template will have tags or a set of tags of that template from which we have inherited.
So let’s start!
What is Django Template Inheritance?
We used template inheritance techniques when we want to avoid writing the same code again and again. For example, we have a web page index.html which contains the basic structure of a website that will be common to all web pages. So, here we used template inheritance for common elements. Because we did not want to write the same code again and again to create duplication and confusion.
If we did not use Template inheritance then it will create issues and difficult to edit a base theme for a website, because you have to go to every web page if you want to make any changes. But in the case of Django template inheritance, you did not need to go to every web page to edit something or add or remove elements, because the whole website’s base skeletal document is the only one in which you can make changes.
In the Django template inheritance concept, we create a base or parent template, and another template that inherits the parent template is called the child template. The chile will have all the common elements as mentioned in the parent template. We did not need to write again same elements. The very important point, we can override some sections in the child template.
To Ovoriding some sections in the parent template, we have to learn block tag (Django Tempale language) techniques. Because without block tag we cannot work on Django template inheritance. So below the heading, we discuss block tag and its related extends tag also, lest’s start!
Block tag and extends tag | Django Template inheritance
Extends a tag is also important in template inheriting because the template you want to make a parent, you should have to use extends tag in chile template which will inform to Django template engine that this is another template , then Django finds its base or parent template to read common elements.
Syntax
{%Â extends ‘file name with path’ %}
Block tag is the part of the Django template language which is used to override some parts in the parent template. Actually when we want to inherit a template’s elements which are common as header or footer section. If we want to change or override some sections, we used a block tag. The content in the block tag will override the parent template contents but will inherit other content that is outside of the block tag. You can create a number of blocks as you need. In the following example, you will be cleared Django template language topic.
Syntax
{% block BLOCK NAME %}
{% endblock BLOCK NAME %}
e.g
{% block title %}
{% endblock title %}
How to inherit a template properly with example
For example we create base or paretn temaptle in which we defined common element but one block tag named title. The purpose of creating a block tag is that we want to overrid title content in child tempalte when we want.
base.html
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”style.css”>
<title>
{% block title %}Website title{% endblock %}
</title>
</head>
<body>
<h1>Welcome to website</h1>
<p>Welcome to website.</p>
</body>
</html>
So, we create another HTML file named about.html. This is our child template we want to inherit base template, so we did not need to write common elements to make duplication. So we used extends tag to inherit a template. Then we use a block tag to override content as we wrote in the base template. So, if we did not override content on the about.html page, then the same title will show for the about page also.
{% extends “base.html” %}
{% block title %}About us page{% endblock %}
Conclusion
There are different things you have learned in this Django tutorial about Django template inheritance. We will provide more concepts, knowledge, experience, and examples in this article from time to time when we update.
If you have any questions in your mind while reading out the tutorial, then must share them with us. We will provide you the best solution possible.
If you use Facebook, Twitter, Pinterest, LinkedIn, or other social media platforms, then share this Django tutorial, if you share, more students will take the chance to learn.
Comments (3)
Faisal Zamir
Good article to learn Django
Ali
Wow, great explanation, keep posting
Faisal Zamir
Thank you for your Feedback