127

I would like to provide the same content inside 2 different base files.

So, I'm trying to do this:

page1.html:

{% extends "base1.html" %}
{% include "commondata.html" %}

page2.html:

{% extends "base2.html" %} 
{% include "commondata.html" %}

The problem is that I can't seem to use both extends and include. Is there some way to do that? And if not, how can I accomplish the above?

commondata.html overrides a block that is specified in both base1.html and base2.html

The purpose of this is to provide the same page in both pdf and html format, where the formatting is slightly different. The above question though simplifies what I'm trying to do so if I can get an answer to that it will solve my problem.

8 Answers 8

130

When you use the extends template tag, you're saying that the current template extends another -- that it is a child template, dependent on a parent template. Django will look at your child template and use its content to populate the parent.

Everything that you want to use in a child template should be within blocks, which Django uses to populate the parent. If you want use an include statement in that child template, you have to put it within a block, for Django to make sense of it. Otherwise it just doesn't make sense and Django doesn't know what to do with it.

The Django documentation has a few really good examples of using blocks to replace blocks in the parent template.

https://docs.djangoproject.com/en/dev/ref/templates/language/#template-inheritance

3
  • 1
    my commondata.html has the block defined in it. But it is not replacing the parent tempalte's block... If instead of doing an include I write the exact data twice in both page1.html and page2.html then of course it does work. But I want to factor out that commonality into commondata.html. Sep 11, 2009 at 4:17
  • Seems to work, I remember trying this but I must have had a typo or something at the time causing it not to work. Sep 11, 2009 at 4:19
  • 1
    see my answer below for why it didn't work for me the first time, I'll leave you with the accepted answer though because you answered the question I asked correctly. Sep 11, 2009 at 5:22
86
+50

From Django docs:

The include tag should be considered as an implementation of "render this subtemplate and include the HTML", not as "parse this subtemplate and include its contents as if it were part of the parent". This means that there is no shared state between included templates -- each include is a completely independent rendering process.

So Django doesn't grab any blocks from your commondata.html and it doesn't know what to do with rendered html outside blocks.

0
45

This should do the trick for you: put include tag inside of a block section.

page1.html:

{% extends "base1.html" %}

{% block foo %}
   {% include "commondata.html" %}
{% endblock %}

page2.html:

{% extends "base2.html" %}

{% block bar %}
   {% include "commondata.html" %}
{% endblock %}
1
  • What significance does 'foo' or 'bar' blocks have here? Do you reference them in the base templates? I'm scratching my head as to why this would work.
    – AlxVallejo
    Mar 1 at 16:35
13

More info about why it wasn't working for me in case it helps future people:

The reason why it wasn't working is that {% include %} in django doesn't like special characters like fancy apostrophe. The template data I was trying to include was pasted from word. I had to manually remove all of these special characters and then it included successfully.

0
3

You can't pull in blocks from an included file into a child template to override the parent template's blocks. However, you can specify a parent in a variable and have the base template specified in the context.

From the documentation:

{% extends variable %} uses the value of variable. If the variable evaluates to a string, Django will use that string as the name of the parent template. If the variable evaluates to a Template object, Django will use that object as the parent template.

Instead of separate "page1.html" and "page2.html", put {% extends base_template %} at the top of "commondata.html". And then in your view, define base_template to be either "base1.html" or "base2.html".

2

Added for reference to future people who find this via google: You might want to look at the {% overextend %} tag provided by the mezzanine library for cases like this.

2

Edit 10th Dec 2015: As pointed out in the comments, ssi is deprecated since version 1.8. According to the documentation:

This tag has been deprecated and will be removed in Django 1.10. Use the include tag instead.


In my opinion, the right (best) answer to this question is the one from podshumok, as it explains why the behaviour of include when used along with inheritance.

However, I was somewhat surprised that nobody mentioned the ssi tag provided by the Django templating system, which is specifically designed for inline including an external piece of text. Here, inline means the external text will not be interpreted, parsed or interpolated, but simply "copied" inside the calling template.

Please, refer to the documentation for further details (be sure to check your appropriate version of Django in the selector at the lower right part of the page).

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

From the documentation:

ssi
Outputs the contents of a given file into the page.
Like a simple include tag, {% ssi %} includes the contents of another file
– which must be specified using an absolute path – in the current page

Beware also of the security implications of this technique and also of the required ALLOWED_INCLUDE_ROOTS define, which must be added to your settings files.

1
1

You can use both {% extends %} and {% include %} in one template.

For example, there is base.html below which displays Base:

# "templates/base.html"

<p>Base</p>

{% block content %}{% endblock %}

And, there is additional.html below which displays Additional:

# "templates/additional.html"

<p>Additional</p>

And, there is index.html below which displays Index:

# "templates/index.html"

<p>Index</p>

Now, you can extend base.html and include additional.html inside of {% block %} in addition to <p>Index</p> in index.html as shown below, then render index.html with a Django View:

# "templates/index.html"

{% extends "base.html" %}

{% block content %}
    <p>Index</p>
    {% include "additional.html" %}
{% endblock %}

Then, Base, Index and Additional are displayed as shown below:

Base

Index

Additional

Be careful, the code outside of {% block %} below and the code inside of {% block %} which base.html doesn't have below are ignored in index.html:

# "templates/index.html"

{% extends "base.html" %}

<p>Index</p>
{% include "additional.html" %}

{% block test %}
    <p>Index</p>
    {% include "additional.html" %}
{% endblock %}

So, only Base is displayed as shown below:

Base

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.