Django DRY - 如何在 Django 模板中扩展两个 .html 文件？

Question

What do I want?

I want to extend cards/apps.html inside addstudents.html so that I don't need to write the chucks of codes multiple times. What can I do to extends multiple .html files inside DJANGO template?

Error I am getting

'extends' cannot appear more than once in the same template

WHAT TO DO?

NOTE: I don't want to use {% include %} , because the situation/condition isn't suitable.

SOME INFORMATION YOU MAY NEED...

Inside cards/apps.html

<div class="card shadow mb-4">
<div class="card-header py-3">
    <h6 class="m-0 font-weight-bold text-primary">{{card_title}}</h6>
</div>
<div class="card-body">
    {% block card_body %}
    
    {% endblock %}
</div>

Inside addstudents.html

{% extends 'layouts/panel.html' %}
{% extends 'apps/card.html' %}
{% load static %}
{% block content %}

{% with card_title='My Card TITLE' %}
{% block card_body %}
...SOME FORM, .... SOME PARAGRAPH
{% endblock %}

{% endblock %}

What's inside layouts/panel.html

layouts/panel.html contains some menu and navbars items [including CSS, bootstrap and JS dependencies].

What's apps/card.html ?

apps/card.html contains the code-snippet of HTML and Bootstrap CARD. And I don't want to write this code multiple times. That's why I want it to be manipulated via Django Template Tags .

HOPE YOU UNDERSTOOD

Answer 1

I don't think this is directly possible. But here is a work around. In the view which handles addstudents.html , add has_card to the context as True .

views.py

def app_students(request):
    # Your code
    return render(request, 'addstudents.html', {'has_card': True})

layouts/panel.html

[...]
{% if has_card %}
<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">{{card_title}}</h6>
    </div>
    <div class="card-body">
        {% block card_body %}

        {% endblock %}
    </div>
</div>
{% endif %}
[...]

addstudents.html

{% extends 'layouts/panel.html' %}
{% with card_title='My Card TITLE' %}
{% block card_body %}
...SOME FORM, .... SOME PARAGRAPH
{% endblock %}

So this, if has_card doesn't exist, won't have the card_body block, but if it does exist as a truthy value, then it will.

Answer 2

I'm not sure if it fits your need. One way could be to split the responsibilities a bit between the different templates. From given information it could be possible to put bootstrap/layout stuff in cards/apps.html and add additional blocks for childs to override to just handle the forms and view specific information.

To clarify the inheritance that may resolve the problem:

layouts/panel.html -> apps/card.html -> addstudents.html

The apps/card.html overrides block content from layout/panel.html and adds additional blocks which are used by the addstudents.html .

It can also be seen as, in words: addstudents.html extends card.html which extends panel.html. Afaik you can extend as many times you want, but not use extends twice in the same template.

cards/apps.html

{% extends 'layouts/panel.html' %}
{% block content %}
    <div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">{% block card_title %}{% endblock %}</h6>
    </div>
    <div class="card-body">
        {% block card_body %}
        
        {% endblock %}
    </div>
{% endblock content %}

addstudents.html

{% extends 'apps/card.html' %}

{% block card_title}My Card TITLE{% endblock card_title%}
{% block card_body %}
...SOME FORM, .... SOME PARAGRAPH
{% endblock card_body %}

Worth mention is also {{ block.super }} which can be quite useful sometimes if you need to render a "parent".