【Django】メッセージフレームワークのフロントエンドについて

前回メッセージフレームワークについて実装しましたが、前回の状態では、
文字だけの表示となってしまう為、今回はBootstrapを使った見た目を調整とメッセージに閉じる機能について書いていきます。
前回のtemplate内容

{% if messages %} {% for message in messages %}
 {{ message }}
{% endfor %} {% endif %} 

１.view側のメッセージタイプとtemplate側のclassについて

essages.info(self.request, "メッセージ内容")
messages.success(self.request, "メッセージ内容")
messages.warning(self.request, "メッセージ内容。")
messages.error(self.request, "メッセージ内容")
messages.debug(self.request, "メッセージ内容")
 
上から順に
<div class="alert alert-{{ message.tags }}"> 
のレンダリングが
<div class="alert alert-info"> →Bootstrapでのデザイン有り
<div class="alert alert-success"> →Bootstrapでのデザイン有り
<div class="alert alert-warning"> →Bootstrapでのデザイン有り
<div class="alert alert-error"> →Bootstrapでのデザイン無し
<div class="alert alert-debug"> →Bootstrapでのデザイン無し

このままではerrorとdebugはBootstrapのデザインが適用できないので、

既にあるBootstrapのデザインに適用できるよう、

classを別のものに置き換えるという方法で、デザインを適用させます。

下が今回の方法のイメージです。

デザイン適用のイメージ
messages.error(self.request, "メッセージ内容")
 ↓
<div class="alert alert-danger"> →Bootstrapでのデザイン有り
 
messages.debug(self.request, "メッセージ内容")
 ↓
<div class="alert alert-dark"> →Bootstrapでのデザイン有り

2.setting.pyの追加
setting.pyの下の方に以下の内容を追加

......
MESSAGE_TAGS = {
 messages.ERROR: 'danger',
 messages.DEBAG: 'dark',
}

これでerrorのメッセージもBootstrapのデザインが適用できます。
実装後は下のような感じです。

3.閉じるボタンの実装
メッセージを閉じる場合のXボタンを付けるためには、templateに以下のbuttonタグを追加すれば実装できます。

{% if messages %}
　{% for message in messages %}
　　<div class="alert alert-{{ message.tags }}">
　　　<div class="message-body">
　　　　<div class=""> {{ message }} 
　　　　<button type="button" class="close" data-dismiss="alert" aria-label="Close">
　　　　　<span aria-hidden="true">&times;</span>
　　　　</button>
　　　　</div>
　　　</div>
　　</div>
　{% endfor %}
{% endif %}

実装後のイメージ（サインイン時のmessages.successの場合）