Python Flask - 使用 Flask Bootstrap 渲染你的HTML

發表於 更新於 分類於 ， 閱讀次數： Disqus： 文章字數： 1k

前言

如果你略懂 HTML & CSS 並且有在關注網站架設，應該對Bootstrap並不陌生。Bootstrap讓你可以快速套用現成的模板，減少開發的時間(解決不堪的美感)，其實在flask當中使用flask-bootstrap這個套件就可以在你的html中使用Bootstrap的模板

安裝與使用flask-bootstrap bootstrap-flask

  1. 安裝flask-bootstrap bootstrap-flask
    (2025.02.07. 原flask-bootstrap僅支援到bootstrap V3.8, 改使用bootstrap-flask)

    1
    2
    3
    4
    5
    6
    # 僅支援bootstrap V3.8
    # pip install flask-bootstrap

    # 支援bootstrap V4, V5
    # p.s. 若已經安裝過flask-bootstrap需先解除安裝再安裝bootstrap-flask
    pip install bootstrap-flask

  2. 引入flask-bootstrap bootstrap-flask並實體化

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    # app.py
    from flask import Flask
    from flask import render_template       # flask會在/templates中返回對應的html模板
    # from flask_bootstrap import Bootstrap # flask-bootstrap 僅支援到 V3.8
    from flask_bootstrap import Bootstrap4  # bootstrap-flask 依版本選擇V4 or V5


    app = Flask(__name__)

    # 實體化bootstrap
    bootstrap = Bootstrap4(app)             # 使用bootstrap 4

    # routes(路由, 亦是子網址)
    @app.route("/index", method=["GET", "POST"])
    def index():
        return render_template("index.html")

    if __name__ = "__main__":
      app.run(debug="True")

  3. 建立一個templates資料夾，並在其中新增index.html，引入bootstrap後就可以使用各種模板(這裡使用navbar模板)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <!-- 引入bootstrap -->
            {% include "bootstrap/base.html" %}
        </head>
        <body>
            <!-- navbar, 標籤列 -->
            <nav class="navbar navbar-default">
                <div class="container">

                  <!-- icon -->
                  <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="{{ url_for('index') }}">Flask App</a>
                  </div>
              
                  <!-- 子列 -->
                  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                      <li>
                        <a href="{{ url_for('index') }}">Home<span class="sr-only">(current)</span></a>
                      </li>
                    </ul>
                  </div>

                </div>
              </nav>
        </body>
    </html>

  4. flask project檔案路徑

    1
    2
    3
    4
    .
    ├── app.py
    └── templates
        └── index.html

  5. 將程式跑起來，接著在http://localhost:5000/index就可以看到結果了~(若你有設定其他port，依設定為準)

    FlaskBootstrap

使用bootstrap template

在bootstrap中已經有許多寫好的功能供我們使用，但網路上有需多資源開放下載免費的bootstrap temolate 開放使用 e.g.這裡。我們可以使用這些模板改成我們自己的網站，這裡使用SB Admin 2作為示範。
(2025.02.12. 新增)

  1. 解壓縮後如圖所示

  2. 將.html丟入/templates下

  3. 新增/static並將其餘css, scss, js, img等丟入

  4. 新增app.py中的routes

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    # app.py

    # 略...
    # routes(路由, 亦是子網址)
    @app.route('/index', methods=['GET', 'POST'])
    def index():
        return render_template('index.html')

    # 新增register功能
    @app.route('/register', methods=['GET', 'POST'])
    def register():
        return render_template('register.html')

    # 新增login功能
    @app.route('/login', methods=['GET', 'POST'])
    def login():
        return render_template('login.html')
      # 略...

  5. 修改register.html與login.html中.js與.css前綴，加上/static/

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <!-- register.html & login.html -->

    <!-- Custom fonts for this template-->
    <link href="/static/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

    <!-- Custom styles for this template-->
    <link href="/static/css/sb-admin-2.min.css" rel="stylesheet">

    <!-- 略... -->

  6. 修改reguster.html與login.html中URL
    調整reguster.html中 Already have an account? Login! URL連接

    1
    2
    3
    4
    5
    6
    7
    <!-- register.html -->

    <!-- 略... -->
    <!-- 將 login.html 修改為 {{ url_for('login')}} -->
    <!-- <a class="small" href="login.html">Already have an account? Login!</a> -->
    <a class="small" href="{{ url_for('login')}}">Already have an account? Login!</a>
    <!-- 略... -->

    調整login.html中 Create an Account! URL連接

    1
    2
    3
    4
    5
    6
    7
    <!-- login.html -->

    <!-- 略... -->
    <!-- 將 register.html 修改為 {{ url_for('register')}} -->
    <!-- <a class="small" href="register.html">Create an Account!</a> -->
    <a class="small" href="{{ url_for('register')}}">Create an Account!</a>
    <!-- 略... -->

    如此一來，登入頁面與註冊頁面就可以互相連接了 🤙🏻🤙🏻

Blueprint

較大型的網站幾乎都會使用blueprint，而你的檔案分佈應該會是這樣
(2025.02.12. 新增)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
├── run.py
├── app
│   ├── __init__.py
│   ├── routes.py 
│   ├── models.py            
│   ├── static
│   └── templates       
│       ├── base.html
│       ├── index.html
│       └── about.html
└── users
    ├── __init__.py
    ├── routes.py           # blueprint URL 
    └── templates
        ├── register.html   # 註冊頁面
        └── login.html      # 登入頁面

這時，原本users/templates下register.html中的{{ url_for('login')}}需修改成{{ url_for('users.login')}}(前面需加上blueorint對應的名稱)

1
2
3
4
5
6
<!-- register.html -->

<!-- 略... -->
<!-- <a class="small" href="{{ url_for('login')}}">Already have an account? Login!</a> -->
<a class="small" href="{{ url_for('users.login')}}">Already have an account? Login!</a>
<!-- 略... -->

結論

  • 使用bootstrap模板渲染html
  • ⚠️ flask-bootstrap目前僅支援到bootstrap v3.3.7 ⚠️ (最新v.5.5.3)
  • 💡 修改flask-bootstrap無法兼容bootstrap V4 & V5問題，改使用bootstrap-flask套件 2025.02.07
  • 使用bootstrap template 2025.02.12
  • blueprint下渲染html 2025.02.12