Skip to content

[Flask] 學習心得筆記 (2): 使用 render_template 套用 HTML 模板

系列文章

介紹

在使用 Flask 這個框架開發網頁的時候，我們可以透過 render_template() 這個函式輕鬆地呈現出 HTML 網頁的樣式 —— 畢竟提到網頁開發，就不能不提到經典的 HTML，而且『樣式模板使用 HTML 撰寫』、『後台處理使用 Python 』是我認為十分完美的網頁開發模式。

render_template() 基本上直譯便是『渲染模板』，讓我們可以透過 Flask 直接呼叫已經撰寫好的 HTML 檔。而這些檔案必須放在事先準備好的 templates 資料夾中，以下我們便直接來實作個簡單的範例。

templates 資料夾

假使我要製作一個簡單的、使用 render_template() 呼叫 HTML 的程式，那麼我的 Python 檔和 HTML 檔之間的相對路徑則應如下圖：

flask_render_template.py 是我撰寫 Flask 程式的檔案；templates 資料夾中放著我想要渲染的 HTML 檔 index.html。

在使用 render_template() 函式的時候，會自動尋找 templates 資料夾底下的 HTML 檔。

index.html

<body style="background-color: black">
     <p style="color: white">Hello {{ Name }}!</p>
</body>



Output:

我在這裡撰寫 HTML 的時候使用了大括弧 {{ }} 來給予變數賦值，這是 Jinja2 的語法。 Jinja2 的語法與 Flask 核心的模板語法是一致的，畢竟開發員是同一人。

所以我們這裡可以看到，單純直接開啟 HTML 檔只會看到醜醜的 “{{ Name }}” ，畢竟 HTML 不懂這是什麼東西；但是這個參數等一下在 Flask 的檔案中會發揮用處。

值得注意的是，網頁目前也將我設定的 style 完美地渲染出來：背景是黑色、文字是白色。

flask_render_template.py

# -*- coding: utf-8 -*-
from flask import Flask, render_template


app = Flask(__name__)


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


if __name__ == '__main__':
     app.run(host='127.0.0.1', port=8000)



Output:

首先要記得:

from flask import Flask, render_template



匯入 render_template() 這個函式。

然後可以看到，我們設定的 {{ Name }} 不見了！這是由於我們目前還沒有給我們渲染的模板任何參數。不過目前為止，HTML 渲染得非常成功，可以看到背景為黑色、字串則是白色。

然後，我們也可以給予 Name 參數賦值了。

# -*- coding: utf-8 -*-
from flask import Flask, render_template


app = Flask(__name__)


@app.route('/')
def main():
     return render_template('index.html', Name='World')


if __name__ == '__main__':
     app.run(host='127.0.0.1', port=8000)



Output:

只需要在 render_template() 函式後方設定好變數即可，是不是很方便呢？

References

Tags:

Leave a Reply