使用靜態檔案

Created: November-22, 2018

Web 應用程式通常需要 CSS 或 JavaScript 檔案等靜態檔案。要在 Flask 應用程式中使用靜態檔案，請在程式包中或模組旁邊建立一個名為 static 的資料夾，該資料夾將在應用程式的/static 上提供。

使用模板的示例專案結構如下：

MyApplication/
    /static/
        /style.css
        /script.js
    /templates/
        /index.html
    /app.py

app.py 是帶有模板渲染的 Flask 的基本示例。

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

要在模板 index.html 中使用靜態 CSS 和 JavaScript 檔案，我們需要使用特殊的靜態端點名稱：

{{url_for('static', filename = 'style.css')}}

因此， index.html 可能包含：

<html>
    <head>
        <title>Static File</title>
        <link href="{{url_for('static', filename = 'style.css')}}" rel="stylesheet">
        <script src="{{url_for('static', filename = 'script.js')}}"></script>
    </head>
    <body>
        <h3>Hello World!</h3>
    </body>
</html>

執行 app.py 後，我們將在 http：// localhost：5000 /中看到該網頁。