bugl
bugl
HomeLearnPatternsSearch
HomeLearnPatternsSearch

Loading lesson path

Learn/Django/Display Data
Django•Display Data

Django Add Master Template

The extends Tag

In the previous pages we created two templates, one for listing all members, and one for details about a member. The templates have a set of HTML code that are the same for both templates. Django provides a way of making a "parent template" that you can include in all pages to do the stuff that is the same in all pages. Start by creating a template called master.html, with all the necessary HTML elements:

Formula

Master my_tennis_club/members/templates/master.html

<!DOCTYPE html> <html> <head>

<title>{% block title %}{% endblock %}</title>

</head> <body>

{% block content %}
{% endblock %}

</body> </html> Do you see Django block Tag inside the <title> element, and the <body> element? They are placeholders, telling Django to replace this block with content from other sources.

Modify Templates

Now the two templates ( all_members.html and details.html ) can use this master.html template. This is done by including the master template with the

{% extends %}

tag, and inserting a title block and a content block:

Formula

Members my_tennis_club/members/templates/all_members.html
{% extends "master.html" %}
{% block title %}

Formula

My Tennis Club - List of all members
{% endblock %}
{% block content %}

Formula

< h1 > Members </h1 >

<ul>

{% for x in mymembers %}
<li><a href="details/"> </a></li>
{% endfor %}

</ul>

{% endblock %}

Formula

Details my_tennis_club/members/templates/details.html
{% extends "master.html" %}
{% block title %}

Details about

{% endblock %}
{% block content %}

<h1> </h1>

Formula

< p > Phone </p >
< p > Member since: </p >

Formula

< p > Back to < a href ="/members"> Members </a ></p >
{% endblock %}

If you have followed all the steps on your own computer, you can see the result in your own browser:

Formula

127.0.0.1:8000/members/.
If the server is down, you have to start it again with the runserver command:

python manage.py runserver

Previous

Django Add Link to Details

Next

Django Add Main Index Page