Припустимо, ви додали у представлення повідомлення про те, що користувач успішно зберіг дані. І тепер користувач, очікуючи побачити цей результат, бачить... нічого. Вітаю, ви щойно створили невидиме повідомлення! Щоб це виправити, ми навчимося відображати повідомлення з Django Message Framework у шаблонах, стилізувати їх (трохи краси точно не завадить) і, що важливо, зробити так, щоб ці повідомлення зникали після їх показу.
У цій лекції розглянемо всі ключові моменти інтеграції повідомлень у ваш додаток. Ми напишемо шаблон, який покаже повідомлення користувачу, додамо стилізацію з використанням CSS і навчимося обробляти різні рівні повідомлень.
Як отримати повідомлення у шаблоні?
Django робить все максимально просто. Щоб відображати повідомлення у шаблоні, достатньо використовувати змінну messages, яка автоматично доступна, якщо ви підключили контекстний процесор django.contrib.messages.context_processors.messages у налаштуванні TEMPLATES.
Перевіримо це. Ось приклад базового шаблону:
<!DOCTYPE html>
<html>
<head>
<title>Приклад з повідомленнями</title>
</head>
<body>
<h1>Приклад сторінки</h1>
{% if messages %}
<ul>
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
</body>
</html>Що тут відбувається? Логіка проста:
- Ми перевіряємо, чи є повідомлення у змінній
messages. - Якщо повідомлення є, ми ітеруємося по них за допомогою циклу
for. - На кожній ітерації відображаємо повідомлення.
Запустіть веб-сервер і спробуйте, наприклад, надіслати повідомлення через messages.success() у своєму представленні. Наш шаблон акуратно виведе повідомлення на екран.
Оформлюємо повідомлення: CSS-стилі
Звісно, виводити повідомлення просто текстом — це нудно (і некрасиво). Час додати трохи магії CSS.
Додамо базові стилі для кожного рівня повідомлень: success, error, warning, info. Для цього використовуємо атрибут message.level_tag, який автоматично додає всім рівням повідомлень відповідний CSS-клас.
Оновимо наш шаблон:
<!DOCTYPE html>
<html>
<head>
<title>Приклад з повідомленнями</title>
<style>
/* Базові стилі */
.message {
padding: 10px;
margin: 10px 0;
border-radius: 5px;
color: #fff;
}
/* Стилі для рівнів */
.message.success {
background-color: #4caf50; /* Зелений */
}
.message.error {
background-color: #f44336; /* Червоний */
}
.message.warning {
background-color: #ff9800; /* Помаранчевий */
}
.message.info {
background-color: #2196f3; /* Синій */
}
</style>
</head>
<body>
<h1>Приклад сторінки</h1>
{% if messages %}
<div class="messages">
{% for message in messages %}
<div class="message {{ message.tags }}">
{{ message }}
</div>
{% endfor %}
</div>
{% endif %}
</body>
</html>Зверни увагу на:
- Використання
{{ message.tags }}. Цей атрибут автоматично перетворює рівень повідомлення на CSS-клас, наприкладsuccess,errorтощо. - CSS-оформлення. Ми додали базові стилі для кожного типу повідомлень. Тепер успіхи будуть зеленими, помилки — червоними, попередження — помаранчевими, а інформаційні повідомлення — синіми.
Запусти застосунок — і насолоджуйся результатом!
Рівні повідомлень і кастомізація
Якщо у тебе виникне бажання повністю змінити текст або стиль повідомлень, можна скористатися рівнем повідомлень (message.level).
Припустимо, ти хочеш показувати кастомний текст залежно від рівня. Ось як це можна зробити:
{% for message in messages %}
<div class="message {{ message.tags }}">
{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}
<strong>Помилка!</strong> {{ message }}
{% elif message.level == DEFAULT_MESSAGE_LEVELS.SUCCESS %}
<strong>Успіх:</strong> {{ message }}
{% else %}
{{ message }}
{% endif %}
</div>
{% endfor %}
Тут ми перевіряємо рівень повідомлення за допомогою DEFAULT_MESSAGE_LEVELS, який містить константи рівня (наприклад, ERROR або SUCCESS).
Видалення повідомлень після відображення
Django Message Framework створює тимчасові повідомлення за замовчуванням. Це означає, що після їх показу вони автоматично видаляються із системи. Але якщо ти хочеш використовувати постійні повідомлення, їх потрібно вимкнути вручну (не переймайся, це рідко потрібно на практиці).
Для тимчасових повідомлень жодних додаткових налаштувань не потрібно. Але якщо повідомлення чомусь "застрягають", перевір, чи налаштований MessageMiddleware у твоєму проєкті:
MIDDLEWARE = [
...
'django.contrib.messages.middleware.MessageMiddleware',
...
]
Відображення повідомлень у наслідуваних шаблонах
Зазвичай у реальних проєктах всі повідомлення виводяться у базовому шаблоні, який наслідується іншими сторінками. Ось приклад з використанням base.html:
<!-- base.html -->
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}Заголовок{% endblock %}</title>
</head>
<body>
<div class="container">
{% if messages %}
<div class="messages">
{% for message in messages %}
<div class="message {{ message.tags }}">
{{ message }}
</div>
{% endfor %}
</div>
{% endif %}
{% block content %}{% endblock %}
</div>
</body>
</html>У результаті повідомлення будуть виводитися з base.html, а контент дочірніх сторінок буде додаватися в блок content.
А дочірній шаблон виглядатиме так:
{% extends "base.html" %}
{% block title %}Приклад сторінки{% endblock %}
{% block content %}
<h1>Ласкаво просимо!</h1>
<p>Це приклад дочірнього шаблона.</p>
{% endblock %}
У результаті повідомлення будуть виводитися з base.html, а контент дочірніх сторінок буде додаватися в блок content.
Практичне завдання
- Додай вивід повідомлень у твій базовий шаблон
base.html, використовуючи підхід з прикладів вище. - Стилизуй повідомлення на свій смак. Використовуй інші кольори, додай іконки для кожного типу (наприклад, галочку для успіху і "хрестик" для помилок).
- Спробуй використовувати JavaScript або CSS-анімації для плавного зникнення повідомлень після їх показу.
Тепер твої повідомлення не лише функціональні, але й естетичні. Сповіщення допомагають значно покращити користувацький досвід, створюючи інтерактивний і зручний додаток, який зрозумілий навіть людині, далекій від технологій. Не забувай дбати про стилістику: користувачі обожнюють, коли краса і функціональність йдуть рука об руку. 😉
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ