하고 싶은 일

・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도 같은 요령으로 외형을 정돈할 수 있습니다.