7. Base Template

Robert Crowther Feb 2022

Last Modified: Feb 2023

Django is detailed about generating output from a model. Or, can I say, involved? Anyway, if you intend to output webpages, then most sites will want to wrap pages in a generic HTML template.

Base template folder

It’s a folder in a folder. Create,

mkdir -p siteName/templates

Make a base template

The following is generic. It includes blocks for CSS, JavaScript and ‘content’. Adapt as you wish—for example, you may wish to include site‐wide CSS/JS, or a more complete HTML framework with headers/footers/sidebars etc. In siteName/templates/base.html,

{% load static %}

<!DOCTYPE html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8" />
        <title>
            {% block page_title %}
            {% endblock %}
            {% block page_title_suffix %}
                {% with self.get_site.site_name as site_name %}
                    {% if site_name %}|{{ site_name }}{% endif %}
                {% endwith %}
            {% endblock %}
        </title>
        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        {# Global stylesheets here #}

        {% block extra_css %}
            {# Override this in templates to add extra stylesheets #}
        {% endblock %}
    </head>

    <body class="{% block body_class %}{% endblock %}">
        {% block content %}{% endblock %}

        {# Global JS here #}

        {% block extra_js %}
            {# Override this in templates to add extra javascript #}
        {% endblock %}
    </body>
</html>

Register the base template

In siteName/settings.py…

First, this is useful (I suggested this in Step 2). Add it,

PROJECT_DIR = Path(__file__).resolve().parent

Now modify the TEMPLATES > DIRS setting to include the global template folder,

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
                    PROJECT_DIR / 'templates',
        ],

Template partials and inheritance

I’m not going into it here, but the Django template system can build templates from partial templates, which describe part of the page. You place ‘blocks’ inside the the templates, that can be filled later by other templates.

You can also, in a less pre‐planned way, import a template into other templates. This is useful for reusable template snippets. It looks like this,

{% include "navbar.html" %}

For an ‘include’ the path is a regular Python/Unix path from the template source e,g, ”../../sitename/template_snippet.html” is a valid path.

Note that if you do not use inverted commas, “string” syntax, then the template thinks you are referring to a variable on the supplied object,

{% include review.navbar %}

This may be useful if, for example, an object is passed that can render itself, or has HTML included. But it is also a way to be misunderstood.

If you wish to exploit these features fully, I’ve written an article on Django template interactions.

Refs

Template inheritance, Django documentation.: https://docs.djangoproject.com/en/3.2/ref/templates/language/#template-inheritance
Template inclusion, Django documentation,: https://docs.djangoproject.com/en/3.2/ref/templates/builtins/#std:templatetag-include