How to Extend Templates in Django
In this article, we show how to extend other templates in Django.
Extends is a way in which you can include other templates on a page.
So, in this way, you are extending the page so that it includes other templates.
You may extend a template such as a header file or a footer file. This will include the header and footer files on the page.
So, in ways such as these, extending templates is important. By extending templates, you simply have one file. So if you extend that one template on 100 other pages, to change the template, you just have to go to that one template and make changes. You don't have to change all 100 pages. So, this is why it is common practice to create a template and extend that template. This is commonly done for headers and footers and other implementations that require the template on multiple pages of a site.
So, now that you understand the concept of extending a template, let's see how to actually do it in code.
So we'll create a header HTML file.
Then we'll create a home HTML file that extends the header HTML file.
Therefore, the home file will contain all of the code from the header HTML file. This is the essence of the extends functionality of Django.
So, let's first create a our header HTML file. We will name this header.html.
We'll create the simple header HTML file shown below.
If you would just like this file, see header.html.
So, basically, the above file is the file that we want to include in other pages of our website. We will extend this file so that it is included in another page, and that page will be home.html.
So, the first line of code just defines the document as an HTML document.
The second line is the necessary html tag of an HTML document that encloses all other tags in the document.
After, we define the head of the document. In this is meta data such as the title tag and what charset the document is.
We then close the head tag.
We then have our body, which is not really a header tag, but just for this example, we include it so for the sake of just explaining of extending templates work.
So, in our body tag, we set the background to a yellow color, something that stands out.
We then define a block of code using the div tag.
In this code, we add, {% block content %} {% endblock %}, which is special information regarding templates in Django. This code is what will uniquely exist on other pages that we extend. All the code outside of, {% block content %} {% endblock %}, is the code that will appear on each page that is extended from this template file.
Basically everything that you want to appear on every page that extends this page is written outside of {% block content %} {% endblock %}. This will be common amongst all pages.
What goes into the statement, {% block content %} {% endblock %}, is what is unique to that page that is being extended.
Onto the page that extends this HTML page, you must include {% block content %} unique code on this page {% endblock %}
This is how it all works.
Extending pages is great if everything is in common amongst pages except for like the body of the HTML page.
You'll see how this works when we create the next HTML file, which is home.html.
The home.html file will extend the header.html file and have instructions in the place of the block content..
This is shown in the code below.
If you want the external HTML file of this home.html file, see home.html.
So the first thing we have in this home.html file is the extension of the header.html file.
We then have the line, {% block content %}, which terminates with the line, {% endblock %}. In between these 2 statements is the code that will appear where the statement was seen in the header.html file.
And this is all that there is to it.
However, we are not done. There are a few more important things that must be discussed.
Where do we put these files?
So, let's say we've created an app called Articles. In this Articles directory, we create a folder called template. In this folder called template, we create another directory called Articles. Inside of this Articles directory, we place the header.html and home.html files.
This is the best practice to do it and is present in the official documentation of Django.
The reason we create a directory called template in each app of a website is that the template may vary from app to app on your website. Therefore, it is best practice to have each app have its own template.
The reason we create an Articles directory in the template directory is because if you have multiple HTML files called home.html, Django clusters all pages in template directories together. Therefore, if you have a home.html file, for instance, in the Articles directory and a home.html file for the Contact directory, Django isn't going to know how to differentiate the 2 files. If each is in its own directory, this makes this ambiguity impossible. So it's best practice to do it this way.
Another thing you must know is that when we called the extends functionality, it automatically knows to check the template folder. So, you don't have to specify template. Django automatically searches for template and looks in there. Therefore, you simply specify the path after the directory, which in this case is, 'Articles/header.html'
Next, there's one last thing that must be done. The last thing that must be done is you must go to the settings.py file in the project directory. So if the project you created is called mywebsite, this would be the settings.py file in the mywebsite directory.
You must specify the path to the template directory in the DIRS key of the TEMPLATES dictionary.
So the full path to the template directory on my computer is, C:\\Users\\David\\AppData\\Local\\Programs\\Python\\Python36-32\\Scripts\\mywebsite\\Articles\\template,
this is what I would specify in the code.
Any time you create a template for any directory, you must specify the full path to that template in the DIRS dictionary. Otherwise, Django will not be able to find the template and the code will throw an error and not work.
In earlier versions of Django, this manual insertion of the full path to the template directory was not necessary, but for the latest versions, it is necessary in order for Django to find the template directory.
When this code is run, you should see a page like that shown below.
And this is all that is necessary to extend a template in Django.
Related Resources
How to Show All Tables of a MySQL Database in Python
How to Count the Number of Rows in a MySQL Table in Python