Django - Add Master Template

Django supports template inheritance. The concept of inheritance in Django is very similar to inheritance in object-oriented programming. The idea is that the output rendered by each view in a web application must follow a uniform pattern or look, even though each view may render a different template.

Suppose a Django app has three URL routes registered with three views. We want to design the template in such a way that each view should have a page header, a footer and a sidebar with links and the variable content displayed to its right.

The Master Template

A base class in any object-oriented language (such as Python) defines attributes and methods and makes them available to the inherited class. In the same way, we need to design a master template that provides an overall skeleton for other templates.

The master template (sometimes called "base template"), along with the common structure, also marks the dummy blocks. The child template inherits the common structure and overrides the blocks to provide respective contents. Such blocks are marked with "block – endblock" construct.

{% block block_name %}
   ...
   ...
{% endblock %}

The master template may have more than one such blocks in different places. Each one should be provided a unique identifier.

The HTML code for our master template (base.html) is as follows −

<!doctype html>
<html>
<body>
   <!--header-->
   <div style="height:10%;">
      <h2 align="center">My Web Application</h2>
      <hr>
   </div>
   <div style="width:100%;">
      <!—side bar-->
      <div style="width:20%; float:left; border-right-style:groove">
         <ul>
            <b>
               <li><a href="">home</a></li>
               <li><a href="register/">register</a></li>
               <li><a href="login/">login</a></li>
            </b>
         </ul>
      </div>
      <!--contents-->
      <div style="margin-left:21%;">
         <p>
            {% block contents %}
            {% endblock %}
         </p>
      </div>
   </div>
   <br><br><br>
   <!--footer-->
   <hr>
   <div>
      <h4 align="right">All rights reserved</h4>
   </div>
</body>
</html>

The template for the home page (index.html) inherits this base.html by the tag −

{% extends "base.html" %}

It populates the dummy content block with its own content −

<!doctype html>
<html>
<body>
   {% extends "base.html" %}
   {% block contents %}
      <h2 align="center">This is Home page</h2>
   {% endblock %}
</body>
</html>

Define a View

Let us define a view that renders this template −

from django.http import HttpResponse
from django.shortcuts import render

# Create your views here.
def index(request):
   return render(request, "index.html", {})

Register the View

We also need to register this view in urls.py −

urlpatterns = [
   ...,
   path('home/', views.index, name='home'),
]

When http://localhost:8000/myapp/home URL is opened, the home page template is rendered with the header, sidebar and footer as designed in base.html −

Print Page