Этот урок посвящен отображению полноценных HTML-шаблонов с использованием шаблонизатора Jinja и метода render.
Использование метода render
Метод render позволяет указать, какой HTML-шаблон отображать при переходе пользователя на конкретную страницу. Например, при переходе на главную страницу вызывается функция index, которая возвращает нужный HTML-шаблон. Для корректной работы методу render необходимо передать два параметра:
- request (запрос) — принимаемый из функции представления.
- Имя 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, позволяя эффективно организовывать код и избегать дублирования. В следующем уроке будет создан более красивый дизайн сайта.