Jinja2 Multi-level template inheritance issue

Question

I have the following three files in a Django App, with the template engine being Jinja2

skeleton.html


    {% block head_content %}
        
         {% if page_title %} {{ page_title }} | {% endif %} Bhargavi Books & Stationery 
        
        
    {% endblock head_content %}



    
    {% block navigation %}
        
          Home
          New Bill
          View Bills
        
    {% endblock navigation %}
    

    
        {% block frame_content %}
             Body content goes here. Body for {{ content_name }}
        {% endblock frame_content %}
    

    
        {% block app_content %}
             APP content goes here. Body for {{ content_name }}
        {% endblock app_content %}
    

    {% block scripts %}
        
        
    {% endblock scripts %}

base.html

{% extends "skeleton.html" %}
{% from "macros/globalmacros.html" import
            SUIIconList,SUISimpleList,
            SUIImageLabel,SUILabel,
            SUIActionInput,SUILabeledInput,SUIInput,
            SUIDimmableActionCard,SUICard,
 %}


{% block frame_content %}
Frame Content
{% endblock frame_content %}

{% block scripts %}

{{ super() }}


{% endblock scripts %}

dashboard.html

{% extends "base.html" %}


{% block body_content %}
Body 3
{% endblock body_content %}



{% block app_content %}

DASHBOARD

{% endblock app_content %}

In this setup, Jinja renders everything except the "DASHBOARD" in the final page. However, when I add an empty block in "base.html", like so..

{% block app_content %}

App content Goes here...

{% endblock app_content %}

In the final template, "DASHBOARD" is printed. Is this some quirk in Jinja? Is this behavior defined in any docs??

YellowShark · Accepted Answer

I understand your issue: you've got template A, template B (extends template A), and template C (extends template B). There's a block defined in template A, but it's not showing up in the page that uses template C, unless you define that block in template B. If you do that, then the block in question shows up.

First: you are correct in your understanding that this is not how the Jinja template hierarchy is supposed to work. Second, I did not encounter your issue (found a different one, though), and I have constructed a proof to demonstrate this. Here's what I did (again, using Python 3 and Django 1.11):

$ python startproject myapp

In the myapp/myapp/settings.py file, I updated the template engine:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.jinja2.Jinja2',
        'DIRS': [
            os.path.join(BASE_DIR, 'myapp/templates') # hack / should add `myapp` to INSTALLED_APPS instead
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

In myapp/myapp/urls.py, I created a dummy view function & route:

from django.conf.urls import url
from django.shortcuts import render_to_response

def home(request):
    return render_to_response('dashboard.html')

urlpatterns = [
    url(r'^$', home),
]

And finally, I established those templates, but I removed the call to import your macros, along with all instances of static().

Here is the myapp/myapp/templates/skeleton.html file:




  {% block head_content %}
    
     {% if page_title %} {{ page_title }} | {% endif %} Bhargavi Books & Stationery 
  {% endblock head_content %}




  {% block navigation %}
    
      Home
      New Bill
      View Bills
    
  {% endblock navigation %}



  {% block frame_content %}
     Body content goes here. Body for {{ content_name }}
  {% endblock frame_content %}



  {% block app_content %}
     APP content goes here. Body for {{ content_name }}
  {% endblock app_content %}


{% block scripts %}
{% endblock scripts %}

Here is the myapp/myapp/base.html file:

{% extends "skeleton.html" %}

{% block frame_content %}
  Frame Content
{% endblock frame_content %}

{% block scripts %}
  {{ super() }}
{% endblock scripts %}

And here is the myapp/myapp/templates/dashboard.html file:

{% extends "base.html" %}


  {% block body_content %}
    Body 3
  {% endblock body_content %}



  {% block app_content %}
    DASHBOARD
  {% endblock app_content %}

And here is the output, after viewing that page in my browser:




  
   Bhargavi Books & Stationery 




  
    Home
    New Bill
    View Bills
  



  Frame Content



  DASHBOARD

Since this all works as expected*, my conclusion is that you might have a problem with the base.html template file. Perhaps it's failing to import your macros, and subsequently not behaving correctly? I notice a trailing comma in there, and I'm not sure if that could be problematic or not. I would suggest using the above code as a starting point, and then slowly add back in the parts that I stripped out, and perhaps the problem will become visible/understandable.

*One thing I found odd, that I don't understand: the body_content block is completely missing from my output, unless I define that block in the skeleton.html template. It doesn't work if I define it in the base.html template, which seems wrong to me, because then we're not really extending that second template (base.html)... so there does seem to be something weird there... but I was not able to encounter the original issue you described, so maybe this will be helpful in that particular regards, at least.

Jinja2 Multi-level template inheritance issue

Answers (1)

Related Questions