django allauth 自定义消息：使用 html/css 样式化消息

Question

Allauth 的消息默认以文本文件的形式存储在模板目录中，如下所示：

{% load i18n %}
{% blocktrans %}You cannot remove your primary e-mail address ({{email}}).{% endblocktrans %}

这些使用 django 的模板标签，但不是“HTML 友好”。 我想为这些设置样式并具有以下内容：

{% load i18n %}
<div class="alert alert-danger alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            {% blocktrans %}You cannot remove your primary e-mail address ({{email}}).{% endblocktrans %}
 </div>

但上面的代码只是将 HTML 呈现为文本。我不能将此 HTML 放在模板中，而只是在模板中执行 {{ message }}，因为我想根据每个消息的偏差（至少是颜色！）更改其中的一些。

我怎么能做到这一点？ 谢谢！

Answer 1

模板是消息样式标记的位置，而不是消息.txt 文件。如果需要，您应该能够通过 Django 的默认值或条件语句来实现每个案例的变化。我看到您正在使用 Bootstrap，对于许多用例，默认的 Django 消息传递标签很好地映射到 Bootstrap 自己的警报类。当您在视图中创建消息时...

messages.success(request, 'You have logged in successfully.')

...每个 Django 消息都包含其级别的字符串表示形式（'info'、'success' 等）作为tags attribute。您可以将这些标签属性用于许多上下文格式设置需求。因此，您可以将其传递给（例如基本）模板，例如：

<div class="alert alert-{{ messages.tags }} alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
    {{ message }}
</div>

如果您的消息具有success 级别，则此处呈现的 CSS 类将为 alert-success，因此 Bootstrap 将显示绿色警报。如果状态为info，则为alert-info，蓝色等。

Django 的默认消息级别和字符串表示在django/contrib/messages/constants.py 中定义：

DEFAULT_TAGS = {
    DEBUG: 'debug',
    INFO: 'info',
    SUCCESS: 'success',
    WARNING: 'warning',
    ERROR: 'error',
}

DEFAULT_LEVELS = {
    'DEBUG': DEBUG,
    'INFO': INFO,
    'SUCCESS': SUCCESS,
    'WARNING': WARNING,
    'ERROR': ERROR,
}

将此与 Bootstrap 的 default alert classes 和上下文格式进行比较：

info、success 和 warning 类反映了 Django 的消息级别，因此这些消息将自动获得 Bootstrap 的正确格式。但是 Django 最严重的级别是 error 而 Bootstrap 是 danger。

针对此名称冲突的建议解决方法是：保持 Django 模板标签不变，这将为元素提供一个名为 alert-error 的类。然后在 HTML 模板的某处使用几行 Javascript 将 alert-danger 作为额外类添加到这些元素：

// Javascript somewhere in your HTML template
let errorElements = document.getElementsByClassName('alert-error');
[...errorElements].forEach(el => {el.classList.add('alert-danger')});

这会将“alert-danger”类添加到具有“alert-error”类的元素中。 Bootstrap 将忽略“alert-error”，但将“alert-danger”添加到元素的类列表中，它们将获得 Bootstrap 的红色上下文格式。

如果您想专门使用 allauth 自定义内容，例如设置与 allauth 的默认值不同的消息级别 - 例如，登录消息为 info 级别而不是 success - 您可以直接在 allauth.account.views 中更改它们（和allauth.socialaccount.views)。

您还可以将额外的标签传递给 Django 消息并将它们用于条件格式：例如，请参阅文档中的 extra message tags 和 this answer。

（编辑：删除了关于更改 Django 核心代码的原始想法 - 不好。）