【Django】Bootstrapのテンプレートを適用する方法

2020年5月24日2020年6月10日

前回、CentOS8で構築したDockerでDjangoのコンテナを構築し、簡単なWebサイトのトップページを設定するまでの手順をまとめました。

【Django】Bootstrapのテンプレートを適用する方法（環境：CentOS8、Dockerコンテナ）

今回は、Bootstrapから入手したテンプレートを使用し、Djangoのトップページに反映するまでの流れをまとめます。

まずは、Bootstrapのテンプレートですが、シンプルなデザインで、モバイル表示にも適している「simple-sidebar」のテンプレートを入手します。
以下のURLからダウンロードします。

「simple-sidebar」ダウンロードサイト
https://startbootstrap.com/templates/simple-sidebar/

テンプレートをダウンロードした後は、djangoプロジェクトを展開している海藻で、「templates」フォルダ配下に「index.html」、「static」フォルダ配下にそのほかのcssなどのファイルをアップします。

配置は以下の通りとなります。
※「templates」配下のbase.htmlは無視してください。

django/
|-- Dockerfile
|-- db-data
|-- docker-compose.yml
|-- manage.py
|-- myhp
|-- mysite
|-- requirements.txt
|-- ssl_certs
|-- static
|   |-- LICENSE
|   |-- css
|   |-- gulpfile.js
|   |-- index.html
|   |-- package-lock.json
|   |-- package.json
|   `-- vendor
`-- templates
    |-- base.html
    `-- index.html

Djangoプロジェクトの「setting.py」を編集

次に、「template」フォルダ配下のindex。htmlにcssなどのファイルを読み込ませるために、プロジェクト配下の「settings.py」に以下を追記します。

$ vim mysite/settings.py

ファイル最終行の「STATIC_URL」の下に追記します。

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

「template」配下に設置した「index.html」を編集

次にtemplateフォルダ配下にアップしたindex.htmlを編集します。

vim template/index.html

base.htmlを使用している場合は、必ず　{% extends ‘base.html’ %}　が先頭で記載されていないといけないので注意しましょう。

今回はとりあえず、index.htmlで表記したいので以下を参考にしてください。

<!DOCTYPE html>
{% load static %}

------中略------
  <!-- Bootstrap core CSS -->
  #<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> #編集前
  <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet"> #編集後

------中略------

  <!-- Custom styles for this template -->
  #<link href="css/simple-sidebar.css" rel="stylesheet"> #編集前
  <link href="{% static 'css/simple-sidebar.css' %}" rel="stylesheet"> #編集後

------中略------

  <!-- Bootstrap core JavaScript -->
  #<script src="vendor/jquery/jquery.min.js"></script> #編集前
  <script src="{% static 'vendor/jquery/jquery.min.js' %}"></script> #編集後
  #<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> #編集前
  <script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script> #編集後