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'等）作為標簽屬性。 您可以將這些標簽屬性用於許多上下文格式需求。 所以你可以將它傳遞給（例如基礎）模板，如：

<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和 blue 等等。

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 的默認警報類和上下文格式進行比較：

info 、 success和warning類反映了 Django 的消息級別，因此這些消息將自動獲得 Bootstrap 的正確格式。 但是Django的最嚴重的級別是error ，而引導的是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' 的元素中。 'alert-error' 將被 Bootstrap 忽略，但是將 'alert-danger' 添加到元素的類列表中，它們將獲得 Bootstrap 的紅色上下文格式。

如果你想用 allauth 專門定制一些東西，例如設置與 allauth 的默認值不同的消息級別 - 例如，登錄消息作為info級別而不是success - 你可以直接在allauth.account.views （和allauth.socialaccount.views ）。

您還可以將額外的標簽傳遞給 Django 消息，並將它們用於條件格式：例如，請參閱文檔中的額外消息標簽和此答案。

（編輯：刪除了關於更改 Django 核心代碼的原始想法 - 不好。）