Лекції
Почати
Почати навчання
JavaRush /Курси /Модуль 3: Django /Використання include для повторного використання шаблонів...

Використання include для повторного використання шаблонів

Модуль 3: Django
Рівень 5 , Лекція 8
Відкрита

Сьогодні ми будемо говорити про те, як зробити ваш код у шаблонах Django більш читабельним, модульним і дружнім до змін. Скажемо "ні" копіпасту коду в кожному файлі шаблону та скоротимо кількість помилок, пов'язаних з оновленням одного й того ж контенту у декількох місцях.

На допомогу в цьому приходить чудовий інструмент — тег {% include %}.

Що таке {% include %}?

Тег {% include %} — це чарівна паличка в Django Template Language (DTL), яка дозволяє вбудовувати вміст одного шаблону в інший. Він ідеально підходить для таких випадків, коли частина HTML-коду повторюється на сторінках, і ти не хочеш копіювати та вставляти його у всі файли. Замість цього ти створюєш невеликий шаблон для цієї повторюваної частини, а потім просто "включаєш" його у потрібних місцях.

Приклад використання {% include %}

1. Створюємо файл для загального шаблону

Припустимо, у нас є сайт із кількома сторінками, і кожна з них має однаковий футер (підвал). Замість того щоб копіювати код футера в кожен шаблон, ми винесемо його в окремий файл.

Створи файл footer.html у директорії твоїх шаблонів, наприклад:

project/
├── templates/
│   ├── base.html
│   ├── home.html
│   ├── about.html
│   └── footer.html
Kotlin

Наповнення footer.html може бути наступним:

<footer>
    <p>&copy; 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 %}

  1. Передача даних у включені шаблони

Іноді включеним шаблонам потрібні дані. Наприклад, уявімо, що футер має відображати поточний рік. Це легко зробити.

У вашому представленні (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>&copy; {{ current_year }}, My Super Awesome Django Project</p>
</footer>

Футер автоматично оновиться, коли настане наступний рік (ура, менше ручної роботи!).

2. Обробка помилок при включенні

Якщо включений файл не знайдено, Django викине помилку TemplateDoesNotExist. Щоб уникнути цього, можна скористатися спеціальним параметром only, який відключає передачу контексту у включений шаблон. Використовуйте це, якщо впевнені, що включеному шаблону не потрібні дані з контексту.

{% include 'footer.html' only %}

Якщо раптом файл відсутній, можна використовувати default:

{% include 'footer.html' only %} {% default %}
  1. Включення файлів із підкаталогів

Для більш складних проєктів шаблони часто організовують по папках. Наприклад:

project/
├── templates/
│   ├── includes/
│   │   ├── header.html
│   │   ├── footer.html
│   │   └── sidebar.html
│   ├── base.html
│   └── home.html

Тепер, щоб підключити футер, вказуємо повний шлях:

{% include 'includes/footer.html' %}

Такий підхід спрощує навігацію та підтримання порядку.

Практичний приклад: повторюваний хедер і футер

Давай зробимо приклад з навігацією і футером, які використовуються на всіх сторінках.

  1. Створи header.html:
<header>
    <nav>
        <ul>
            <li><a href="/">Головна</a></li>
            <li><a href="/about/">Про нас</a></li>
            <li><a href="/contact/">Контакти</a></li>
        </ul>
    </nav>
</header>
  1. Створи footer.html:
<footer>
    <p>&copy; {{ current_year }} Твій Django Проєкт</p>
</footer>
  1. Зміни 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 %}Мій Django Сайт{% endblock %}</title>
</head>
<body>
    <!-- Включаємо хедер -->
    {% include 'includes/header.html' %}

    <main>
        {% block content %}{% endblock %}
    </main>

    <!-- Включаємо футер -->
    {% include 'includes/footer.html' %}
</body>
</html>

Тепер хедер і футер автоматично відображаються на всіх сторінках, що наслідують base.html.

Поради та найкращі практики

  1. Не зловживайте include: розділяйте шаблони тільки тоді, коли це дійсно зменшує дублювання коду. Якщо частина HTML унікальна для однієї сторінки, краще залишити її в шаблоні цієї сторінки.

  2. Використовуйте логічні імена для файлів: шаблони в папці includes мають бути легко впізнаваними. Наприклад, header.html краще, ніж top_part.html.

  3. Думайте про модульність: робіть вміст включених шаблонів незалежним. Чим менше вони залежать від зовнішніх даних, тим простіше їх повторно використовувати.

  4. Слідкуйте за контекстом: завжди знайте, які змінні доступні в включеному шаблоні, щоб уникнути помилок.

За допомогою {% include %} ваш код у шаблонах стане компактнішим, логічнішим і простішим у підтримці. Unicode, DRY-принцип і ваш майбутній колега, який візьме проєкт на підтримку, будуть вам вдячні!

Коментарі
ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ