1. はじめに
今回はDjangoにBootstapを導入する方法を紹介します。
また、Bootstap導入後に前回の「DjangoのWebアプリケーションにユーザ認証を追加する(django-allauth)」で作成したログイン画面に適用していきます。
2. django-bootstrap5をインストール
pipでdjango-bootstrap5をインストールします。
pip install django-bootstrap5
3. settings.pyの変更
settings.pyのINSTALLED_APPSにdjango_bootstrap5を追加します。
INSTALLED_APPS = [
...
'django_bootstrap5', # 追加
]
4. テンプレートに適用
テンプレートの先頭行に下記のコードを追加します。
{% load django_bootstrap5 %}
テンプレートのヘッダに下記のコードを追加します。
<head>
...
{% bootstrap_css %}
{% bootstrap_javascript %}
</head>
これでBootstrapの導入は完了になります。
5. django-allauthのテンプレートをカスタマイズ
django-allauthのテンプレートファイルをカスタマイズするにはdjango-allauthのテンプレートファイルを自身のtemplatesの下にコピーして編集します。
django-allauthの場所はpip showコマンドで確認できます。Locationに記載されているのがインストールされているパスになります。
$ pip show django-allauth
Name: django-allauth
Version: 0.51.0
Summary: Integrated set of Django applications addressing authentication, registration, account management as well as 3rd party (social) account authentication.
Home-page: http://www.intenct.nl/projects/django-allauth/
Author: Raymond Penners
Author-email: raymond.penners@intenct.nl
License: UNKNOWN
Location: /home/vagrant/.local/lib/python3.8/site-packages
Requires: requests-oauthlib, Django, requests, python3-openid, pyjwt
Required-by:
6. Bootstrap適用後の画面
Bootstrapを適用し、django-allauthのテンプレートをカスタマイズした結果は以下のようになります。
ログイン画面
ユーザ登録画面
パスワード再設定画面
7. おわりに
今回はDjangoにBootstrapを導入し、デザインを改良しました。
今後もDjangoについて勉強した内容を投稿していきたいと思います。