django-allauthでログイン画面やユーザー登録画面の見た目(UI)を美しくする方法

やりたいこと

・django-allauthでは機能提供だけで見た目を整えられていないのでUIを整えたい

方法

・簡単にやりたいためBootstrapを導入する。

bootstrap4の導入

$ pip install django-bootstrap4

settings.py の INSTALLED_APPS に 'bootstrap4' を追加します。

django-allauthのテンプレートの編集

まず、django-allauth公式のGithubをgit cloneします。

コチラからダウンロード

次に、django-allauthのテンプレートフォルダの中身を自分のプロジェクトのテンプレートフォルダにコピーします。(accountフォルダの中にlogin.htmlやlogout.htmlが入っているのが確認できます。)

ユーザー登録時に使われるsignup.htmlの見た目を変えたければformタグの中身を以下のように設定します。

templates/accout/signup.html

{% extends "base.html" %} # ここを変更(元は'account/base.html')

{% load i18n %}
{% load bootstrap4 %} # この行を追加
{% block head_title %}{% trans "Signup" %}{% endblock %}

{% block content %}
<h1>{% trans "Sign Up" %}</h1>

<p>{% blocktrans %}Already have an account? Then please <a href="{{ login_url }}">sign in</a>.{% endblocktrans %}</p>

<form class="signup" id="signup_form" method="post" action="{% url 'account_signup' %}">
  {% csrf_token %}
  {% bootstrap_form form layout='horizontal' %} #ここを変更 (元は{{ form.as_p }})
  {% if redirect_field_value %}
  <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
  {% endif %}
  <button type="submit">{% trans "Sign Up" %} &raquo;</button>
</form>

{% endblock %}

完成

だいぶましな見た目になりました。まだまだ詰めるところがありますが、後はbootstrapを使えばすぐにできます。login.htmlやlogout.htmlも同じ要領で見た目を整えられます。