How to use the Extends and Include Django Template Tags

April 20, 2020, 8:29 a.m.

Django · 5 min read

How to use the Extends and Include Django Template Tags

Last Modified: Sept. 8, 2020, 9:44 a.m.

Django extends & Django include

The Django template language, commonly referred to as DTL, comes with built-in tags used to connect HTML files. Django extends and Django include are two such tags designed to easily load templates within other templates. 

 


 

When to use Django extends vs. Django include

Choosing whether to extend or include a template comes down to the purpose of the file.

In general, extend a file to use its code as a base for multiple templates and include a file to load a single section of code within the context of another template.

This may seem confusing at first but learning how to extend a template in Django and include a template in Django becomes easier with practice.

Keep in mind using DTL to create this file structure is not necessary but it does help maximize your DRY (don't repeat yourself) coding practices and keep your project's code organized. 

 


 

Django extend HTML template

Using the extends tag in Django requires several things.

(1) First, you need a Django template to extend. This is the template whose base code you want to use for other templates.

(2) Next, you need to add the Django extend block content tags where each of the other templates will be loaded in.

(3) Finally, you need to extend the first template at the top of the other templates and add a matching set of Django extend block tags to the other templates

 

Using the Django template block content tags

env > mysite > main > templates > main > (New File) header.html

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
  </head>
 <body>

    {% block content %}

    {% endblock %} 
      
  </body>
</html>

Document type and HTML elements such as html, head, title, and body are needed to properly structure any HTML document.

As such, you would want these to be on every HTML template created.

But instead of repeating this code in every file, we can place it in one file and use the Django extend block tags to load in information from other files.

To do this, nest the two Django template block tags in the body element. These act as the place-holders for the code we will call in the next step.

 

Adding the extends tag in a Django template

env > mysite > main > templates > main > (New File) home.html

{% extends 'main/header.html' %}

<!--Block content goes below-->

With our header.html file properly configured, we can create a new template or use an existing one, let's say home.html, and extend header.html at the top of the file. 

 

Adding the Django extend block to the template

env > mysite > main > templates > main > home.html

{% extends 'main/header.html' %}

<!--Block content goes below-->


  {% block content %}

  <h1>Hello, world!</h1>
  ...

  {% endblock %}

Then we just need to mark out the Django block content we want to be added to the header.html using add the same two DTL block tags used in the header.html and nest all of the homepage HTML code within them.

 

Seeing Django extends in action 

Using this format, the file now reads in header.html then renders the block content in home.html as if the codes were in the same file.

If you run your server and refresh the page, nothing obvious should change.

But if you inspect the page, the header.html Django template extends to the home template, adding all of the necessary base code from the header.html.

 

Use Django extends in multiple templates

env > mysite > main > templates > main > (New File) contact.html

{% extends 'main/header.html' %}

<!--Block content goes below-->


  {% block content %}

  <h1>Contact Us</h1>
  ...

  {% endblock %}

Note that you can extend the header.html to multiple HTML documents using the same document structure and DTL block content tags. This means the header can render in multiple templates. The example above extends the header template to a new HTML template called contact.html.

 


 

Django include HTML template

Using the include tag in Django requires fewer tags than using the Django extends tag.

(1) First, create the Django template you want to be included in other templates.

(2) Then, add the DTL include tag to the exact location you want the file added in the template

 

Create the Django include template

env > mysite > main > templates > main > (New Folder) includes > (New File) navbar.html

<!--Navbar-->
<nav class="navbar navbar-expand-sm navbar-light bg-light">
  ...
</nav>

Create a new folder called includes. This folder will hold all of the HTML files we want to include within other Django templates.

Within this folder make a new file named navbar.html.

In navbar.html add the navigation links and code. No DTL tags are needed in this file. 

 

Django include tag

env > mysite > main > templates > main > header.html

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
  </head>
 <body>

    {% include 'main/includes/navbar.html' %}

    {% block content %}

    {% endblock %} 
      
  </body>
</html>

Then return back to header.html and use the DTL tag include to add the navbar.html to the file. 

Once the tag is added, the project now includes the navbar.html code on every page that extends the header.html.

 

Use the same Django include template in multiple templates

env > mysite > main > templates > main >  includes > (New File) form.html

<!--Form-->

<h1>Contact</h1>
<form method="post">
...
</form>

The Django include tag can also be added to multiple templates. For example, let's say you want a contact form on multiple pages. Create the form in a separate file within the includes folder. 

 

env > mysite > main > templates > main >  home.html

 <h1>Hello, world!</h1>
  ...
{% includes "main/includes/form.html" %}

 

env > mysite > main > templates > main >  contact.html

 <h1>Contact Us</h1>
  ...
{% includes "main/includes/form.html" %}

Then, just like the navbar example above, add the Django Template Language includes tag in the exact location where you want the form to render in the template. 

 

More examples of how to use the includes tag would be including a footer.html or login.html template in the header.html but the tag can be used in any HTML file.

 


 

Add the Django include template within the Django extends template

env > mysite > main > templates > main > contact.html

{% extends 'main/header.html' %}

<!--Block content goes below-->


  {% block content %}

  <h1>Contact Us</h1>
  ...
  {% includes "main/includes/form.html" %}

  {% endblock %}

Please note that you can use the Django include tag within a Django extends template.


0
Subscribe now

Subscribe to stay current on our latest articles and promos





Post a Comment
Join the community

0 Comments