Link Search Menu Expand Document

Наследования шаблонов

Чтобы убрать дублирование кода в шаблонах нам необходимо:

  • Создать папку templates в корне сайта. На одном уровне с mysite
  • В этой папке создаем файл base.html. В этом файле мы прописываем весь наш статичный шаблон, заменив динамические блоки при помощи тегов block
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <title>{% block title %}Новости со всего мира{% endblock %}</title>
</head>
<body>
{% include 'inc/_nav.html'%}
<div class="container mt-3">
    <div class="row">
        {% block sidebar %}SIDEBAR{% endblock %}
        {% block content %}CONTENT{% endblock %}
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
<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>
</body>
</html>

Такие блоки как шапка, футер, навигационное меню принято выносить в отдельные файлы и вызывать при помощи тега include. Данные файлы принято хранить в папке inc толькочто созданной папки templates в файлах начинающихся с символа _.

Для того чтобы Django мог найти наш базовый шаблон, мы должны прописать путь до его директории:

  • Переходим в файл settings.py
  • В переменной TEMPLATES находим значение 'DIRS': [] и заменяем его на следующее: 'DIRS': [os.path.join(BASE_DIR, 'templates')]

В файлах шаблонов конкретных страниц нам необходимо описать работу только блоков указанных в базовом шаблоне:

{% extends 'base.html' %}

{% block title %}
{{ title }} :: {{block.super}}
{% endblock %}

{% block sidebar %}
<div class="col-md-3">
    <div class="list-group">
        {% for item in categories %}
        <a href="{% url 'category' item.pk %}" class="list-group-item list-group-item-action">{{ item.title }}</a>
        {% endfor %}
    </div>
</div>
{% endblock %}

{% block content %}
<div class="col-md-9">
    {% for item in news %}
    <div class="card mb-3">
        <div class="card-header">
            Категория: <a href="{% url 'category' item.category.pk %}"> {{ item.category.title }} </a>
        </div>
        <div class="card-body">
            <div class="media">
                {% if item.photo %}
                <img src="{{ item.photo.url }}" alt="" width="350" class="mr-3">
                {% else %}
                <img src="https://picsum.photos/350/235.jpg/?blur=2" width="350" class="mr-3">
                {% endif %}
                <div class="media-body">
                    <h5 class="card-title">{{ item.title }}</h5>
                    <p class="card-text">{{ item.content|safe|truncatewords:50 }}</p>
                    <a href="#" class="btn btn-primary">Read more...</a>
                </div>
            </div>
        </div>
        <div class="card-footer text-muted">
            {{ item.created_at|date:"Y-m-d H:i:s"}}
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}

Данная структура наследования называется двухуровневой. Также существует трехуровневая структура наследования шаблонов.