如何修改django-messages-to-bootstrap-notify默认设置实现自定义通知

我来帮你搞定这个问题！django-messages-to-bootstrap-notify把Django的messages框架和Bootstrap Notify结合得很顺手，但默认设置肯定满足不了所有场景，下面分几种方式调整它的默认行为，实现完全自定义的通知显示：

1. 修改全局默认配置（settings.py） #

你可以在项目的settings.py里添加BOOTSTRAP_NOTIFY_SETTINGS字典，全局覆盖默认的通知参数，比如超时时间、显示位置、类型映射、图标等。示例代码如下：

BOOTSTRAP_NOTIFY_SETTINGS = {
    # 通知默认显示时长（毫秒），设为0则不会自动消失
    'DEFAULT_TIMEOUT': 6000,
    # 默认显示位置，可选值：top-right, top-left, bottom-right, bottom-left, top-center, bottom-center
    'DEFAULT_POSITION': 'top-center',
    # 把Django消息级别映射到Bootstrap Notify的类型
    'DEFAULT_TYPE_MAPPING': {
        'debug': 'info',
        'info': 'info',
        'success': 'success',
        'warning': 'warning',
        'error': 'danger',  # Django的error对应Bootstrap的danger样式
    },
    # 不同类型通知的默认图标（支持Glyphicon、Font Awesome等）
    'DEFAULT_ICON': {
        'success': 'fa fa-check-circle',
        'info': 'fa fa-info-circle',
        'warning': 'fa fa-exclamation-circle',
        'danger': 'fa fa-times-circle',
    },
    # 可选：添加默认动画效果
    'DEFAULT_ANIMATE': {
        'enter': 'animated fadeInDown',
        'exit': 'animated fadeOutUp'
    }
}

这样所有通知都会默认使用这些设置，不用每个消息单独配置。

2. 针对单个消息自定义参数 #

如果需要给某条通知单独设置（比如更长的超时时间、特殊位置或图标），可以在发送消息时使用extra_tags参数，用分号分隔多个自定义选项。示例：

from django.contrib import messages

def my_custom_view(request):
    # 自定义超时10秒，显示在底部左侧的成功消息
    messages.success(
        request,
        '数据导入成功！',
        extra_tags='timeout:10000;position:bottom-left'
    )
    # 自定义图标和CSS类的错误消息
    messages.error(
        request,
        '<strong>注意！</strong> 文件格式不正确，请重新上传',
        extra_tags='icon:fa fa-ban;class:custom-error-notify'
    )
    return render(request, 'my_page.html')

注意：如果消息里包含HTML内容，要确保你的模板里没有对消息做转义，或者在模板中使用{{ message.message|safe }}（但要注意XSS风险，确保内容是可信的）。

3. 重写模板实现完全自定义渲染 #

如果默认的JavaScript渲染逻辑不符合需求，你可以自己重写库的模板。步骤如下：

1. 在你的项目templates目录下创建bootstrap_notify文件夹
2. 复制库默认的messages.html模板内容（一般在库的安装目录下的templates/bootstrap_notify/里）到这个新文件夹中
3. 修改模板里的JavaScript代码，添加你需要的自定义逻辑。比如调整通知的结构、添加额外按钮、修改动画等：

{% if messages %}
    <script>
        $(document).ready(function() {
            {% for message in messages %}
                // 基础配置
                var baseOptions = {
                    message: "{{ message.message|escapejs }}",
                    type: "{{ message.tags|bootstrap_notify_type }}",
                    timeout: {{ BOOTSTRAP_NOTIFY_SETTINGS.DEFAULT_TIMEOUT }},
                    placement: {
                        from: "{{ BOOTSTRAP_NOTIFY_SETTINGS.DEFAULT_POSITION.split('-')[0] }}",
                        align: "{{ BOOTSTRAP_NOTIFY_SETTINGS.DEFAULT_POSITION.split('-')[1] }}"
                    },
                    icon: "{{ message.tags|bootstrap_notify_icon }}",
                    // 添加关闭按钮的自定义样式
                    template: '<div data-notify="container" class="col-xs-11 col-sm-3 alert alert-{0}" role="alert">' +
                                '<button type="button" aria-hidden="true" class="close" data-notify="dismiss">&times;</button>' +
                                '<span data-notify="icon"></span> ' +
                                '<span data-notify="title">{1}</span> ' +
                                '<span data-notify="message">{2}</span>' +
                                '<div class="progress" data-notify="progressbar">' +
                                    '<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
                                '</div>' +
                                '<a href="{3}" target="{4}" data-notify="url"></a>' +
                              '</div>'
                };

                // 合并extra_tags里的自定义选项
                {% if message.extra_tags %}
                    var customOpts = "{{ message.extra_tags }}".split(';').reduce(function(obj, item) {
                        var parts = item.split(':');
                        if (parts.length === 2) {
                            obj[parts[0].trim()] = parts[1].trim();
                        }
                        return obj;
                    }, {});
                    var finalOptions = $.extend(baseOptions, customOpts);
                {% else %}
                    var finalOptions = baseOptions;
                {% endif %}

                // 渲染通知
                $.notify(finalOptions);
            {% endfor %}
        });
    </script>
{% endif %}

通过修改template参数，你可以完全自定义通知的HTML结构，添加标题、进度条或者其他元素。

4. 自定义CSS样式美化通知 #

最后，你可以通过CSS来调整通知的外观，比如背景色、边框、字体大小等。比如针对上面的custom-error-notify类：

.custom-error-notify {
    background-color: #ff6b6b;
    border-radius: 8px;
    border-left: 6px solid #c92a2a;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.custom-error-notify .close {
    color: #fff;
    font-size: 20px;
}

把这段CSS加到你的项目样式文件里，对应的通知就会应用这些样式。

内容的提问来源于stack exchange，提问作者Alireza Navaie