在使用Flask開發Web應用時，如何讓頁面動態展示數據？這時候就需要用到Flask的模板系統。Flask默認使用Jinja2模板引擎來處理動態內容，它能讓你在HTML中嵌入變量和控制邏輯，讓頁面“活”起來。今天我們就來入門Flask模板中的Jinja2變量和控制結構，從基礎開始學起。
一、Jinja2變量：給頁面“注入”動態數據¶
Jinja2變量是模板中最基礎的動態內容來源，它可以把後端傳來的數據渲染到頁面上。
1. 如何定義和使用變量？¶
要在模板中使用變量，首先需要在Flask的視圖函數中通過render_template函數將數據傳遞給模板，然後在模板中用{{ 變量名 }}來渲染。
舉個例子：
假設我們有一個視圖函數，想向模板傳遞用戶信息（名字、年齡、愛好列表），步驟如下：
- 視圖函數（後端）：
在app.py中定義視圖函數，使用render_template渲染模板，並傳入變量：
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
# 定義要傳遞給模板的變量
user_name = "小明"
user_age = 18
hobbies = ["籃球", "編程", "閱讀"]
return render_template('index.html',
name=user_name,
age=user_age,
hobbies=hobbies) # 把變量傳到模板
if __name__ == '__main__':
app.run(debug=True)
- 模板文件（前端）：
在templates文件夾下創建index.html，用{{ 變量名 }}渲染數據：
<!-- templates/index.html -->
<!DOCTYPE html>
<html>
<body>
<h1>歡迎！{{ name }}的個人頁面</h1> <!-- 渲染字符串變量 -->
<p>你的年齡是：{{ age }}歲</p> <!-- 渲染數字變量 -->
<h2>你的愛好：</h2>
<ul>
<!-- 這裏先記住for循環，後面會講 -->
{% for hobby in hobbies %}
<li>{{ hobby }}</li>
{% endfor %}
</ul>
</body>
</html>
效果：頁面會顯示“歡迎！小明的個人頁面”“你的年齡是：18歲”，以及愛好列表。
2. 變量的類型和常見操作¶
Jinja2支持多種數據類型的變量，比如字符串、數字、列表、字典等，操作方式也很直觀：
- 字符串：直接渲染，支持
|過濾器（後面會講）。 - 數字：可以直接參與簡單運算（如加減乘除）。
- 列表：用
for循環遍歷（見下節）。 - 字典：通過
鍵名或dict.key訪問值，也可以用dict.items()遍歷。
字典示例：
如果在視圖函數中傳入字典user_info = {"city": "北京", "hobby": "跑步"}，模板中可以這樣用：
<p>居住城市：{{ user_info.city }}</p> <!-- 直接用鍵名訪問 -->
<p>愛好：{{ user_info.hobby }}</p>
<!-- 或者用items()遍歷所有鍵值對 -->
{% for key, value in user_info.items() %}
<p>{{ key }}：{{ value }}</p>
{% endfor %}
二、控制結構：讓頁面“邏輯化”¶
有了變量，還需要控制結構（如條件判斷、循環）來決定數據如何展示，讓頁面更靈活。
1. 條件判斷：if-else¶
當需要根據條件顯示不同內容時，用{% if ... %}、{% else %}和{% endif %}。
示例：判斷用戶是否成年，顯示不同提示：
{% if age >= 18 %}
<p>你已成年，可訪問更多內容！</p>
{% else %}
<p>你還是未成年人，請注意安全上網哦~</p>
{% endif %}
補充：Jinja2中還支持elif和else if（語法兼容），比如：
{% if age < 10 %}
<p>幼兒</p>
{% elif age < 18 %}
<p>青少年</p>
{% else %}
<p>成年人</p>
{% endif %}
2. 循環遍歷：for循環¶
當需要重複展示列表或字典中的多個元素時，用{% for ... in ... %}循環。
示例1：遍歷列表（前面的愛好列表）：
<ul>
{% for hobby in hobbies %}
<li>{{ hobby }}</li>
{% endfor %}
</ul>
這裏hobbies是列表，hobby是循環變量，每次迭代會取列表中的一個元素。
示例2：循環中的特殊變量loop
Jinja2提供loop變量，包含循環的狀態信息，比如：
- loop.first：是否是循環的第一個元素（布爾值）
- loop.last：是否是循環的最後一個元素（布爾值）
- loop.index：當前迭代的序號（從1開始）
用loop優化愛好列表顯示：
<ul>
{% for hobby in hobbies %}
{% if loop.first %}
<li><strong>第一個愛好：</strong>{{ hobby }}</li>
{% elif loop.last %}
<li><strong>最後一個愛好：</strong>{{ hobby }}</li>
{% else %}
<li>{{ loop.index }}. {{ hobby }}</li>
{% endif %}
{% else %}
<!-- 如果列表爲空，顯示提示 -->
<li>暫無愛好數據</li>
{% endfor %}
</ul>
如果hobbies是空列表，else塊會生效，顯示“暫無愛好數據”。
三、簡單過濾器：給變量“加工”¶
Jinja2過濾器可以對變量進行簡單處理（如大小寫轉換、數值格式化等），語法是變量|過濾器名。
常見過濾器示例：¶
- 字符串處理：
upper：轉爲大寫
{{ name|upper }}→ 輸出“XIAOMING”（假設name是“小明”）lower：轉爲小寫
{{ "Hello"|lower }}→ 輸出“hello”-
capitalize：首字母大寫
{{ "hello"|capitalize }}→ 輸出“Hello” -
數值處理：
int：轉爲整數
{{ 18.5|int }}→ 輸出“18”-
round：四捨五入
{{ 3.1415|round }}→ 輸出“3”（默認保留0位小數） -
安全處理：如果變量包含HTML代碼，
|safe過濾器會讓瀏覽器渲染HTML（注意安全，僅信任的數據使用）
{{ "<p>這是一段HTML</p>"|safe }}→ 渲染爲<p>這是一段HTML</p>
四、總結¶
通過Jinja2變量和控制結構，我們能讓頁面動態展示數據並根據邏輯變化。核心要點：
- 變量：用{{ 變量名 }}渲染後端傳來的數據，支持字符串、數字、列表、字典等類型。
- 控制結構：{% if ... %}條件判斷和{% for ... %}循環，配合loop變量可優化迭代邏輯。
- 過濾器：|語法對變量“加工”，如大小寫轉換、數值格式化等。
下一篇我們可以學習模板繼承、宏等進階內容，讓你的頁面結構更清晰！現在試着自己寫一個簡單的模板，把變量、條件和循環結合起來，看看頁面是否能“動”起來吧~