Django inject data after base.html

August 22, 2022

I have a base.html file which is a side bar menu. like this:

<body>
    <div class="wrapper">
        <nav id="sidebar">
            <div class="sidebar-header">
                <h3>Welcome!</h3>
            </div>
    
            <ul class="list-unstyled components">
                <li class="active">
                    <a href="#list">List</a>
                </li>
                <li>
                    <a href="#">Item 1</a>
                </li>
                <li>
                    <a href="#">Item 2</a>
                </li>
            </ul>
        </nav>
    </div>
</body>

I also have a text file that I want to show the content. So I configured my view like this:

def list(request):
    f = open('textFile.txt', 'r')
    file_content = f.read()
    f.close()
    context = {'file_content': file_content}
    print(file_content)
    return render(request, "list.html", context)

The destination HTML file which is going to show the data is like this:

{% extends 'base.html' %}

{{ file_content }}

The problem is, the text file data is now showing up. and if I remove {% extends 'base.html' %} them the text file data shows up, but I lose the side bar. How can I resolve this issue?

>Solution :

You should define some blocks to override using Django’s template inheritance:

<!--base.html-->
<body>
    <div class="wrapper">
        <nav id="sidebar">
            <div class="sidebar-header">
                <h3>Welcome!</h3>
            </div>
    
            <ul class="list-unstyled components">
                <li class="active">
                    <a href="#list">List</a>
                </li>
                <li>
                    <a href="#">Item 1</a>
                </li>
                <li>
                    <a href="#">Item 2</a>
                </li>
            </ul>
        </nav>
        <main>
            {% block content %}{% endblock %}
        </main> 
    </div>
</body>


<!--list.html-->
{% extends 'base.html' %}

{% block content %}{{ file_content }}{% endblock %}