Django 3: Jinja и HTML-шаблоны с методом render

Этот урок посвящен отображению полноценных HTML-шаблонов с использованием шаблонизатора Jinja и метода render.

Использование метода render

Метод render позволяет указать, какой HTML-шаблон отображать при переходе пользователя на конкретную страницу. Например, при переходе на главную страницу вызывается функция index, которая возвращает нужный HTML-шаблон. Для корректной работы методу render необходимо передать два параметра:

  1. request (запрос) — принимаемый из функции представления.
  2. Имя HTML-шаблона.

Структура шаблонов

Все HTML-шаблоны должны находиться в папке templates внутри приложения (не внутри папки проекта). Рекомендуется создать внутри templates ещё одну папку с именем приложения (например, main). Это предотвращает конфликты при использовании нескольких приложений.

Создание HTML-шаблонов

Внутри папки приложения (например, main/templates/main) создаются HTML-файлы. Например, index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Главная страница</title>
</head>
<body>
    <h1>Главная страница</h1>
    <p>Главная страница</p>
</body>
</html>

После запуска локального сервера командой python manage.py runserver и перехода в браузер по соответствующему адресу отобразится index.html.

Шаблон about.html

Аналогично создадим шаблон about.html для страницы «О нас»:

<!DOCTYPE html>
<html>
<head>
    <title>Про нас</title>
</head>
<body>
    <h1>Про нас</h1>
    <p>Про нас</p>
</body>
</html>

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

При наличии повторяющегося кода в шаблонах (например, в index.html и about.html), рекомендуется создать общий шаблон, из которого будут наследоваться остальные. Создадим layout.html:

<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>

Здесь используются блоки title и content шаблонизатора Jinja для динамического заполнения содержимого.

В index.html и about.html используем директиву extends:

{% extends 'main/layout.html' %}

{% block title %}Главная страница{% endblock %}
{% block content %}
    <h1>Главная страница</h1>
    <p>Главная страница</p>
{% endblock %}

Аналогично для about.html:

{% extends 'main/layout.html' %}

{% block title %}Про нас{% endblock %}
{% block content %}
    <h1>Про нас</h1>
    <p>Про нас</p>
{% endblock %}

Подключение файлов с помощью include

Директива include позволяет подключать части кода из других файлов. Создадим test.html:

<p>Проверка</p>

В других шаблонах можно подключить test.html с помощью:

{% include 'main/test.html' %}

Использование метода render, наследования шаблонов и директивы include упрощает разработку и поддержку веб-приложений на Django, позволяя эффективно организовывать код и избегать дублирования. В следующем уроке будет создан более красивый дизайн сайта.

Что будем искать? Например,программа