如何在Django中显示带框的Toaster提示通知？

咱们先一步步拆解问题，先修复现有代码的bug，再配置出你想要的带框提示效果：

1. 先解决基础调用的错误 #

你当前模板里的toastr调用有个关键问题：{{ message }}没加引号，toastr会把它当成JS变量而非字符串，直接运行会报错。先把模板代码改成这样：

{% for message in messages %}
    toastr.{{ message.tags }}("{{ message }}");
{% endfor %}

2. 引入Toastr的依赖文件 #

Toastr需要依赖jQuery和自身的CSS/JS文件才能工作，你得在模板里先引入这些资源（可以用CDN，也可以下载到本地）。比如在你的base模板里：

<!-- 放在<head>里引入Toastr样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">

<!-- 放在</body>结束前引入依赖和Toastr脚本 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

3. 配置带框的提示样式 #

默认的toastr没有明显边框，要实现类似示例图的效果，咱们可以通过自定义配置+CSS来实现：

第一步：设置Toastr全局配置 #

在调用toastr之前，先添加全局配置，给提示框加自定义类：

<script>
// 全局配置Toastr，添加自定义类用于加边框
toastr.options = {
    "closeButton": true,
    "progressBar": true,
    "positionClass": "toast-top-right",
    "timeOut": "5000",
    "toastClass": "toast-with-border" // 自定义类名
}

{% for message in messages %}
    toastr.{{ message.tags }}("{{ message }}");
{% endfor %}
</script>

第二步：添加自定义CSS样式 #

在模板的<style>标签或者你的CSS文件里，给这个自定义类加边框和美化样式：

.toast-with-border {
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background-color: #fff;
}

/* 不同类型的提示可以设置不同的边框色 */
.toast-success.toast-with-border {
    border-color: #28a745;
}
.toast-error.toast-with-border {
    border-color: #dc3545;
}

4. 验证Django Messages的基础配置（可选） #

确保你的Django项目已经启用了messages功能，检查settings.py里的配置：

MIDDLEWARE = [
    # 其他中间件...
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    # 其他中间件...
]

INSTALLED_APPS = [
    # 其他APP...
    'django.contrib.messages',
    # 其他APP...
]

这样调整完之后，刷新页面操作触发消息，就能看到带边框的Toaster提示了。

内容的提问来源于stack exchange，提问作者mailto sandeep