Template Includes

Django also provides you with the ability to insert templates into other templates with the include tag. The syntax of the include tag is simple:

{% include <template name> %}

The <template name> can be a string or a variable, for example:

{% include "events/announcements.html" %}

Let’s try the include tag out with a practical example. Announcements are a common function of club websites and often show on several pages on the website. The HTML for displaying announcements is a perfect candidate for an include—we can create a template for the announcements and include that template on each page we want to show the announcements. First, let’s create the announcements template and save the file with our event templates (new file):

# events\templates\events\announcements.html
1  <h2>Announcements</h2>
2  <table>
3    {% for announcement in announcements %}
4    <tr>
5      <td><strong>{{ announcement.date }}</strong></td>
6      <td>{{ announcement.announcement }}</td>
7    </tr>
8    {% empty %}
9    <tr>
10     <td><strong>{% now "m-d-y" %}</strong></td>
11     <td>No Announcements</td>
12   </tr>
13   {% endfor %}
14 </table>

We’re using some new Django template tags here, so let’s have a closer look at some of the important lines of code:

• Line 3 is the beginning of a Django for loop tag.
• Lines 5 and 6 execute for each item in the announcements list. The HTML code will render each announcement in a table row, with the date of the announcement in bold.
• Line 8 is a Django empty tag. The empty tag is an optional, but convenient, way to test if a list doesn’t exist, or is empty. It’s a neater and faster alternative to using an if...else clause to test the list.
• Lines 9 to 12 only execute if the announcements list is empty or doesn’t exist. They show a message saying there are no announcements. In line 11, we’re using Django’s now tag to show the current date. The now tag takes one parameter—the date format string. For more on date format strings, see the Django documentation.
• Line 13 is the closing tag for the Django for loop.

To include the new announcements.html template in our event calendar, we need to add one line to the calendar template (change in bold):

# \events\templates\events\calendar_base.html
1  {% extends 'base.html' %}
2  
3  {% block title %}{{ title }}{% endblock title %}
4  
5  {% block content %}
6    <h1>{{ title }}</h1>
7    <p>{% autoescape off %}{{ cal }}{% endautoescape %}</p>
8    {% include "events/announcements.html" %}
9  {% endblock content %}

In line 8, I have added an include tag which loads the new template into the calendar template. If you load up the development server now, your calendar page should look like Figure 6-7.

Figure 6-7: The empty announcements list is inserted into the page using Django’s include tag.

To get actual announcements to display, you must pass a list of announcements to the template. In a real website, you would store information on the announcements in a model in your database, but for the sake of showing how the for loop displays announcements in the included template, we will add a hard-coded list to the index view (changes in bold):

# \myclub_root\events\views.py
# ... partial listing
def index(request, year=date.today().year, month=date.today().month):
    # ...
    cal = HTMLCalendar().formatmonth(year, month)
    announcements = [
        {
            'date': '6-10-2020',
            'announcement': "Club Registrations Open"
        },
        {
            'date': '6-15-2020',
            'announcement': "Joe Smith Elected New Club President"
        }
    ]
    return render(request,
        'events/calendar_base.html',
        {'title': title, 'cal': cal, 'announcements': announcements}
    )

Save your views.py file and refresh your browser. Your event calendar should now look like Figure 6.8.

Figure 6-8: The announcements list now displays all the announcements passed to it from the view.

You wouldn’t hard-code announcements in the view like this in a real website, but it is a handy illustration of how you can use a combination of Django’s include tag and for loop to show list data in templates.