Сегодня мы будем говорить о том, как делать ваш код в шаблонах Django более читаемым, модульным и дружелюбным для изменений. Скажем "нет" копипасте кода в каждом файле шаблона и сократим количество ошибок, связанных с обновлением одного и того же контента в нескольких местах.
На помощь в этом приходит замечательный инструмент — тег{% include %}.
Что такое {% include %}?
Тег {% include %} — это волшебная палочка в Django Template Language (DTL), которая позволяет встроить содержимое одного шаблона в другой. Он идеально подходит для таких случаев, когда часть HTML-кода повторяется на страницах, и вы не хотите копировать и вставлять его во все файлы. Вместо этого вы создаёте небольшой шаблон для этой повторяющейся части, а потом просто "включаете" его в нужных местах.
Пример использования {% include %}
1. Создаём файл для общего шаблона
Допустим, у нас есть сайт с несколькими страницами, и каждая из них имеет одинаковый футер (подвал). Вместо того чтобы копировать код футера в каждый шаблон, мы вынесем его в отдельный файл.
Создайте файл footer.html в директории ваших шаблонов, например:
project/
├── templates/
│ ├── base.html
│ ├── home.html
│ ├── about.html
│ └── footer.html
Наполнение footer.html может быть следующим:
<footer>
<p>© 2023, My Super Awesome Django Project</p>
</footer>2. Используем {% include %} в других шаблонах
Теперь включим этот файл в другие шаблоны. Например, вот так выглядит ваш base.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}My Django Site{% endblock %}</title>
</head>
<body>
<header>
<h1>Welcome to My Django Project</h1>
</header>
<main>
{% block content %}{% endblock %}
</main>
<!-- Вставим наш футер здесь -->
{% include 'footer.html' %}
</body>
</html>Теперь каждый шаблон, который наследует base.html, автоматически получит футер.
Особенности использования {% include %}
- Передача данных в включаемые шаблоны
Иногда включаемым шаблонам нужны данные. Например, представим, что футер должен отображать текущий год. Это легко сделать.
В вашем представлении (views.py) нужно передать текущий год в контекст:
from datetime import datetime
from django.shortcuts import render
def home(request):
context = {
'current_year': datetime.now().year
}
return render(request, 'home.html', context)Теперь модифицируйте footer.html, чтобы использовать переданные данные:
<footer>
<p>© {{ current_year }}, My Super Awesome Django Project</p>
</footer>Футер автоматически обновится, когда наступит следующий год (ура, меньше ручной работы!).
2. Обработка ошибок при включении
Если включаемый файл не найден, Django выбросит ошибку TemplateDoesNotExist. Чтобы избежать этого, можно воспользоваться специальным параметром only, который отключает передачу контекста во включаемый шаблон. Используйте это, если уверены, что включаемому шаблону не нужны данные из контекста.
{% include 'footer.html' only %}
Если вдруг файл отсутствует, можно использовать default:
{% include 'footer.html' only %} {% default %}
- Включаем файлы из подкаталогов
Для более сложных проектов шаблоны часто организовывают по папкам. Например:
project/
├── templates/
│ ├── includes/
│ │ ├── header.html
│ │ ├── footer.html
│ │ └── sidebar.html
│ ├── base.html
│ └── home.html
Теперь, чтобы подключить футер, указываем полный путь:
{% include 'includes/footer.html' %}
Такой подход упрощает навигацию и поддержание порядка.
Практический пример: повторяющийся хедер и футер
Давайте сделаем пример с навигацией и футером, которые используются на всех страницах.
- Создайте
header.html:
<header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
</header>- Создайте
footer.html:
<footer>
<p>© {{ current_year }} Your Django Project</p>
</footer>- Измените
base.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}My Django Site{% endblock %}</title>
</head>
<body>
<!-- Включаем хедер -->
{% include 'includes/header.html' %}
<main>
{% block content %}{% endblock %}
</main>
<!-- Включаем футер -->
{% include 'includes/footer.html' %}
</body>
</html>Теперь хедер и футер автоматически отображаются на всех страницах, что наследуют base.html.
Советы и лучшие практики
Не злоупотребляйте
include: разделяйте шаблоны только тогда, когда это действительно снижает дублирование кода. Если часть HTML уникальна для одной страницы, лучше оставить её в шаблоне этой страницы.Используйте логические имена для файлов: шаблоны в папке
includesдолжны быть легко узнаваемыми. Например,header.htmlлучше, чемtop_part.html.Думайте о модульности: делайте содержимое включаемых шаблонов независимым. Чем меньше они зависят от внешних данных, тем проще их переиспользовать.
Следите за контекстом: всегда знайте, какие переменные доступны в включаемом шаблоне, чтобы избежать ошибок.
С помощью {% include %} ваш код в шаблонах станет компактнее, логичнее и проще в поддержке. Unicode, DRY-принцип и ваш будущий коллега, который возьмёт проект на поддержку, будут вам благодарны!
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ