Допустим, вы добавили в представление уведомление о том, что пользователь успешно сохранил данные. И теперь пользователь, ожидая увидеть этот результат, видит... ничего. Поздравляю, вы только что создали невидимое сообщение! Чтобы исправить это, мы научимся отображать сообщения из 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-анимации для плавного исчезновения сообщений после их показа.
Теперь ваши сообщения не только функциональны, но и эстетичны. Уведомления помогают значительно улучшить пользовательский опыт, создавая интерактивное и удобное приложение, которое понятно даже человеку, далёкому от технологий. Не забывайте заботиться о стилистике: пользователи обожают, когда красота и функциональность идут рука об руку. 😉
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ