Django　Bootstrapの利用とテンプレートの作成

Django Python Ubuntu

初めに

前回に続いて本棚アプリケーションの作成を行いました。今回はBootstrapによるレイアウトの調整とテンプレートの作成を行いました。
これに対して行った具体的な手順をまとめます。
nissin-geppox.hatenablog.com

概要

  • Bootstrapの導入とレイアウトの変更
  • テンプレートファイルの作成
  • テンプレートの適用

Bootstrapの導入とレイアウトの変更

まず、以下のサイトよりBootstrap導入のためのコードを取得します。
getbootstrap.com
Bootstrap導入のためのコードは以下の通りです。

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.rtl.min.css"
    integrity="sha384-+4j30LffJ4tgIMrq9CwHvn0NjEvmuDCOfk6Rpg2xg7zgOxWWtLtozDEEVvBPgHqE" crossorigin="anonymous">

  <title>任意のタイトル</title>
</head>

上記のコードをBootstrapを導入したいhtmlファイルの先頭に挿入します。
今回は一覧画面のbook_list.htmlに導入しました。
また、レイアウトの調整も行いました。
book_list.htmlは以下のようになりました。

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.rtl.min.css"
    integrity="sha384-+4j30LffJ4tgIMrq9CwHvn0NjEvmuDCOfk6Rpg2xg7zgOxWWtLtozDEEVvBPgHqE" crossorigin="anonymous">

  <title>本棚アプリ</title>
</head>

<body>
  {% for item in object_list %}
  <div class="card">
    <h5 class="card-header">{{ item.title }}</h5>
    <div class="card-body">
      <p class="card-text">{{ item.text }}</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
      <h6 class="card-title">{{ item.category }}</h6>
    </div>
  </div>
  {% endfor %}
</body>
</html>

この変更により、一覧画面が以下のようになりました。

上の画像より、正常にレイアウトが変更されていることを確認することができました。

テンプレートファイルの作成

上記で導入したBootstrapを他のhtmlファイルでも簡単に利用するためにテンプレートファイルを作成します。
まず、以下のコマンドよりテンプレートを格納するディレクトリとそのファイルを生成しました。

$ mkdir templates
$ touch templates/base.html

続いて、生成したテンプレートファイルbase.htmlを以下のように作成しました。

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.rtl.min.css"
    integrity="sha384-+4j30LffJ4tgIMrq9CwHvn0NjEvmuDCOfk6Rpg2xg7zgOxWWtLtozDEEVvBPgHqE" crossorigin="anonymous">

  <title>{% block title %}{% endblock title %}| 本棚アプリ</title>
</head>

<body>
  {% block content %}{% endblock content %}
</body>

</html>

テンプレートの適用

上記で作成したテンプレートファイルbase.htmlを一覧画面book_list.htmlと詳細画面book_detail.htmlに適応させました。

テンプレートを適応させたbook_list.htmlは以下のようになりました。

{% extends 'base.html' %}

{% block title %}書籍一覧{% endblock %}

{% block content %}
{% for item in object_list %}
<div class="card">
  <h5 class="card-header">{{ item.title }}</h5>
  <div class="card-body">
    <p class="card-text">{{ item.text }}</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
    <h6 class="card-title">{{ item.category }}</h6>
  </div>
</div>
{% endfor %}
{% endblock content %}

次に、book_detail.htmlは以下のようになりました。

{% extends 'base.html' %}

{% block title %}書籍詳細{% endblock %}

{% block content %}
<div class="card">
  <h5 class="card-header"> {{ object.title }}</h5>
  <div class="card-body">
    <p class="card-text"> {{ object.text }}</p>
    <a href="#" class="btn btn-praimary">ボタン</a>
    <h6 class="card-title">{{ object.category }}</h6>
  </div>
</div>
{% endblock content %}