CODEWITHSUNDEEP
pythondjangodjango-templates
eatonphil
eatonphil

Reputation: 13682

is dividing a template into parts and including each part bad?

I have a base template that I'd like to split up into three parts: header, body, footer. Then I use the base template to include the three sub-templates. However, from what I've seen, this means I cannot override {{ block }} content. Is using includes a bad idea then? Or is there a way to override block content in an included template?

I know that you can send static context variables to the included segment, but it needs to be more dynamic.

My code:

In header.html

<html>
    <head>
        <script url="..."></script>
        <link rel="..." />
        {% block head_extension %}

        {% endblock %}
    </head>
    <body>
        <header>
            <div class="headerstuff">
            </div>
        </header>

Then in the body.html file:

        <div class="container">
            {% block content %}
                Foo fum my content    
            {% endblock %}
        </div>

footer.html:

        <footer>
            {% block footer %}
                Copyright 2015
            {% endblock %}
        </footer>
    </body>
</html>

base.html:

{% include "header.html" %}
{% include "body.html" %}
{% include "footer.html" %}
<!-- and the part that doesn't work -->
{% block head_extension %}
    <script src="unique_script"></script>
{% endblock %}
{% block content %}
    My unique content
{% endblock %}
{% block footer %}
    Copyright 2011
{% endblock %}
<!-- end broken django templating try -->

Am I doing something wrong? The templating documentation seemed to indicate that what I am trying to do doesn't work. It seems like this would be the best way to create easy-to-read templates. Is it better just to have all parts in one large file? As you can imagine, the header, body, and footer elements are much larger than this demonstration. But the point remains.

I am hoping there is a way to do what I'm thinking of that I'm not aware of.

Thanks in advance

Upvotes: 3

Views: 2728

Answers (1)

Aamir Rind
Aamir Rind

Reputation: 39659

Your approach is fine but you are doing this in wrong order. First of all the html starting <html> and ending tag </html> should not be split into different files, it is good to have it in base.html.

Below is an example of how to follow the breakup structure:

base.html

<html>
    <head>
        <!-- Some stuff here which should be included in all templates for example js or css -->
        {% block extra_css %}
            <!-- to included app-template dependent css -->
        {% endblock extra_css %}

        {% block extra_js %}
            <!-- to included app-template dependent js -->
        {% endblock extra_js %}

        {% block extra_head %}
            <!-- for anything else inside head -->
        {% endblock extra_head %}

    </head>
    <body>
        {% block menu %}
            <!-- Default menu here -->
            {% block extra_menu %}
                <!-- extend menu based on template -->
            {% endblock extra_menu %}
        {% endblock menu %}

        {% block content %}
            <div>This is good</div>
        {% endblock content %}

        {% include "footer.html" %}

        {% block bottom_js %}
            <!-- if you want to have manual js scripts at bottom -->
        {% endblock bottom_js %}
    </body>
</html>

Now base.html is all setup now lets suppose from another child template you want to override the base.html block content you will do:

child.html

{% extends "base.html" %}

{% block content %}
    <div>This is really good</div>
{% endblock content %}

So when the page will be loaded you will see this is really good instead of this is good (which was defined in base.html inside content block) because you just override it.

If you want that whatever inside the content block in base.html should also be preserved then you need to extend the block rather than overriding it completely by using method {{ block.super }}

child.html

{% extends "base.html" %}

{% block content %}
    {{ block.super }}
    <div>This is really good</div>
{% endblock content %}

Now you will see both this is good and this is really good. Hope this will clarify your concept and will lead you good.

Upvotes: 7

Related Questions