Previous Page Next Page

Embedding Templates

In addition to extending templates with parent templates, Django allows you to load the entire contents of a template into an existing template using the include tag. Unlike the extends tag, the include tag simply inserts the full contents of the specified template file into the existing template.

The include tag can be useful for creating "canned" components for your website, such as a calendar, that need to be displayed on several web pages.

For example, the following line of code embeds a template named comments.html into a template:

{% include "comments.html" %}

Did you Know?

You can specify a variable name instead of a filename in the include tag. This allows you to dynamically control what the content will be by specifying different template filenames from within the view code.


By the Way

Variables that are available in the view template also are available in templates that are embedded using the include tag.


Try It Yourself: Embed a Template File in Another Template

In this section, you will create a quote.html template that can be embedded into other template files.

Follow these steps to create a template called quote.html and embed it into person_details.html:

1.
In an editor, create and open a file called iFriends/templates/quote.html.

2.
Add the contents of Listing 7.11 to the quote.html file.

Listing 7.11. Full Contents of iFriends/templates/quote.html

<table width="100%">
<tr bgcolor="aa22aa" width="100%"><td align="center">
<font size="4">Quote of the Day</font>
</td></tr>
<tr><td align="center">
<font size="5">I think therefore I am.</font>
</td></tr>
<tr><td align="center">
<font size="2">- Rene Descartes</font>
</td></tr>
</table>

3.
Save the file.

4.
Open the iFriends/templates/Person/person_details.html file in an editor.

5.
Remove the following lines of code:

<p align="center">Comments</p>
<p align="center">None.

6.
Add the following line of code, as shown in Listing 7.12, to embed the quote.html file:

{% include "quote.html" %}

7.
Save the file.

8.
Access the following URL in a web browser to verify that the new view is working correctly, as shown in Figure 7.8:

http://127.0.0.1:8000/People/Info/2/



Figure 7.8. Web page generated by people_details.html by extending iFriends_base.html and embedding quote.html.

[View full size image]


Listing 7.12. Full Contents of iFriends/templates/person_details.html

Code View:
{% extends "iFriends_base.html" %}

{% block title %}test{% endblock %}
{% block content %}
<table width=100%>
<tr bgcolor="aabbcc"><td colspan="3">
<font size="5" color="white">Personal Information</font>
</td></tr>
<tr valign="top"><td width=30% bgcolor="aaaaaa"><font color="white" size="5">
    <li>Name: {{p.name}}</li>
    <li>Birthday: {{ p.birthday }}</li>
    <li>Gender: {{ p.gender }}</li>
    <li>Desc: {{ p.desc }} </li>
</font></td>
<td width=40% bgcolor="aa99aa"><font color="white" size="4">
    {% include "quote.html" %}
</font></td>
<td width=30%>
    <h3>Contact Info</h3>
    <li>Email: {{ p.email }}</li>
    <li>Website: {{ p.favoriteURL }}</li>
</td></tr>
{% endblock %}


Previous Page Next Page