У цій лекції ми поговоримо про один із найпрактичніших і найпотужніших інструментів Django Template Language — теги та фільтри. З їхньою допомогою ви зможете не просто відображати дані, але й перетворювати їх так, як потрібно вашим користувачам. Готові? Поринаємо глибше в DTL!
Що таке теги та фільтри в DTL?
Теги в Django Template Language — це команди, які виконують певні дії всередині шаблону. Уявіть їх як маленьких помічників, які вирішують задачки на льоту. Наприклад, вам потрібно відобразити список об'єктів, але тільки ті, у яких певне значення фільтра. Або налаштувати логіку відображення HTML-коду — тут вам допоможуть теги.
Їх синтаксис полягає у використанні фігурних дужок із відсотками:
{% назва_тега аргументи %}
Фільтри — це «фабрика перетворень»
Фільтри — це способи зміни даних перед їх відображенням. Якщо ви хочете зменшити довжину рядка, форматувати дату або обрізати текст — це робота для фільтрів. Вони застосовуються до змінної через вертикальну риску:
{{ змінна|фільтр }}
Теги в DTL
{% for %}: цикли — основа повторень
Якщо у вас є список даних, і ви хочете пройтися по ньому та відобразити кожен елемент, то ваш найкращий друг — це {% for %}.
Приклад:
<ul>
{% for item in items %}
<li>{{ item }}</li>
{% endfor %}
</ul>
Це створить HTML-список, у якому кожен <li> міститиме один елемент із items.
Але і це ще не все. Ви можете використовувати вбудовані змінні всередині циклу, наприклад:
{% for item in items %}
{{ forloop.counter }}: {{ item }}
{% endfor %}
forloop.counter— поточний номер ітерації (починається з 1).forloop.counter0— те саме, але з 0.forloop.first—Trueдля першого елемента.forloop.last—Trueдля останнього елемента.
{% if %}: умови в шаблонах
А ось і наш улюблений умовний оператор. З ним ви можете керувати відображенням даних.
Приклад:
{% if user.is_authenticated %}
<p>Привіт, {{ user.username }}!</p>
{% else %}
<p>Ви не авторизовані. Будь ласка, увійдіть у систему.</p>
{% endif %}
Ви також можете комбінувати умови:
{% if items|length > 5 %}
<p>Довгий список!</p>
{% elif items|length == 0 %}
<p>Список порожній.</p>
{% else %}
<p>Звичайний список.</p>
{% endif %}
|length, який повертає довжину списку.
{% block %} і {% extends %}: основи наслідування шаблонів
Ці теги допоможуть вам будувати ієрархію шаблонів і перевикористовувати код.
- {% block %} використовується для визначення «блоків», які можуть бути перевизначені в дочірніх шаблонах.
- {% extends %} дозволяє наслідувати інший шаблон.
Приклад:
<!-- base.html -->
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}Базовий заголовок{% endblock %}</title>
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>><!-- child.html -->
{% extends "base.html" %}
{% block title %}Сторінка користувача{% endblock %}
{% block content %}
<p>Ласкаво просимо на сторінку користувача!</p>
{% endblock %}{% include %}: вставка інших шаблонів
Цей тег дозволяє підключити інший шаблон всередині поточного. Це зручно для повторюваних елементів (наприклад, навігації або футера).
Приклад:
{% include "navbar.html" %}
Фільтри в DTL
truncatechars: обрізка рядків
Не хочете, щоб рядок займав забагато місця? Використовуйте truncatechars!
Приклад:
{{ заголовок|truncatechars:20 }}
Якщо довжина рядка перевищить 20 символів, він буде обрізаний і доповнений трьома крапками.
date: форматування дат
Робота з датами в шаблонах спрощується за допомогою фільтра date.
Приклад:
{{ дата|date:"d M Y" }}
Це перетворить дату у формат 12 Oct 2023.
default: значення за замовчуванням
Якщо змінна — порожня, ви можете вказати значення за замовчуванням за допомогою фільтра default.
Приклад:
{{ ім'я|default:"Гість" }}
length: довжина списку
Як ви бачили раніше, length повертає кількість елементів у списку.
Приклад:
{% if список|length > 10 %}
<p>Занадто довгий список!</p>
{% endif %}
lower та upper: регістри
Хочете перетворити рядок у нижній або верхній регістр? Вам допоможуть фільтри lower та upper.
Приклад:
{{ текст|lower }}
{{ текст|upper }}
Створюємо свої фільтри
Іноді вам може знадобитися щось унікальне, як власний фільтр! Це більш складний процес, і він реалізується за допомогою Python функції та декоратора @register.filter. Наприклад, фільтр, який додає знак оклику до рядка:
from django import template
register = template.Library()
@register.filter
def add_exclamation(value):
return f"{value}!"Потім у шаблоні:
{{ "Привіт"|add_exclamation }}
І ось вам наше "Привіт!"
Приклади використання тегів і фільтрів
Приклад 1: список задач
<h1>Список задач</h1>
<ul>
{% for task in tasks %}
<li>
{% if task.completed %}
<s>{{ task.name }}</s>
{% else %}
{{ task.name }}
{% endif %}
</li>
{% endfor %}
</ul>Приклад 2: динамічне меню
<ul>
{% for link in menu %}
<li>
<a href="{{ link.url }}">{{ link.title|upper }}</a>
</li>
{% endfor %}
</ul>Вирішення типових помилок
На перших порах ви можете зіткнутися з проблемами при роботі з тегами та фільтрами. Наприклад, однією з поширених помилок є спроба викликати метод об'єкта з круглими дужками (наприклад, {{ об'єкт.метод() }}). У Django шаблонах методи не викликаються напряму! Ви можете або передавати результат методу в контекст, або використовувати готові атрибути об'єкта.
Іншою поширеною помилкою є використання тегів поза парами {% %} або фільтрів без вертикальної риски |. Якщо раптом отримуєте незрозумілі помилки в шаблоні — двічі перевірте синтаксис.
Практична робота
Спробуйте самостійно:
- Написати шаблон для відображення списку новин, де кожна новина показується з обрізаним (до 50 символів) текстом.
- Реалізувати шаблон сторінки профілю, використовуючи теги
{% if %}для перевірки, чи авторизований користувач. - Пограйтеся з іншими фільтрами, наприклад,
yesnoабоdefault_if_none.
Якщо ви пройшли всі приклади, то поступово починаєте освоювати магію DTL. Далі вас чекає ще більше можливостей для створення професійних веб-застосунків!
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ