Пользовательские сообщения django allauth: стилизация сообщений с помощью html/css

Question

Сообщения Аллаута по умолчанию хранятся в виде текстовых файлов в каталоге шаблонов, и они выглядят примерно так:

{% 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 и синий и тд.

Уровни сообщений по умолчанию и строковые представления 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 классы отражают уровни сообщений Джанго, но самый серьезный уровень Джанго error тогда как Bootstrap's danger, Чтобы сделать Джанго error сообщения уровня легко отображаются в Bootstrap's alert-danger класс, изменить DEFAULT_TAGS вход из ERROR: 'error' в ERROR: 'danger', Или в качестве альтернативы, чтобы сохранить основной код Django, как 'ERROR': MESSAGES_ERROR_STRING и определите эту константу в вашем файле настроек. (Вы можете даже создавать собственные классы Bootstrap и определять свои собственные уровни сообщений Django, чтобы соответствовать им.)

Если вы хотите настроить вещи специально с помощью allauth, например, установить разные уровни сообщений по умолчанию, например, сообщение входа в систему как info уровень, а не success - вы можете изменить их прямо в allauth.account.views (а также allauth.socialaccount.views)

Вы также можете передать дополнительные теги в сообщения Django и использовать их для условного форматирования: см., Например, дополнительные теги сообщений в документации и этот ответ.