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.

  1. 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.
  2. 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.
  3. Then, I create a folder called “dashboard” in the templates directory of my Django project. This is where all the html files will live.
  4. 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.
  5. 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:




  6. 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.
  7. 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>
  8. 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.
  9. 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:

     
  10. 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!