Django DRY - How to extend two .html files inside a Django Template? - 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".