In this article, I’ll explain my approach to working with a Django HTML template and optimizing template inheritance in Django. In general, I consider myself a backend developer, but I do have to deal with a lot of HTML/CSS/JavaScript during my development. Mostly when I start a new project, I begin by selecting an appropriate HTML template for it and then deconstructing the template until it’s modular and optimized for inheritance.
For demonstration purposes, I’ll Djangofy an extremely popular Bootstrap-based admin dashboard template called SB Admin 2. You can download the template here.
Djangofying SB Admin 2
Here are the steps I take when creating a Django HTML template.
- I start by downloading the template from the link above and unzipping it to a folder called “Backup_template” in my project directory. I don’t usually add this folder to my git, so I’ll just add it to my .gitignore file.
- I now proceed to copy all the assets of the template — that is, the css, js and images — to the static folder of my Django project. I might create a separate folder called “dashboard” in the static folder just to differentiate it from other static files.
- Then, I create a folder called “dashboard” in the templates directory of my Django project. This is where all the html files will live.
- My next step is to look for a file called index.html in the Backup_templates folder. This is usually the main file of the template.
- I now create a file called base.html in the “dashboard” folder that I created in step 3. This file will contain all the common elements — such as the navbar and the footer — that need to be included in all pages of the dashboard. It will also have several blocks defined for overriding in the child templates. Some common block elements I always include are:
1234{% block extrahead %}{% endblock extrahead %}{# within the <head></head> tags to include extra css and js files that the child templates might need. #}
1234{% block extrastyle %}{% endblock extrastyle %}{# just before the <body> tag to write some simple page-level css in <style></style> elements. #}
1234{% block navbar %}{% endblock navbar %}{# for page-level navbar changes #}
1234{% block content %}{% endblock content %}{# where the main content of child templates are written. #}
1234{% block extrajs %}{% endblock extrajs %}{# just before the closing </body> tag to write some page-level javascript, or include js libraries. #} - The next step is to modify all links to external files to use the {% static %} tag.For example,
<link rel=”shortcut icon” type=”image/png” href=”favicon.ico”/>
becomes
<link rel=”shortcut icon” type=”image/png” href=”{% static ‘favicon.ico’ %}”/>Remember to {% load staticfiles %} at the top of the template. - I include a “title” variable within the <title></title> tags to dynamically send the page title from the views.It looks like this: <title>Mysite: {{ title }}</title>
- Optionally, I create a folder called “includes” within the “dashboard” directory. Within it, I create a file called head.html, to store global css, font and js includes. Then I just include it into the <head> tag of base.html like so:{% include ‘dasboard/includes/head.html’ %}A similar thing can be done for footers.
- Now that the base.html template is ready, I can then go on to create the individual pages of my app by just extending it. For example, a sample page could be:
12345{% extends "dashboard/base.html" %}{% block content %}<p>This is a sample page.</p>{% endblock content %}
- In this way, I can create lots of different pages with a coherent inheritance tree. I’ve found it to be a good structure that allows me to quickly make changes at any level of the inheritance. That being said, I don’t usually create too many levels of inheritance because it might turn out to be too difficult to manage.
Conclusion
You can find a Djangofied version of SB Admin 2 here. It’s not perfect, but it illustrates my approach really well.
I hope this was a helpful introduction to Djangofying an HTML template. You can build on it and create a manageable system of your own. If you have any suggestions or feedback, feel free to leave a comment below.
Happy coding!