So far in the project you’ve created about six html templates for the different pages in the application. You’ve probably already noticed that there is a lot of redundancy in these html templates. In most applications there is often a lot of repetition, i.e. headers, navigation bars, side bars, footers, the scripts that are injected into each page, etc. To help you, Django provides template inheritance. It is pretty straightforward and is similar to inheritance in Python (and other languages). To use template inheritance you will need to do the following:
identity the parts of the html page that are repeated and common across your application
create a base html template which contains the commonalities along with the structure of your page - defined by blocks
for each page in your application that follows from the base html:
- inherit from the base html template
- insert the page specific html and template tags into the blocks
For Rango, the commonalities between pages is the following html:
<HTML>
<HEADER>
<TITLE>Rango</TITLE>
</HEADER>
<BODY>
<!--- page specific content goes here -->
</BODY>
</HTML>
To tell Django that you want to specify what goes into the body section for each page you need to add in a block template tag. Create a new template called base.html and put in all the usual html pre-amble and declarations, as well as adding in the common functionality/layout that you would like to appear on each page.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<HEADER>
<META http-equiv="Content-type" content="text/html; charset=utf-8" />
<TITLE>Rango</TITLE>
</HEADER>
<BODY>
<DIV>
<DIV id="page_header">
<H1><A href="/rango/">Rango</A></H1>
<DIV id="page_user">
{% if user.is_authenticated %}
Welcome {{ user.username }} |
<A href="/rango/logout/">Logout</A>
{% else %}
<A href="/rango/register/">Register</A> |
<A href="/rango/login/">Login</A>
{% endif %}
</DIV>
</DIV>
<DIV id="page_navbar">
<A href="/rango/restricted/">Restricted</A> |
<A href="/rango/about/">About</A>
</DIV>
<DIV>
{% block sidebar %}{% endblock %}
</DIV>
<DIV id="page_content">
{% block content %}{% endblock %}
</DIV>
<DIV id="page_footer">
{% block footer %}{% endblock %}
</DIV>
<DIV>
</BODY>
</HTML>
As in the previous examples using templates, the template tags are denoted by the {% %} parentheses with the tag inside. Here the blocks are called sidebar, content and footer. In templates which inherit from base.html, you will be able to specify what content you would like to be presented within those block. In a template you can define as many blocks as you need for your page layout.
Now you’ll need to update all the other templates so that they all use base.html. This is done with the extends tag, so modify your index.html template as follows:
{% extends 'base.html' %}
{% block sidebar %}
<H2>Category List</H2>
<UL>
{% if cat_list %}
{% for cat in cat_list %}
<LI><A HREF="/rango/cat/{{ cat.url }}">{{ cat.name }}</A></LI>
{% endfor %}
{% else %}
<LI>No categories at present.</LI>
{% endif %}
<LI><A HREF="/rango/cat_add"> Add category</A></LI>
</UL>
{% endblock %}
{% block content %}
<H2>Rango says: Hello World!</H2>
<BR />
<IMG SRC="{{ STATIC_URL}}imgs/leifos.jpg" />
{% endblock %}
Now, index.html inherits from base.html - and so any changes to base.html will propagate through to index.html, and any other template that inherits from base.html.
- Update the other templates so that they also inherit from base.html. For example, the register.html template would become:
{% extends 'rango/base.html' %} {% block content %} {% if registered %} <H2>Registered</H2> <BR /> <A href="/rango/">Rango</A> says: thank you for registering. {% else %} <H2>Register here! </H2> <BR /> <FORM id="user_form" method="post" action="/rango/register/"> {% csrf_token %} {{ uform.as_p }} {{ pform.as_p }} <INPUT type="submit" name="submit" value="submit" /> </FORM> {% endif %} {% endblock %}