Наследования шаблонов
Чтобы убрать дублирование кода в шаблонах нам необходимо:
- Создать папку
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 %}
Данная структура наследования называется двухуровневой. Также существует трехуровневая структура наследования шаблонов.