How to make a reusable template in Django?

23

votes

What is the Django way of creating a reusable template?

Example: Suppose a lot of my pages contain a "Latest News" box and following the DRY principle, I would like to define it once and reuse it in the other pages. How would I do this with Django (or Jinja2) templates?

Reading through Django's Template Documentation I get the impression that Django templates offer "top-down" inheritance where the sub-template itself determines in which super-template it is going to be embedded:

<!-- Super-template (not valid, for illustration): -->
<html>
  <head><title>Title</title></head>
  <body>{% block content %}{% endblock %}</body>
</html>

<!-- Sub-template: -->
{% extends "base.html" %}
{% block content %}
<div class="latest-news">News</div>
{% endblock %}

So what is the technique to reuse a block (a sub-template) in several places?

djangotemplatesdjango-templatesjinja2

Use the power of include. – Davor Lucic

35

votes

The most flexible way to reuse template fragments is to define an inclusion_tag. You can pass arguments to your custom tag, process them a bit in Python, then bounce back to a template. Direct inclusion only works for fragments that don't depend on the surrounding context.

Quick example from the docs:

In app/templatetags/poll_extras.py register the tag with a decoration:

from django import template
register = template.Library()

@register.inclusion_tag('results.html')
def show_results(poll):
    choices = poll.choice_set.all()
    return {'choices': choices}

In app/templates/results.html:

<ul>
{% for choice in choices %}
    <li> {{ choice }} </li>
{% endfor %}
</ul>

Calling the tag:

{% load poll_extras %}
{% show_results poll %}

13

votes

What you're looking for, is {% include "template.html"%} from Django docs.

11

votes

If you need to use {% block %} you can only do that via the {% extend %} approach. Otherwise, you can use {% include 'some.html' %} to include a bit of HTML in multiple places.

3

votes

The unofficial Django Reusable App Conventions recommends using these block names:

{% block title %}
{% block extra_head %}
{% block body %}
{% block menu %}
{% block content %}
{% block content_title %}
{% block header %} {% block footer %}
{% block body_id %} {% block body_class %}
{% block [section]_menu %} {% block page_menu %}

If everyone stuck to these conventions, it should make this problem easier. Follow the link to see the description of each block.

1

votes

As other answers have mentioned, the simplest approach is direct inclusion:

{% include 'mytemplate.html' %}

It is possible to modify the context of the rendered template (Or in simpler terms, to pass variables to the template) using

{% include 'mytemplate.html' with poll=poll %}

To use the traditional polls example, the template I would write would be:

<div class="stylish-poll">
{% for choice in poll.choices %} <!-- poll is a template variable -->
    {% include 'choice_template.html' with choice=choice %}
{% endfor %}
</div>

Another potentially useful thing to know is that the only keyword prevents the template variable poll being passed into 'choice_template.html' which it would be by default. If you do not want the choice template to have access to {{ poll }} then the include statement looks like:

{% include 'choice_template.html' with choice=choice only %}

Documentation: https://docs.djangoproject.com/en/dev/ref/templates/builtins/#include

1

votes

Example of using {% include %} tag

All data comes from Django back-end
Many values are passed to card_template.html using include tag in page1.html

card_template.html

<style>
    .choices_div {
        border-radius: 5rem;
    }

    .card-footer {
        background-color: transparent;
        border: transparent;
    }
</style>


<div class="col mb-5 px-4">
    <div class="card h-100 w-100 jumbotron choices_div {{ bg_color|default:'' }}">

        <div class="card-body p-0">
            <h3 class="card-title text-center">{{ card_title|capfirst }}</h3>
            <ul class="card-text mt-3">
                {% for c in card_body_list %}
                    <li>{{ c }}</li>
                {% endfor %}
            </ul>
        </div>
        <div class="card-footer text-center pt-4">
            {% if get_post_request == 1 %}
                <a class="btn btn-light" href="{{ href }}">{{ button_text }}</a>

            {% else %}
                <form method="post">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-light w-75" name="category"
                            value="{{ button_value }}">{{ button_text }}</button>
                </form>
            {% endif %}
        </div>

    </div>
</div>

page1.html

{% extends 'core/core.html' %}

{% block body %}
    <div class="jumbotron bg-white">
        <div class="container">
            <div class="mb-5 text-center">
                <h1>Choose user category</h1>
                <h5>Once choosen, the user category cannot be changed</h5>
            </div>
            <div class="row row-cols-lg-2 justify-content-around">
                {% for object in object_list %}
                    {% cycle 'bg_peacock' 'bg_sunset' 'bg_skin' 'bg_brown' as bg_color silent %}
                    {% include 'core/card_template.html' with card_title=object.category card_body_list=object.description get_post_request=2 button_text='Select' bg_color=bg_color button_value=object.id %}
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}

0

votes

Aïe, my fault – the answer is given in the Django Reference (and not discussed in the aforementioned Django Template Documentation)…

So: Just use {% include sub_template_name %}.

0

votes

even though the question is asked years ago, any way I will show you the method that worked for me.

base.html In your base template you need to define all of your blocks that you need to reuse in your other templates,

<html>
<head>
<meta name="description" content="{%block description%}{%endblock%}">
<meta name="keywords" content="{%block keywords%}{%endblock%}">
<title>{%block title%}{%endblock%}</title>
</head>
<body>
<!---other body stuff--->
{%block content%}
{%endblock%}
</body>
</html>

home.html

{%extends 'base.html'%}

<!--you can reuse all blocks here-->
{%block description%}Django reusable blocks, for every bage{%endblock%}
{%block keywords%}django,block, resuable,meta,title,{%endblock%}
{%block title%}django reuseable blocks for title, meta description and meta keywords{%endblock%}

{%block content%}
<div>
<h1> reuse blocks</h1>
</div>
{%endblock%}

How to make a reusable template in Django?

8 Answers