Django Messages：如何修改其HTML结构？

我来帮你搞定这个需求！其实Django里处理这种自定义消息结构的需求非常灵活，核心是利用模板覆盖的机制——毕竟官方消息框架的默认渲染逻辑就是通过模板实现的，我们完全可以自己改写它。

第一步：创建自定义消息模板 #

Django默认的消息渲染模板在django/contrib/messages/templates/messages.html，但我们绝对不需要去修改源码！只需要在你自己项目的templates目录下新建一个同名的messages.html文件，Django会优先加载你项目里的模板。

把原来直接放在<div>里的文本，包裹到带自定义类的<span>中，示例代码如下：

{% if messages %}
    {% for message in messages %}
        <!-- 外层div保留原有的标签类，方便区分消息类型 -->
        <div class="message message-{{ message.tags }}">
            <!-- 这里的message-text就是你可以自定义的类，用来绑定伪元素样式 -->
            <span class="message-text">{{ message }}</span>
        </div>
    {% endfor %}
{% endif %}

第二步：绑定伪元素样式 #

现在你就可以针对这个.message-text类尽情发挥::before和::after的魔力了，比如：

.message-text::before {
    content: "📢 ";
    color: #2c3e50;
    margin-right: 6px;
}

.message-text::after {
    content: " 🔚";
    color: #7f8c8d;
    margin-left: 6px;
}

如果需要根据消息类型（比如success/error/warning）给span加不同的类，还可以进一步细化模板：

{% if messages %}
    {% for message in messages %}
        <div class="message message-{{ message.tags }}">
            <span class="message-text message-text-{{ message.tags }}">{{ message }}</span>
        </div>
    {% endfor %}
{% endif %}

对应的CSS也可以针对性调整：

.message-text-success::before {
    content: "🎉 ";
    color: #27ae60;
}

.message-text-error::before {
    content: "❌ ";
    color: #e74c3c;
}

第三步：确保模板被正确加载 #

在你的基础模板（比如base.html）里，用{% include 'messages.html' %}来引入这个自定义模板；如果你之前用的是{% render_messages %}标签，只要你的项目模板目录在Django自带模板之前被加载（这是默认配置），自定义的messages.html就会自动生效。

其实这种自定义需求在Django里很常见，官方文档里虽然没有专门把这个场景拎出来讲，但模板覆盖是Django模板系统的核心特性之一，很多组件的自定义都是靠这个思路实现的~

内容的提问来源于stack exchange，提问作者Katharine Osborne