在Python Web開發中，我們經常需要爲頁面添加樣式（如CSS）和交互效果（如JS）。Flask作爲輕量級Web框架，雖然專注於後端邏輯，但也提供了方便的方式來管理這些前端靜態資源。本文將用最簡單的步驟，教你如何在Flask中正確引入CSS和JS文件，避免常見的路徑錯誤和渲染問題。
一、什麼是靜態資源？¶
靜態資源指的是頁面中不隨用戶操作動態變化的文件，主要包括：
- CSS文件：控制頁面樣式（如顏色、佈局、字體等）
- JS文件：實現頁面交互（如按鈕點擊、表單驗證、動態內容更新等）
- 圖片、字體、圖標等也屬於靜態資源
這些文件需要與後端代碼（如Flask應用）配合，才能讓頁面“活”起來。
二、Flask靜態資源的默認目錄¶
Flask默認會在項目根目錄下尋找名爲static的文件夾，所有靜態資源（CSS、JS、圖片等）應放在這裏。這是因爲Flask會自動將static文件夾映射爲Web訪問的/static/路徑，例如：
- static/style.css 對應訪問路徑 http://localhost:5000/static/style.css
三、項目結構搭建¶
先創建一個標準的Flask項目結構，確保靜態資源路徑正確：
my_flask_app/ # 項目根目錄
├── app.py # Flask應用主文件
├── static/ # 靜態資源文件夾（默認）
│ ├── css/ # CSS子文件夾（可選，用於分類管理）
│ │ └── style.css # 自定義CSS文件
│ └── js/ # JS子文件夾（可選）
│ └── script.js # 自定義JS文件
└── templates/ # 模板文件夾（存放HTML文件）
└── index.html # 首頁模板
關鍵說明：¶
- 必須創建
static和templates文件夾：Flask依賴這兩個文件夾分別存放靜態資源和模板文件，否則無法自動識別。 - 子文件夾分類：CSS和JS文件可按功能放在子文件夾（如
css/、js/），便於管理複雜項目。
四、編寫靜態資源文件¶
1. CSS文件（static/css/style.css）¶
/* 簡單樣式：讓頁面標題變紅，段落文字居中 */
h1 {
color: red;
}
p {
text-align: center;
}
2. JS文件（static/js/script.js）¶
// 簡單交互：頁面加載後彈出提示
window.onload = function() {
alert("頁面加載完成！這是JS文件的效果~");
};
五、在Flask模板中引入靜態資源¶
1. 編寫Flask應用（app.py）¶
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
# 渲染首頁模板
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
2. 編寫HTML模板（templates/index.html）¶
在模板中，使用Flask的url_for函數生成靜態資源的訪問路徑（避免硬編碼路徑）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flask靜態資源示例</title>
<!-- 引入CSS文件：url_for('static', filename='css/style.css') -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<h1>Hello Flask！</h1>
<p>這是一段測試文字，會被CSS樣式修飾。</p>
<!-- 引入JS文件：url_for('static', filename='js/script.js') -->
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>
關鍵說明：¶
url_for('static', filename='...')：這是Flask的核心語法，filename參數需填寫靜態資源在static文件夾中的相對路徑（包括子文件夾）。<link>標籤：用於引入CSS文件，rel="stylesheet"表示這是樣式表。<script>標籤：用於引入JS文件，src屬性指定JS文件路徑。
六、運行驗證效果¶
- 啓動Flask應用：運行
app.py，控制檯會顯示：
* Running on http://127.0.0.1:5000/
- 訪問頁面：打開瀏覽器訪問
http://localhost:5000，你會看到：
- 標題文字爲紅色（CSS生效）
- 頁面加載後彈出提示框（JS生效）
七、常見問題與解決方法¶
問題1：CSS/JS不生效，瀏覽器控制檯報錯404¶
原因：Flask找不到靜態文件，路徑錯誤。
解決：
- 檢查static文件夾是否存在，文件名是否拼寫正確（大小寫敏感）
- 確認filename參數是否包含子文件夾（如css/style.css而非style.css）
問題2：模板中無法渲染CSS/JS¶
原因：未正確使用render_template或模板路徑錯誤。
解決：
- 確保render_template('index.html')中index.html在templates文件夾下
- 檢查HTML文件是否在<!DOCTYPE html>之後正確引入<link>和<script>標籤
問題3：路徑複雜時如何管理？¶
如果靜態資源層級較多（如static/css/admin/style.css），只需將filename參數寫爲相對路徑：
<link rel="stylesheet" href="{{ url_for('static', filename='css/admin/style.css') }}">
八、總結¶
正確管理Flask靜態資源的核心是：
1. 放在static文件夾：Flask自動識別，避免路徑硬編碼
2. 使用url_for生成路徑：靈活處理路徑變化，避免404錯誤
3. 規範項目結構：通過子文件夾分類管理CSS、JS，便於維護
通過以上步驟，你就能輕鬆在Flask中引入CSS和JS，讓頁面擁有漂亮的樣式和交互效果。如果遇到問題，優先檢查路徑和文件夾是否正確，或在瀏覽器控制檯（F12）查看是否有404錯誤提示，這是排查靜態資源問題的關鍵！