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

Question

默认情况下，Allauth 的消息以文本文件的形式存储在模板目录中，类似于：

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

这些使用了 django 的模板标签，但不是 'HTML friendly'。我想为这些设计风格并拥有类似的东西：

{% 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 自己的警报 classes。在视图中创建消息时...

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 class 将为 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 classes 反映了 Django 的消息级别，因此这些消息将自动获得 Bootstrap 的正确格式。但是 Django 最严重的级别是 error 而 Bootstrap 的是 danger.

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

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

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

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

您还可以将额外的标签传递给 Django 消息并将它们用于条件格式：例如，请参阅 extra message tags in the docs and 。

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

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

django allauth custom messages: Styling messages with html/css

html

css

django

django-allauth

django-messages