Django 消息 + bootstrap toast。如何让它发挥作用？

Question

正在尝试使 bootstrap 弹出窗口和 Django 消息正常工作。问题是我不明白如何正确地做到这一点，以便如果上下文中有消息，它将显示在网站的右上角。

文档：https://getbootstrap.com/docs/4.3/components/toasts/

Django v3.1.6 和 Bootstrap v4.5

在项目的静态文件中有bootstrap.bundle.js，它也包含在基础模板中。我不擅长django的布局，所以我将非常感谢最详细的答案。

Answer 1

你需要

a) 在视图中创建消息

b) 将消息部分添加到模板

在模板中您需要添加如下内容：

 {% if messages %}
  <div class="add-your-bootstrap-classes-here-if-needed">
    {% for msg in messages %}
        <!-- add your message displaying html here -->
    {% endfor %}
  </div>
{% endif %}

在视图中，您只需使用 Django 消息传递框架文档 https://docs.djangoproject.com/en/3.1/ref/contrib/messages/ 中列出的方法之一。

Answer 2

您可以使用 MESSAGE_TAGS 设置修改模板中显示的消息类。

将此添加到您的 settings.py

MESSAGE_TAGS = {
    messages.DEBUG: 'alert-info',
    messages.INFO: 'alert-info',
    messages.SUCCESS: 'alert-success',
    messages.WARNING: 'alert-warning',
    messages.ERROR: 'alert-danger',
}

然后将它们显示在您的模板中（最好是在您的基本模板中）

{% for message in messages %}
    <div class="alert {{ message.tags }} alert-dismissible shadow fade show" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        {{ message | safe }}
    </div>
{% endfor %}

Django 消息 + bootstrap toast。如何让它发挥作用？

Django messages + bootstrap toast. How to make it work?

django

message

toast

bootstrap-4