iT邦幫忙

2023 iThome 鐵人賽

DAY 4
0

什麼是Templates

在Flask中,templates是用來存放網頁模板的資料夾,Flask使用Jinja2作為模板引擎。當我們使用Flask的render_template()方法去渲染模板時,它會去templates資料夾中尋找指定的模板檔案。

如何使用 Flask Templates

  1. 建立模板檔案
    首先我們要建立模板資料夾,我們在原本的資料夾中再建立一個templates資料夾,之後我們的HTML檔案都放在這,Jinja2會自動檢查這個資料夾
day4:.
│  app.py
│
└─templates
        index.html
  1. 渲染模板
    使用 render_template() 方法來渲染模板。
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就可以快速幫你生成簡單的架構了。)

https://ithelp.ithome.com.tw/upload/images/20230919/20159225CyhVa10K8n.png

3.傳遞變數到模板中
可以傳遞變數到模板中,在模板中使用雙大括號 {{ }} 來顯示變數。

@app.route("/hello")
def hello():
    name = "John" 
    return render_template("index.html", name=name)
<h1>Hello {{ name }}!</h1>

https://ithelp.ithome.com.tw/upload/images/20230919/20159225LGoUQlz51R.png
我們可以發現我們給的name='John'也一起給到了HTML裡了

static

說到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

https://ithelp.ithome.com.tw/upload/images/20230919/20159225IvHISVEFno.png
我在css中將文字變成紅色,執行起來可以看到他有正確的讀取到我們的檔案。
同時可以通過 app.static_folder 修改靜態檔案的資料夾名稱。


上一篇
[Day 3] Flask Quick Start
下一篇
[Day 5] Flask模板 Jinja2基礎用法
系列文
從開始到放棄的Flask30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
c8763yee
iT邦新手 3 級 ‧ 2023-09-25 11:51:36

如果我需要同時指定多個靜態資料夾的話會需要改哪些參數?

我要留言

立即登入留言