Django template reusability - django

Question

In our project, we use the bootstrap widget module widely.
<div class="widget">
<header>
<div class="pull-left">
<h2><i class="fa fa-shopping-cart"></i>product-list</h2>
</div>
<div class="pull-right">
<a class="btn btn-default btn-sm toggle-widget" href="#">
<i class="fa fa-minus"></i>
</a>
</div>
</header>
<div class="inner-padding">
...............
</div>
</div>
<div class="widget">
<header>
<div class="pull-left">
<h2><i class="fa fa-user"></i>
user info
</h2>
</div>
<div class="pull-right">
<a class="btn btn-default btn-sm toggle-widget" href="#">
<i class="fa fa-minus"></i>
</a>
</div>
</header>
<div class="inner-padding">
.............
</div>
</div>
We repeat these code again and again. My problem is that how can I write a template and make these code reusable.
If I make a sub template like this:
<div class="widget">
<header>
<div class="pull-left">
<h2><i class="fa {{ icon }}"></i>
{{ title }}
</h2>
</div>
<div class="pull-right">
<a class="btn btn-default btn-sm toggle-widget" href="#">
<i class="fa fa-minus"></i>
</a>
</div>
</header>
<div class="inner-padding">
{% block content %}
{% endblock %}
</div>
</div>
I can use {% include %} to include the template:
{% include "sub-template.html" with icon="..." title="..." %}
But how can I render 'block content'?
In addition, we may include this sub-template.html several times in one template:
{% include "sub-template.html" with icon="1" title="user-info" %}
{% include "sub-template.html" with icon="2" title="product-list" %}
I think this is a very common scenario, but I can not find a solution using Django template. Is there anyone can give me some suggestion?

Answer 1

In this case, I could consider a template of header only:
# header-template.html
<header>
<div class="pull-left">
<h2><i class="fa {{ icon }}"></i>
{{ title }}
</h2>
</div>
<div class="pull-right">
<a class="btn btn-default btn-sm toggle-widget" href="#">
<i class="fa fa-minus"></i>
</a>
</div>
</header>
and, then use it in widgets:
<div class="widget">
{% include "header-template.html" with icon="1" title="user-info" %}
<div class="inner-padding">
.............
</div>
</div>
<div class="widget">
{% include "header-template.html" with icon="2" title="product-list" %}
<div class="inner-padding">
.............
</div>
</div>
If you think that for some of the widgets the content is also common, then you can create a template of that too, and use it in the widget.