Django | Part 6 | Creating A Base Template
The previous article explained how to create a homepage that lists all the entries for the “Article” model. However, you will have noticed that aside from the entries, the homepage looked bare. There was no styling, navbar, or other means for a visitor to navigate the site. This article will explain how to take advantage of the Django template language by building a base template that will house all of the commonly used HTML components across the website. This template will include importing the static files, including styling, the navbar, and the footer. This base template will then extend to any other page on the blog website, including the homepage. Using Django templates increases scalability and increases consistency across each HTML template. This article will illustrate how best to use Django templates in three key steps:
- Creating a static directory to house all styling, scripts and assets.
- Creating a base template
- Extending the base template to the homepage
Creating a static directory
A static directory is a common place to store any CSS styling, JavaScript, or assets that HTML templates across the website will need to access to function correctly. It is best practice to create the static directory in the uppermost directory of your project. This way, all the project apps can easily access it. The first step to doing this is to navigate to the same directory as the manage.py file and create a directory called “static”.
Inside the “static” directory, then create another three directories called “assets”, “css”, and “js” respectively.
Then the project needs to be able to determine how to find this directory when loading the HTML files. To achieve this, open the settings.py file and add the following code below the “STATIC_URL” field.
STATIC_URL = 'static/'
#Add this in for the project to determine the location of the STATIC directory
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
This snippet creates a path by joining the base directory and “static” inside the ‘STATICFILES_DIRS’ tuple.
The last step is to install the “Sekizai” package, which the HTML templates will use to load the static files. Do this by adding the “django-sekizai” package to the requirements.txt file and installing it using pip installer. Then add it to the “INSTALLED_APPS” array in the settings.py file as demonstrated in the “Building a Django model” article.
Creating a base template
As multiple apps will use the base directory within the project, the best practice is to house it in the main app directory, with the settings.py file. Create a folder in this directory called “templates” and inside a file called “base.html”. This directory must also be specified in the settings.py file so the project can locate it. To do this, navigate to the “TEMPLATES” field under the settings.py file and enter the main app directory under the “DIRS” array. It should look like the below, bearing in mind the main app directory for this project is called “blog_website”.
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [
os.path.join(BASE_DIR, 'blog_website/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 the project now able to find the base.html file, it is time to begin creating the base template. As this project focuses on how to build with Django and not HTML, we will skip the HTML & CSS build and use a readily available template found online. The template used for this article can be found here on the Start Bootstrap website. This template is simple, mobile-friendly, and you can customise it to your liking.
Firstly, download the template and copy the CSS files and assets into the static directories created in the above steps. Then copy the index file into the base.html file.
For now, most of the base.html file will be kept as is, except for the content in the middle. This middle content is where all the article placeholders to fill are. Delete everything between the “row” div under the “Page Content” annotation. In its place, add in the template placeholder variable “{% block content %}{% endblock %}”. Declaring this placeholder variable will allow other templates that extend this base template to insert content into this placeholder.
In addition, at the top of the page, import the Sekazi static module using the “{% load sekizai_tags static %}” command. Then use it to load the CSS style sheet. Once complete, the HTML file will look like the code snippet below.
{% load sekizai_tags static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Blog Home - Start Bootstrap Template</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="{% static "/css/styles.css" %}" rel="stylesheet" />
</head>
<body>
<!-- Responsive navbar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#!">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#!">About</a></li>
<li class="nav-item"><a class="nav-link" href="#!">Contact</a></li>
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Blog</a></li>
</ul>
</div>
</div>
</nav>
<!-- Page header with logo and tagline-->
<header class="py-5 bg-light border-bottom mb-4">
<div class="container">
<div class="text-center my-5">
<h1 class="fw-bolder">Welcome to Blog Home!</h1>
<p class="lead mb-0">A Bootstrap 5 starter layout for your next blog homepage</p>
</div>
</div>
</header>
<!-- Page content-->
<div class="container">
<div class="row">
{% block content %}{% endblock %}
</div>
</div>
<!-- Footer-->
<footer class="py-5 bg-dark">
<div class="container"><p class="m-0 text-center text-white">Copyright © Your Website 2022</p></div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Extending the base template to the homepage
With the base.html file now finished, the final step in this article is to extend it using the homepage template created in the previous article. To do this, open up the blog_index.html file and add “{% extends “base.html” %}” to the top of the file. This command tells the Django project to take the base.html template and extend it with the remaining content in the file.
Next, above the pre-existing content in the file, add “{% block content %}” and add “{% endblock %}” after all of the content. The content between these two commands will be inserted into the “content” placeholder in the base template. With that complete, the blog_index.html file will look like the code snippet below.
{% extends "base.html" %}
{% block content %}
<h1>This is the homepage</h1>
{% for article in articles %}
<p>
{{article.title}}
</p>
{% endfor %}
{% endblock %}
Once all the steps in the article are complete, the new template will be visible when running the server. Instead of seeing the raw text in the previous article, the homepage will look more like a website. Inside the template, the list of all the article entries created in the last article will still be visible.
The following article will focus on making the final touches to the homepage by taking the “Article” model entries and formatting them to be featured article blocks in the Start Bootstrap template downloaded in this article.