ビジネスパーソン・ガジェット置場 empty lot for business

営業や仕事、それに伴う生活を便利に楽にするツール、ガジェットを作ります。既にあるツールも自分用にカスタマイズ。

python: Flaskアプリの作成② base.htmlの作成

備忘録です。

各ページの共有項目をまとめたファイルbase.htmlを作成するための備忘録です。共有項目にはhtmlの構造とbootstrapのnavbarの設定まで含めます。

ステップ2

Flaskのhtml構造と各ページの共有部分を作成するには

その1 templates内にbase.htmlを作成

フォルダ
|_virt  #仮想環境
|_app.py
|_templates
 |_index.html
 |_base.html

 

その2 bootstrapからコードをいただく

bootstrapを使用するのでまずは、bootstrapからコードをいただきます。

getbootstrap.jp

 

中段くらいにあるスターターテンプレートをコピペしbase.htmlに貼り付け

  • title部分を自分のアプリのタイトルに編集
  • body内でjinja2の {% block content %}{% endblock %} を追加

# 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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 # titleを書き換え
    <title>やりたいこと管理</title>
  </head>
  <body>
 # jinja2のblockcontentを追加
    {% block content %}
    
    {% endblock %}

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

 

その3 index.htmlのコードを修正

  • base.htmlを継承するためのコード
  • block content内に表示する記事を追加

# index.html

# base.htmlを継承
{% extends "base.html" %}

# block content内に表示するコードを記述
{% block content%}
  <h1>hello world</h1>
{% endblock%}

 

その4 bootstrapのnavbarを追加

  • navbarのコードを別ファイル(navbar.html)に記述
  • テンプレをパーツとして読み込めるincludeを使用しnavbarのコードを読み込む

 フォルダ構成は下記のようになる

フォルダ
|_virt  #仮想環境
|_app.py
|_templates
 |_index.html
 |_base.html
 |_navbar.html

 

navbar.hmtlを作成しnavbarのコードをbootstrapサイトよりコピペしいらない部分を削除、色など適時修正

※左メニューのComponents > Navbarからいけます。

 

# navbar.html

# navbarの色をdarkに変更
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          # ホームのリンクにurl_forを利用してindex.htmlをセットする
          <a class="nav-link active" aria-current="page" href="{{url_for('index')}}">Home</a>
        </li>

      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

base.htmlからincludeで作成したnavbar.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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>やりたいこと管理</title>
  </head>
  <body>
# includeで別ファイルに記述したテンプレートを読み込める
    {% include "navbar.html" %}
# conatainerクラスで整形
    <div class='container'>
      {% block content %}
      {% endblock %}
    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

こんな感じになります。