Search code examples
htmldjangoseparation-of-concerns

Django - divide html file in components

I'm just got familiar with Django template inheritance, but this won't help me in this case. I have the following template structure:

-templates
   -home
      -base.html
      -right_menu.html
      -top_menu.html
      -left_bottom_menu.html

base.html:

<!DOCTYPE html>    
{% load static %}    
<html>
    <head>
        <title>Hot or Not</title>            
    </head>    
    <body>
        <div id="mainMenuPanel" class="topMenu">
            {% block top_menu %}{% endblock %}
        </div> 
        <div class="leftPanel">
            <div class="leftBottomMenu">
                {% block left_bottom_menu %}{% endblock %}
            </div>
        </div>        
        <div id="divMenu" class="rightPanel">
            {% block right_menu %}{% endblock %}            
        </div>
    </body>
</html>

And I have 3 menus - top menu, left bottom menu, right menu. But with the loading of base.html I want to load these menus as well. Similarly to template inheritance I want to keep these menus in other files. However the template inheritance require to redirect to these html files (for example to redirect to right_menu.html) and only their block will be loaded (it is just like a master page for the other html files). How can I do this separation in Django?

Solution

  • If you put something in

    {% block right_menu %}{% end block %}

    like say

    {% block right_menu %}{% include 'right_menu.html' %}{% endblock %}

    it will be loaded by default, unless you override it within a sub template.