在Flask中,templates是用來存放網頁模板的資料夾,Flask使用Jinja2作為模板引擎。當我們使用Flask的render_template()方法去渲染模板時,它會去templates資料夾中尋找指定的模板檔案。
day4:.
│ app.py
│
└─templates
index.html
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)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Hello World!
</body>
</html>
(這邊怕有人不知道稍微說一下,在VS Code中寫HTML只要打個!再按tab就可以快速幫你生成簡單的架構了。)
3.傳遞變數到模板中
可以傳遞變數到模板中,在模板中使用雙大括號 {{ }} 來顯示變數。
@app.route("/hello")
def hello():
name = "John"
return render_template("index.html", name=name)
<h1>Hello {{ name }}!</h1>
我們可以發現我們給的name='John'
也一起給到了HTML裡了
說到static我們要先了解甚麼是靜態檔案(static files),靜態檔案通常是指在運行期間是固定不變的例如HTML、CSS、JS、圖片等,通常由網站應用程式直接提供給用戶端,但HTML我們已經知道他是放templates資料夾中了,那剩下的呢?沒錯我們就是要建立一個叫做static的資料夾如下
Day4:.
│ app.py
│
├─static
│ style.css
│
└─templates
index.html
我們可以在HTML中透過下面的方法取得static中的style.css檔案。
<link rel="stylesheet" href="{{ url_for('static', filename='style.css')}}">
我們甚至也可以直接訪問靜態路徑
http://127.0.0.1:5000/static/style.css
在開發模式下,Flask 會自動防止緩存靜態檔案,所以修改後可以立即看到效果。
上面說的templates資料夾及static資料夾都是我們通常會取的名字,假設我們今天想要自定義靜態檔案路徑的話,我們可以通過app.static_url_path
修改靜態檔案對應的 URL 前綴,或是像下面一樣:
app = Flask(__name__, static_url_path='/assets')
現在靜態檔案的路徑就是 /assets
了,我們來測試看看。
我們先確定自己的底下有存在這幾個檔案。
day4:
│
│ app.py
│
├─templates
│ index.html
│
└─assets
style.css
我在css中將文字變成紅色,執行起來可以看到他有正確的讀取到我們的檔案。
同時可以通過 app.static_folder
修改靜態檔案的資料夾名稱。