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


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

【Docker】で構築したDjangoのホームぺージでトップページを作成する方法

2020年5月22日

今回は、無料でも使用できるWebサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークの「Bootstrap」を利用してトップページに表示させるまでの設定方法をまとめました。

簡単に適用できる簡単な方法を実施したので参考にしてください。


【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> #編集後

ブラウザでBootstrapのテンプレートが反映されていることを確認

上記設定が完了したら、ブラウザを立ち上げ、対象のURLへアクセスします。
それぞれでテンプレートのページが表示されたことが確認できます。

PC

スマホ

以上で、Dangoで構築したWebサイトにBootstrapテンプレートを適用する手順となります。


関連記事


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ABOUTこの記事をかいた人

blank

インターネット関連のSEをやっています。 ネットワーク、サーバー、ストレージ、仮想基盤まで幅広く手を出しており、MVNOの構築経験もあります。 現在は、Pythonを使ったプログラミングの開発をしネットワークの自動化ツールを作成しています! Pythonの入門書も作成しているので、ぜひ参考にしてください!