How to include one HTML file into another in Django
Reusability is one of the most effective time savers that a Django developer on deadline must achieve in their code. When you have components that you can insert easily within your Django code, you can save yourself time, be effective, and avoid redundancy in your code.
Besides, help you achieve one of the core Django web development principle: The DRY principle that means
pleaseDon’t Repeat Yourself.
To achieve that, you will need to be able to include some .html files into another, if you wish to have some code, e.g card component, that you wish to insert anywhere in your template structure.
So, how do you include one HTML file into another in Django?
The effective approach to include one HTML file into another is Django is to use the {% include %} template tag. {% include %} tag takes the HTML file name you want to include as an argument following the syntax {% include ‘file_name.html’.
Basically, here’s how it works:
You have a .html file that you want to insert anywhere in your Django templates. Let’s call it, `call_to_action.html’
In another Django template file, you can include the call_to_action.html file using {% include 'call_to_action.html' %}
For example, on post.html, you can include call to action HTML code like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- include the call to action html in this new html file -->
{% include 'call_to_action.html' %}
<!-- include another html component in another section -->
<div class="section comments">
<div class="row">
<div class="col-md-8">
<!-- some card html content here -->
{% include 'custom_card.html' %}
</div>
</div>
</div>
</body>
</html>Now you get it.
But Steve, how do I include one .html file in another Django template?
Well, follow these steps
How to include one HTML file into another HTML file in Django
Step 1: Configure how Django looks for templates
Before you start including other .html files as snippets in a Django template, you need to configure your project in a way that it can find these reusable templates. You can do that by creating app-level template or project-level template directories.
The app-level template directory is a directory called templates that exist within your app directories. This is the directory you create for all your app-specific templates.
You should note that when using an app-level template directory, you can only create a reusable .html file for that Django application.
On the other hand, you can create a reusable .html file that can exist anywhere in your Django templates by creating it in the project-level directory. With a project-level directory (a directory called templates that exists in your project root directory), you can store all the templates you wish to reuse anywhere.
So, based on your use case, create these directories using the following commands:
For app-level template directory:
mkdir app_name/templates
# An example command for creating app-level template directory for blog app
mkdir blog/templatesFor project-level template directory:
mkdir templatesYou should navigate inside your project root directory (the folder with the manage.py file) to execute the commands above.
After creating the necessary template directory, configure Django to look for template files in these new directories.
Open settings.py file and locate the TEMPLATES list variable:
Set the value of APP_DIRS to True so that Django can locate app-level templates.
"APP_DIRS": True,
For project-level template directory configuration, set the value of DIRS to [BASE_DIR / 'templates']
"DIRS": [BASE_DIR / 'templates'],
So, your final TEMPLATES variable should look like this:
TEMPLATES = [
{
"BACKEND": "django.template.backends.django.DjangoTemplates",
# new line
"DIRS": [BASE_DIR / 'templates'],
"APP_DIRS": True,
"OPTIONS": {
"context_processors": [
"django.template.context_processors.debug",
"django.template.context_processors.request",
"django.contrib.auth.context_processors.auth",
"django.contrib.messages.context_processors.messages",
],
},
},
]With that, you have configured Django to use both app-level and project-level templates.
Step 2: Create the HTML file to reuse
Create the .html file you want to use as a snippet in other .html files. In this example, I will create a new file inside the project-level directory so that I can include it in any of my templates.
touch templates/call_to_action.htmlStep 3: Create a new HTML file to include another template
After creating the reusable HTML file, create another file that you want to include the encapsulated .html file. In this example, I will use the detail.html file that will have the call to action section included as a component.
touch blog/templates/detail.htmlBecause detail.html is associated with the blog app, I have created it inside the app-level template directory.
Step 4: Include the reusable HTML file into your new template file
Include the call_to_action.html file in your detail.html file using the {% include %} template tag. To do that, inside your detail.html file, add {% include 'call_to_action.html' %} tag at the place you wish to have a call to action snippet.
{% extends 'base.html' %}
{% block content %}
<section class="header">
....
</section>
<section class="content">
...
</section>
<section class="call-to-action">
{% include 'call_to_action.html' %}
</section>
{% endblock %}Step 5: Repeat the process for other HTML components
Repeat the process for other .html files that you want to include in other template files. The approach is essential when you want to have sections in your templates that are not always included in all your project’s web pages.
What does {% include %} do in Django?
{% include %} is a template tag in Django used to include a .html file into another .html file of your Django project. Thus, the {% include %} template tag allows you to load other .html files as components or snippets anywhere in your Django template file.
The syntax for the {% include %} tag is:
{% include "template_name.html" %}Where template_name.html is the name of the template that you want to include.
The {% include %} tag can be used to:
- Reuse common elements in multiple Django templates
- Keep Django template code organized
- Reduce the amount of duplicate HTML code
How to include another html page in a div
To include another html page in a div, you need to use the {% include %} template tag to load the html template code while wrapping it in a <div> tag.
Here is an example of an HTML page included in a div using the {% include %} template tag:
<div>
{% include 'call_to_action.html' %}
</div>Can I include multiple HTML files into another HTML file in Django?
You can include multiple HTML files into one HTML file using the {% include %} template tag. The {% include %} template tag allows you to have multiple HTML files loaded into a single HTML file at various sections of your HTML structure.
Here is an example main.html file that loads navigation.html, header.html, and footer.html HTML files:
<html>
<head>
<title>My Website</title>
</head>
<body>
<!-- header -->
<div class="header">
{% include 'header.html' %}
</div>
<!-- navigation -->
<div class="navigation-menu">
{% include 'navigation.html' %}
</div>
<!-- block content -->
<section class="main">
{% block content %}
{% endblock %}
</section>
<!-- footer -->
<div class="footer">
{% include 'footer.html' %}
</div>
</body>
</html>
Using the approach above, you can include multiple HTML files into one HTML file in Django.
