Djangoのテンプレートにbootstrapを使ってみる

VScodeでコンテナを使った開発について(自分用メモ) の続きとして、bootstrapで多少見栄えの良いページを作ってみる。

Sidebarを使って左ペインのLinkをクリックして右ペインに前回作ったSinglepageのAjaxで値を変更するようにしてみる。

ホルダ構成

以下のホルダ構成にbase.htmlを作成する

$HOME/work/django_pj/singlepage/

templates/
├── base.html
└── singlepage
    └── index.html

base.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    {% block header %}

    {% endblock %}
  </head>

  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-auto bg-light sticky-top">
          <div class="d-flex flex-sm-column flex-row flex-nowrap bg-light align-items-center sticky-top">
            <a href="/" class="d-block p-3 link-dark text-decoration-none" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Icon-only"><i class="bi-bootstrap fs-1"></i></a>
            <ul class="nav nav-pills nav-flush flex-sm-column flex-row flex-nowrap mb-auto mx-auto text-center justify-content-between w-100 px-3 align-items-center">
              <li> {% block button1 %}{% endblock %} </li>
              <li> {% block button2 %}{% endblock %} </li>
              <li> {% block button3 %}{% endblock %} </li>
            </ul>
            <div class="dropdown">
              <a href="#" class="d-flex align-items-center justify-content-center p-3 link-dark text-decoration-none dropdown-toggle" id="dropdownUser3" data-bs-toggle="dropdown" aria-expanded="false"><i class="bi-person-circle h2"></i></a>
              <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser3">
                <li> <a class="dropdown-item" href="#">New project...</a> </li>
                <li> <a class="dropdown-item" href="#">Settings</a> </li>
                <li> <a class="dropdown-item" href="#">Profile</a> </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-sm p-3 min-vh-100">
          <h1> contents area</h1>
          {% block contents %}
          {% endblock %}
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
  </body>
</html>

index.html

{% extends 'base.html' %}

{% block header %}
  <script>
      //  This function communicates with django (backend)
      function showSection(section) {   
          fetch(`/sections/${section}`)
          .then(response => response.text())
          .then(text => {
              console.log(text);
              document.querySelector('#content').innerHTML = text;
          });
      }

      document.addEventListener("DOMContentLoaded", function() {
          document.querySelectorAll('button').forEach(button => {
              button.onclick = function() {
                  showSection(this.dataset.section)
              }
          })
      });
  </script>
{% endblock %}

{% block button1 %}
  <button data-section="1" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Customers">
    <i class="bi-house fs-1"></i>
  </button>
{% endblock %}
{% block button2 %}
  <button data-section="2" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Customers">
    <i class="bi-table fs-1"></i>
  </button>
{% endblock %}
{% block button3 %}
  <button data-section="3" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Customers">
    <i class="bi-people fs-1"></i>
  </button>
{% endblock %}

{% block contents %}
  <div id="content"></div>
{% endblock %}