Help us understand the problem. What is going on with this article?

django-allauthのテンプレートファイルをカスタマイズする手順

 概要

django-allauth のテンプレートカスタマイズでやや手間取った(公式ドキュメントの記述だとカスタマイズ可能なのはわかるが具体的な設定や手順がわからなかった)ので記録しておきます。

  • Django 2.1.4
  • Python 3.6.7
  • django-allauth 0.38.0

やりたいこと

  • allauthに用意されている画面を綺麗にしたい

django-authは認証機能を実現するライブラリなのでインストール時についてくる画面(ログイン、サインアップ等)は必要最小限になっています。例えば装飾は一切施されていません。(それぞれのシステムごとにカスタマイズすることが前提) 例えば以下はログイン画面ですが、さすがにこれでリリースはできないのでカスタマイズが必要です。

手順

概要

  1. allauthのテンプレートファイル群を自身のプロジェクトディレクトリ直下にコピーする。
  2. コピーしたテンプレートファイルが利用されるようにsettings.pyのTEMPLATES定義でパスを通す
  3. カスタマイズしたいテンプレートファイルを修正する

allauthのテンプレートファイル群を自身のプロジェクトフォルダ直下にコピーする。

  • まず自身のプロジェクトディレクトリ直下に templates/allauth を作成します。
  • pipでインストールしている場合、<パッケージDIR(例えば/home/xxxx/.local/lib/python3.6)>/site-packages/allauthの下にtemplatesディレクトリがあり、その下にaccount,openid,socialaccountがあるので、カスタマイズしたいものをtemplates/allauthディレクトリにコピーします。以下はaccountディレクトリをコピーした状態です。

コピーしたテンプレートファイルが利用されるようにsettings.pyのTEMPLATES定義でパスを通す

setting.pyのTEMPLATESのDIRSに★部分を追加します。

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR, 'templates'),
            ★os.path.join(BASE_DIR, 'templates', 'allauth')★
          ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

テンプレート(公式ドキュメント)の詳細はこちら

カスタマイズしたいテンプレートファイルを修正する

例えば、login.html を修正します。プロジェクトを実行してブラウザのアドレスバーで localhost:8000/account/login を入力して修正が反映されていれば上書き成功です。あとはお好みで。

・・・省略・・・

{% block content %}

<h1>{% trans "Sign In" %}</h1>

<h3>SUCCESS!!</h3>  ★ここ★
{% get_providers as socialaccount_providers %}

{% if socialaccount_providers %}
<p>{% blocktrans with site.name as site_name %}Please sign in with one

・・・省略・・・

以上です。

s-katsumata
東京在住の二児の父。絶賛育児中。業界歴21年、フリーランス歴13年。在宅でシステム開発(受託、自社パッケージ)に従事。生涯コード書いていたいアラフィフプログラマ。悩みは老眼。ミッションはスクラッチ開発した「みなたび」を使って地域で頑張る人を応援
https://nyango.com/services/travel
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away