Flask 筆記 | 靜態檔案處理

靜態檔案 (static file) 指的是不同請求中訪問到的資料都相同的檔案，例如圖片、影片等。

不經過路由處理：靜態檔案不會經由 Flask 中設定的路由，而是由 WSGI middleware 直接處理，最終呈現在使用者瀏覽的畫面上，而非自己使用 @app.route() 加上。
特殊的路由：檔名對應著網址路徑

靜態檔案路徑設定

通常來說我們會直接將該靜態檔案資料夾建立在根目錄（也就是與 app.py 同一層）之下。

1	mkdir static

建立成功後無需改動程式碼，因為 Flask 預設靜態檔案存放在 static 資料夾：

class Flask(App):
    def __init__(
        self,
        ...
        static_url_path: str | None = None,
****        static_folder: str | os.PathLike[str] | None = "static",
        ...
    ):
        ...

一般來說，static 資料夾下會使用以下的方式將檔案進行分類，否則全部放在資料夾中會搞混，整理起來也會很麻煩：

static/
├── css/
│   └── style.css
├── js/
│   └── main.js
├── images/
│   ├── logo.png
│   └── flask.svg
├── fonts/
│   └── Roboto.woff
├── docs/
│   └── terms.pdf
└── test/
    └── test.txt

資料夾名稱	用途說明
`css/`	放置樣式表（例如 `style.css`）
`js/`	放置 JavaScript 程式碼（例如 `main.js`）
`images/`	放圖片檔案（例如 `logo.png`, `banner.jpg`）
`fonts/`	放自訂字型檔案（例如 `.ttf`, `.woff`）
`docs/`	可選，用來放一些靜態文件（例如 `terms.pdf`）
`test/`	可選，用來測試路徑用的小檔案，如 `test.txt`

建立資料夾後，只需將檔案放入資料夾中，以 /static/檔名 訪問即可。必須注意到：檔名必須包含副檔名。舉例來說，在 static 資料夾中放入 Flask 的 Logo，訪問 /static/flask.svg 即可看到如下畫面：

圖 1：靜態檔案範例-Flask Logo

或是放入 test.txt，裡面寫入文字，訪問 /static/test.txt 也會顯示結果：

圖 2：靜態檔案範例-test 純文字檔

自定義資料夾與路徑

若不想使用 Flask 預設的靜態檔案路徑，可以使用 static_url_path 設定路徑。方法如下：

app = Flask(
    __name__,
    static_folder="靜態檔案資料夾",
    static_url_path="靜態檔案網址路徑"
)

例如可以設定 static_url_path 為 my_static，嘗試訪問就變成 /my_static/檔名。

圖 3：自定義路徑