Django как использовать блоки в шаблонах

В основном мой django проект состоит из шаблонов с html. Я хотел бы заполнить контекст сайта с помощью блоков. Моя проблема в том, что я хотел бы отправлять блок в сайдбар и основную часть страницы из .html файлов приложения.

Templates:
sidebar.html
footer.html
header.html
base.html

In my base.html I use:


    {% include 'partials/_sidebar.html' %}
    
    {% block content %}{% endblock %}


in my sidebar.html I use

    {% block sidebar %}{% endblock %}

and in my Application index.html i try to use:


    {% extends 'base.html' %}
    {% load static %}
    
    {% block content %}
    <h1>Home Page</h1>
    
    {% endblock %}
    
    {% block sidebar %}
    <div class="bg-white py-2 collapse-inner rounded"></div>
        <h6 class="collapse-header">Custom Components:</h6>
            <a class="collapse-item" href="{% url 'veggies' %}">veggies</a>
            <a class="collapse-item" href="{% url 'fruits' %}">fruits</a>
    </div>
    {% endblock %}

But it is obviously not working. 
The starting page triggers app/index.html with a view.

How to workaround such a problem? 

[i cant add post][1]


  [1]: https://i.stack.imgur.com/FV3Co.png

Надеюсь, я смогу продемонстрировать использование блоков, поделившись с вами некоторыми примерами шаблонов.

Начиная с базового шаблона, который обычно имеет наибольшее содержание и содержит основную разметку;

{% load static %}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <title>{% block title %}{% endblock title %}</title>

        <meta name="description" content="{% block meta_description %}{% endblock meta_description %}">
        <meta name="viewport" content="width=device-width,initial-scale=1">

        {% block styles %}{% endblock %}

        {% block scripts %}
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js"></script>
            <script type="text/javascript" src="https://kit.fontawesome.com/c3c34cb042.js" crossorigin="anonymous"></script>
        {% endblock %}

        {% block head_extras %}{% endblock %}
    </head>
    <body>
        {% block header %}{% endblock header %}


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


        {% block footer %}{% endblock footer %}

        {% block footer_scripts %}
            <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
        {% endblock %}

    </body>
</html>

Затем страница для содержания будет расширять этот шаблон, и вы включите в него блоки, в которые хотите добавить содержание;

{% extends "base.html" %}
{% load static %}

{% block title %}Content Page{% endblock title %}


{% block content %}

<section class="">
    <div class="container-fluid container-xl">
        <div class="content-section">
            <h1 class="content-section__heading-1">Content Page</h1>
            <p>Hello World!</p>
        </div>
    </div>
</section>
{% endblock content %}

Это была бы действительно простая установка. Но, как вы уже сказали, вы также можете использовать тег {% include %}.

Что это делает, так это вводит содержимое включенного шаблона в шаблон в тот момент, когда вы используете тег.

Так, в шаблоне с боковой панелью это может выглядеть следующим образом;

{% extends "base.html" %}
{% load static %}

{% block title %}Sidebar Content Page{% endblock title %}


{% block content %}

<section class="">
    <div class="container-fluid container-xl">
        <div class="content-section">
            <h1 class="content-section__heading-1">Content Page</h1>
            <p>Hello World!</p>
        </div>

        {% include 'partials/_sidebar.html' %}
    </div>
</section>
{% endblock content %}
Вернуться на верх