CODEWITHSUNDEEP
djangodjango-templates
Mormoran
Mormoran

Reputation: 791

django template blocks within blocks

I have a main page base.html. Inside of it, there is a {% block main_content %}:

<main>
    <div class="container-fluid p-3">

        {% block main_content %}
        {% endblock %}

    </div>
</main>

I slot my pages into that main content block.

I now have to create a lot of pages for some internal documentation, that would probably end up being small enough.

I then created a documentation.html page with another {% block documentation %} inside of the {% block main_content %}:

{% extends 'base.html' %}
{% load staticfiles %}
{% load crispy_forms_filters %}

{% block title %}Documentation{% endblock %}

{% block styles %}
<!-- CSS specific to documentation goes here -->
{% endblock %}

{% block main_content %}

    {% block documentation %}

    {% endblock documentation %}

{% endblock main_content %}

{% block end_scripts %}
<!-- Scripts specific to documentation go here -->
{% endblock end_scripts %}

I do it this way because there will be some scripts and css specific changes to this documentation section of my page that will be shared among a whole buch of sub-pages. I would then include them once in this documentation.html page, and just change the content inside the {% block documentation %} tags. Then I created a test test_page.html like this:

{% extends 'documentation.html' %}
{% load staticfiles %}
{% load crispy_forms_filters %}

{% block title %}Main Page{% endblock %}

{% block documentation %}

<p>Hello world!</p>

{% endblock documentation %}

So test_page.html would "slot" into documentation.html that then "slots" into base.html.

The reason I do this is, each small documentation block that would "slot" into documentation.html would share CSS and scripts, but the actual readable content would change.

For some reason this is not working. documentation.html is indeed "slotting" into and extending base.html, but test_page.html is NOT extending into documentation.html.

This is my TEMPLATES section on settings.py:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            str(APPS_DIR.path('templates')),
        ],
        'OPTIONS': {
            'loaders': [
                'django.template.loaders.filesystem.Loader',
                'django.template.loaders.app_directories.Loader',
            ],
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.template.context_processors.i18n',
                'django.template.context_processors.media',
                'django.template.context_processors.static',
                'django.template.context_processors.tz',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

I don't really understand why "Hello world!" in test_page.html is not showing up. Any help would be greatly appreciated.

In summary, this is what I thought would happen with the tags and content:

######## This is base.html ########
<main>
    <div class="container-fluid p-3">

        {% block main_content %}

            ######## This is documentation.html ########

            {% block documentation %}

                ######## This is test.html ########

                <p>Hello world!</p>

            {% endblock documentation %}

        {% endblock main_content %}

    </div>
</main>

So "Hello world!" inside test.html goes into documentation.html which goes into base.html. This is not the case and I don't understand what I did wrong.

Upvotes: 2

Views: 3786

Answers (2)

Reed Jones
Reed Jones

Reputation: 1393

TLDR: It's not possible.

To get blocks within blocks you can use {{ block.super }}

base.html ->

<div id='contnet'>{% block content %} {% endblock %}</div>

page1.html ->

{% extends base %} 
{% block content %}This Content Will Always Be Here {% endblock %}

page2.html ->

{% extends page1 %}
{% block content %}  New Content, Old Content: {{ block.super }} {% endblock %}

page2 will result like this

<div id='content'>New Content, Old Content: This Content Will Always Be Here</div>

However what you can't do, (if i'm not mistaking) is in page1, in that content block YOU CANNOT add a new block there like you are trying to do in your documentation.html page.

One solution is to use django flatpages, or something similar (as opposed to template inheritance)

Upvotes: 3

Essex
Essex

Reputation: 6128

This is a generic example but maybe it could help you.

When you are using heritage between files, you need to make something like this.

Base.html :

<!DOCTYPE html>
<html>
    <head>

        {% load staticfiles %}
        {% load static %}


        <title> Your Title </title>

    </head>


    <body>

        {% block content %}
        {% endblock content %}  

    </body>
</html>

Then, if you want to add content in your base file, you can create a new HTML file which looks like this :

{% extends 'Base.html' %}

{% load staticfiles %}
{% load static %}

{% block content %}

    Your content will display to Base file

{% endblock content %}

if you follow this process, it should work without issues.

Edit :

According to your templates directory, if this template is located in your base directory, try to modify this :

str(APPS_DIR.path('templates')),

to this :

'DIRS': [os.path.join(BASE_DIR, 'templates')],

Upvotes: -1

Related Questions