Akshay Gaur

Templates

Templates are Django framework's solution to generating html dynamically. A Django template essentially is a way to combine static html with dynamic content described by Django Template Language( DTL ) syntax.

There are three important parts to the template system in django framework:

  1. Variables
  2. Tags
  3. Template Inheritence

We will discuss these components in brief one by one but I recommend going over the official documentation for a detailed read.

Variables

These are the syntactical items that when evaluated by the template engine, are rendered on the html page. The syntax for variables are {{ variable }}. Notice the space between the variable and the brackets.

Tags

These are used for control flow using loops or logic and at other times used for import (not the word import per se but importing stuff in general). The syntax for tags is {% tag %} <content> {% endtag %}

An example usage of variables and tag in a typical django template would be:

<ul>
{% for athlete in athlete_list %}
    <li>{{ athlete.name }}</li>
{% endfor %}
</ul>

We have already seen some of this in our journey so far and therefore I think you must be familiar enough to understand what is going on.

Template Inheritance

This is the most powerful aspect of the django template engine. Using template inheritance, we can define blocks of code in a parent template that can then be overridden by any child template.

Let us try to understand how template inheritance works using our tutorial projec that we set up. First, let us make a 'base.html' file in our templates folder:

tutorial
|-- assets
|   `-- media
|       `-- student_pics
|           |-- airplanes-children-toys-dolls-920860.jpg
|           |-- akshay_gz8AM9g.jpg
|           `-- akshay.jpg
|-- manage.py
|-- students
|   |-- admin.py
|   |-- apps.py
|   |-- forms.py
|   |-- __init__.py
|   |-- migrations//
|   |-- models.py
|   |-- templates
|   |   |-- base.html  <------------------------THIS ONE RIGHT HERE
|   |   |-- dept-details.html
|   |   |-- dept-list.html
|   |   |-- stud-details.html
|   |   |-- stud-edit.html
|   |   |-- stud-list.html
|   |   `-- welcome.html
|   |-- tests.py
|   |-- urls.py
|   `-- views.py
`-- tutorial
    |-- __init__.py
    |-- settings.py
    |-- urls.py
    `-- wsgi.py

And put the following in it:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
    {% block title %}
        Base HTML 
    {% endblock title %}
    </title>
    <style>
        body {
            font-family: Arial;
            margin-bottom: 60px;
        }

        .header{
            padding: 10px 16px;
            background: #555;
            color: #f1f1f1;
        }

        .footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 60px;
            background: #555;
            color: #f1f1f1;
        }
    </style>
</head>
<body>
<header class="header" id="myHeader">
    <h1>Django Tutorial</h1>
</header>

{% block content %}
    {# Your content goes here #}
{% endblock content %}

<footer class="footer" id="myFooter">
    <h3>My Footer</h3>
</footer>
</body>
</html>

Please note lines:

To override these blocks defined in base.html file, we will first edit the welcome.html file that we created earlier.

In the file welcome.html in our templates folder, remove everything we had and put the following:

{% extends 'base.html' %}
    
{% block title %} Welcome! {% endblock title %}
{% block content %}
    <h1>Welcome!!!</h1>
{% endblock content %}

Now go back to 127.0.0.1:8000 in your browser and if we are lucky and everything went well, you should see the following:

Template inheritance

Success!!! If you look at the base.html and its blocks that we defined, you will notice that we replaced the content that would have gone in those blocks with those in welcome.html.

We were able to do this by telling Django Template Engine that our welcome.html file will extend the base.html file using the {% extends 'base.html' %} declaration at the top of the welcome.html file. Note that the extends template tag should be declared at the start of the file.

Then, declare the blocks that we are going to replace and put the content that will go in those tags. It is that easy!

Now, we can similarly edit all our html files like this and only put the content and not worry about all the other stuff such as headers, footers and even navigation sidebars.

When you are done with making all the changes, you will find that we trimmed up a lot of code. This helps making the code cleaner so much!

After this short detour, let us continue with our Class Based Views (CBDs).