Поки ми вивчали основи Django, ми обмежувалися мінімальним HTML або взагалі його не використовували. Настав час вийти із зони комфорту розробника і почати створювати красиві та функціональні веб-сторінки.
Що таке шаблони?
Уяви пекарню. У пекаря є дві важливі речі: форма для печива та рецепт. Форма визначає, як печиво буде виглядати, а рецепт — з чого воно буде складатися. Разом вони створюють готовий продукт.
Точно так само працюють шаблони у Django. Вони розділяють зовнішній вигляд (HTML) та внутрішню логіку твого застосунку. HTML — це форма, яка визначає, як сторінка буде виглядати у браузері.
А Django Template Language (DTL) — це рецепт, який каже, які дані і куди потрібно помістити.
Шаблони не просто показують статичний HTML. Вони дозволяють:
- Динамічно відображати дані, отримані з представлень.
- Використовувати цикли, умови та фільтри для керування контентом.
- Створювати шаблони, які легко підтримувати завдяки наслідуванню.
Шаблони допомагають дотримуватись принципу "Separate of Concerns", відокремлюючи "що робити" (логіка) від "як це виглядає" (представлення).
Django Template Language (DTL)
HTML підходить для статичних сторінок, де контент не змінюється. Але в реальних проєктах потрібно показувати динамічні дані — списки користувачів, товари в магазині, коментарі до постів. Тут і стане в пригоді Django Template Language (DTL) — вбудована мова шаблонів Django.
Уявіть DTL як розумну систему підстановок. Ви створюєте HTML-сторінку зі спеціальними мітками, а Django у потрібний момент замінює ці мітки реальними даними. Наприклад, замість жорстко прописаного імені "Андрій" ви можете вставити змінну {{ user.name }}, і система сама підставить ім'я поточного користувача.
DTL дає вам три круті можливості:
- Вставляти динамічні дані з бази прямо в HTML
- Використовувати умови та цикли — наприклад, показати список тільки активних користувачів
- Перетворювати дані на льоту — форматувати дати, обрізати довгі тексти, переводити в верхній регістр
Можна сказати, DTL — це HTML на стероїдах
Як це працює: Найпростіший приклад
Ось базове представлення в Django, яке використовує шаблон:
from django.shortcuts import render
def home(request):
context = {'user_name': 'Джон'}
return render(request, 'home.html', context)Зверни увагу на функцію render:
- Вона завантажує шаблон
'home.html'. - Передає в нього дані через словник
context.
А ось і шаблон home.html:
<!DOCTYPE html>
<html>
<head>
<title>Привітання</title>
</head>
<body>
<h1>Привіт, {{ user_name }}!</h1>
</body>
</html>Результат у браузері:
<!DOCTYPE html>
<html>
<head>
<title>Привітання</title>
</head>
<body>
<h1>Привіт, Джон!</h1>
</body>
</html>Основні можливості шаблонів
Вставка змінних
використовується конструкція {{ variable }}. Наприклад:
<p>Ваше ім'я: {{ user_name }}</p>Якщо змінна user_name дорівнює "Джон", то на сторінці відобразиться <p>Ваше ім'я: Джон</p>.
умови (if)
Іноді потрібно перевірити, наприклад, чи авторизований користувач:
{% if user.is_authenticated %}
<p>Привіт, {{ user.username }}</p>
{% else %}
<p>Привіт, гість!</p>
{% endif %}
Цикли (for)
Виведення списків у шаблонах — одна з найчастіших дій:
<ul>
{% for item in items %}
<li>{{ item }}</li>
{% endfor %}
</ul>Якщо в контексті є items = ['яблуко', 'банан', 'вишня'], то результат буде:
<ul>
<li>яблуко</li>
<li>банан</li>
<li>вишня</li>
</ul>Фільтри
Дані можна форматувати прямо у шаблоні за допомогою фільтрів:
<p>Поточна дата: {{ current_date|date:"d-m-Y" }}</p>Тут current_date відобразиться у форматі "день-місяць-рік", наприклад "05-10-2023".
Як Django шукає шаблони?
Шаблони зберігаються в папці templates, яку потрібно створити всередині вашого додатку або проєкту. Наприклад:
my_project/
my_app/
templates/
home.html
Django автоматично шукає шаблони в папці templates. Щоб вона запрацювала, переконайтеся, що в settings.py додано TEMPLATES:
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [BASE_DIR / 'templates'], # Тут можна вказати додаткові директорії.
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
Практичне завдання
Крок 1: створіть шаблон home.html
Створіть папку templates всередині вашого додатку і додайте наступний файл:
<!DOCTYPE html>
<html>
<head>
<title>Домашня сторінка</title>
</head>
<body>
<h1>Привіт, {{ user_name }}!</h1>
<p>Сьогодні: {{ current_date|date:"d M Y" }}</p>
</body>
</html>Крок 2: налаштуйте представлення
Оновіть ваше представлення у views.py, щоб передати дані в шаблон:
from django.shortcuts import render
from datetime import date
def home(request):
context = {
'user_name': 'Марія',
'current_date': date.today()
}
return render(request, 'home.html', context)Крок 3: додайте маршрут
Оновіть файл urls.py:
from django.urls import path
from . import views
urlpatterns = [
path('', views.home, name='home'),
]Запустіть сервер та відкрийте браузер
Відкрийте http://127.0.0.1:8000/. Ви повинні побачити привітання та поточну дату.
Підводні камені та загальні помилки
Відсутність закриваючого тега. Якщо ти забув закрити теги, такі як
{% if %}чи{% for %}, отримаєш помилку. Django не дозволить запустити шаблон з некоректним синтаксисом.Невірний шлях до шаблону. Іноді Django не може знайти шаблон, якщо він не лежить у папці
templatesабо якщо неправильно налаштований параметрDIRSуsettings.py.Помилки у фільтрах. Не всі фільтри підходять до будь-яких даних. Наприклад, спроба відформатувати рядок як дату закінчиться помилкою:
{{ "тест"|date:"d M Y" }}.
Навіщо це потрібно розробнику?
Шаблони — це вікно у світ ваших даних. Вони дозволяють зробити сайт більш інтерактивним та привабливим для користувача. Налагодження інтерфейсів, розробка сторінок із динамічним контентом, створення структури для масштабування — усе це неможливо без розуміння шаблонів. Тепер, коли ви знаєте, як вони працюють, ви готові втілити навіть найскладніші інтерфейсні ідеї!
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ