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

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

今回は、無料でも使用できる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テンプレートを適用する手順となります。




エンジニアのオンライン学習

ITエンジニアにおすすめの教材、オンラインスクールです。
無料からエンジニアの学習ができる教材などまとめているので参考にしてください。

おすすめオンライン教材
自宅で学習ができるオンラインスクール

ITエンジニアの開発・検証・学習としてインターネット上で専用のサーバ(VPS)を利用しましょう!
実務経験はVPSで学べます。



コメントを残す

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

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

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