How to use Django template as a component?

Question

I have 5 templates: index.html, detail.html, tag.html, login.html, register.html and a base.html

All 5 templates will extend base.html.

index.html, detail.html, tags.html have a same <section>...</section> html code section with the same data from backend.I want to add this section to base.html, so that don't need to repeat it 3 times in 3 different templates.

But the problem is,the login.html and register.html do need this section.

I know if it is React.js or Vue.js it will be very easy to use component to solve it.

Any good way to solve this question in Django?

It would be helpful if you share the contents of that section because I can't think of a use case where you need an HTML `
` but it doesn't exist on that web page. — saketk21, Aug 10 '18 at 05:54
@Tsang-YiShen Hey man you are right!After 2 days try.I find the best way is to use{% include "xxx.html" %}!!!!! — William, Aug 17 '18 at 03:57
I came from reactjs and react native and now using django. Looking at this question, the include tag only bring the component along with its style, right? I think that for it really work like a component we should be able to pass some styles too, like use a custom button template and change some colors and, most important, things like href. In parts, I solve it by passing a context inside the include tag and create some var tags in the template to receive the styles, but it doesnt work for the href. Is there a solution for this or a better way for creating components in django? — Dario Diniz, Dec 21 '20 at 02:55

saketk21 · Accepted Answer · 2018-08-16T15:49:28.617

EDIT

As the OP mentioned in the comments, the requirements are quite different from what I could interpret. Thus, the fix that can be used based on my newer understanding is simply {% include 'section.html' %} as aptly pointed out in Tsang-Yi Shen's comment.

base.html:

<!-- HTML here.... -->
{% block normal_content %}{% endblock %}

section.html

<section>
<!-- Special Section -->
</section>

Wherever you want the section, just include section.html

login.html and all others which require the special section:

{% extends "base.html" %}
{% block normal_content %}
    Hey There!
    {% block section %}
        {% include 'section.html' %}
    {% endblock %}
{% endblock %}

ORIGINAL ANSWER

Selcuk's answer explains the concept beautifully. I am adding to that answer by providing code examples for future reference.

Consider base.html:

<!-- HTML here.... -->
<!-- Common Section -->
{% block section %}{% endblock %}
{% block normal_content %}{% endblock %}
<!-- End Common Section -->

Now use a template for your section, baseWithSection.html:

{% extends 'base.html' %}
{% block section %}
<section>
....
</section>
{% endblock %}
{% block special_content %}{% endblock %}

For all pages that do not contain the section, extend base.html like so:

{% extends 'base.html' %}
{% block normal_content %}
<!-- HTML here... -->
{% endblock %}

For the pages that do require the section, extend section.html like so:

{% extends 'baseWithSection.html' %}
{% block special_content %}
<!-- Special HTML here, for templates pages requiring the section -->
{% endblock %}

This way dose not work.Because what I want is keeping the special section code in the baseWithSection.html so that it can apply to many other template,but your way will let me repeat the code,so this does not solve my question. — William, Aug 15 '18 at 05:30
The special section code *is* in the 'baseWithSection.html' template. The extending templates can use it as they need. — saketk21, Aug 15 '18 at 13:50
o yea, sorry my brain junks now,in my case {% block section %}{% endblock %} is inside the {% block normal_content %}{% endblock %}.Could you tell me what should I do in this situation?Thank you so much! — William, Aug 16 '18 at 03:51
Hi friend can you help me with this question https://stackoverflow.com/questions/52159365/reverse-for-news-detail-with-arguments-not-found-1-patterns-tried ? — William, Sep 04 '18 at 14:13

score 5 · Answer 2 · answered Aug 10 '18 at 05:58

You can have multiple base templates. For example:

base.html            # Has the minimum shared elements
|
 -> base_page.html   # extends base.html (and adds your <section>...</section>)
|   |
|    -> index.html   # extends base_page.html
|    -> detail.html  # extends base_page.html
 -> login.html       # extends.base.html
 -> register.html    # extends.base.html

How to use Django template as a component?

2 Answers2

Linked