在Web開發中，我們常常需要將後端的數據（如用戶信息、商品列表、文章內容等）展示到前端頁面上。如果手動拼接HTML和數據，會變得非常繁瑣且容易出錯。而模板引擎（Template Engine）正是解決這個問題的工具——它允許我們在HTML中嵌入動態內容，讓後端數據“注入”到頁面中，生成最終的網頁。
一、什麼是Jinja2和模板引擎？¶
模板引擎的核心作用是將後端數據與HTML模板結合，生成可直接展示給用戶的網頁。它就像一個“模板工具”，讓開發者專注於數據邏輯和頁面結構的分離，而不是重複編寫靜態HTML和動態數據拼接的代碼。
Jinja2 是Flask框架的默認模板引擎，由Python實現，語法簡潔且功能強大。它支持變量替換、條件判斷、循環、過濾器等功能，能高效地處理動態數據渲染。
二、在Flask中使用Jinja2的基本流程¶
要在Flask中使用Jinja2，只需遵循以下步驟：
1. 準備環境：安裝Flask¶
首先確保已安裝Flask。如果未安裝，可通過pip安裝：
pip install flask
2. 創建Flask應用與路由¶
在項目根目錄下創建app.py，定義一個簡單的Flask應用和路由，用於提供數據和渲染模板：
from flask import Flask, render_template # 導入Flask和模板渲染工具
app = Flask(__name__) # 創建Flask應用實例
# 定義路由，訪問首頁時執行index函數
@app.route('/')
def index():
# 準備後端數據（可以是字典、列表、對象等）
user_info = {
'name': '小明',
'age': 20,
'hobbies': ['籃球', '編程', '閱讀'], # 愛好列表
'is_student': True, # 是否是學生
'posts': [ # 文章列表
{'title': 'Python入門教程', 'author': '小明', 'date': '2023-01-15'},
{'title': 'Flask實戰', 'author': '小明', 'date': '2023-02-20'}
]
}
# 渲染模板並返回數據
return render_template('index.html', **user_info) # **user_info將字典拆分爲參數
if __name__ == '__main__':
app.run(debug=True) # 調試模式運行
3. 創建模板文件¶
Flask默認會在項目根目錄下的templates文件夾中尋找模板文件（若不存在需手動創建）。因此，需在項目根目錄新建templates文件夾，並在其中創建index.html作爲模板文件：
項目結構：
your_project/
├── app.py # Flask應用代碼
└── templates/ # 模板文件夾
└── index.html # 模板文件
4. 在模板中使用Jinja2語法¶
在templates/index.html中，使用Jinja2語法嵌入動態數據：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>{{ name }}的個人主頁</title>
</head>
<body>
<h1>歡迎訪問{{ name }}的主頁！</h1>
<!-- 變量替換：直接顯示後端傳遞的name -->
<p>年齡：{{ age }}歲</p>
<!-- 條件判斷：根據年齡判斷是否成年 -->
{% if age >= 18 %}
<p>狀態：成年人</p>
{% else %}
<p>狀態：未成年人</p>
{% endif %}
<!-- 循環遍歷：展示愛好列表 -->
<h2>我的愛好</h2>
<ul>
{% for hobby in hobbies %}
<li>{{ loop.index }}. {{ hobby }}</li> <!-- loop.index顯示序號 -->
{% endfor %}
</ul>
<!-- 條件+循環：展示文章列表 -->
<h2>我的文章</h2>
<table border="1">
<tr>
<th>標題</th>
<th>作者</th>
<th>發佈日期</th>
</tr>
{% for post in posts %}
<tr>
<td>{{ post.title }}</td>
<td>{{ post.author }}</td>
<td>{{ post.date }}</td>
</tr>
{% endfor %}
</table>
<!-- 嵌套對象數據：判斷是否爲學生 -->
{% if is_student %}
<p>身份：在校學生</p>
{% else %}
<p>身份：社會人士</p>
{% endif %}
</body>
</html>
5. 運行應用並測試¶
啓動app.py：
python app.py
訪問http://127.0.0.1:5000，即可看到動態渲染的頁面，包含小明的信息、愛好列表和文章列表。
三、Jinja2核心語法速覽¶
上面的示例中已經用到了Jinja2的基本語法，以下是最常用的核心功能：
1. 變量替換¶
用{{ 變量名 }}在模板中嵌入後端傳遞的變量。例如：
<p>用戶名：{{ user.name }}</p> <!-- 後端傳遞user字典 -->
<p>價格：{{ product.price }}</p> <!-- 後端傳遞product對象 -->
2. 條件判斷（if-else）¶
用{% if ... %}、{% else %}、{% elif %}實現條件邏輯。例如：
{% if is_logged_in %}
<p>歡迎回來！</p>
{% else %}
<p>請先登錄</p>
{% endif %}
3. 循環遍歷（for）¶
用{% for ... %}遍歷列表、字典或其他可迭代對象。常用變量：
- loop.index：當前循環的序號（從1開始）
- loop.first：是否爲循環的第一個元素（布爾值）
- loop.last：是否爲循環的最後一個元素（布爾值）
例如遍歷愛好列表：
{% for hobby in hobbies %}
<li>{{ hobby }}</li>
{% endfor %}
4. 過濾器（Filter）¶
Jinja2支持過濾器對變量進行處理（如格式化、轉換等），用|連接過濾器名。例如：
- {{ name|upper }}：將字符串轉爲大寫
- {{ date|format('%Y-%m-%d') }}：格式化日期（需結合Python的datetime）
- {{ text|truncate(20) }}：截斷長文本爲20個字符
示例：
<p>標題：{{ post.title|truncate(15) }}</p> <!-- 截斷標題長度 -->
四、進階技巧：模板繼承¶
當項目中有多個頁面（如首頁、文章頁、個人中心）時，重複編寫相同的HTML結構（如導航欄、頁腳）會很麻煩。Jinja2支持模板繼承，通過base.html作爲基礎模板，其他頁面“繼承”並擴展它。
1. 創建基礎模板（base.html）¶
在templates文件夾中創建base.html：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>{% block title %}默認標題{% endblock %}</title>
</head>
<body>
<nav>
<a href="/">首頁</a> | <a href="/about">關於</a>
</nav>
<main>
{% block content %}{% endblock %} <!-- 內容區塊，子模板可覆蓋 -->
</main>
<footer>© 2023 我的網站</footer>
</body>
</html>
2. 子模板繼承（index.html）¶
在index.html中通過{% extends "base.html" %}繼承基礎模板，並覆蓋block：
{% extends "base.html" %} <!-- 繼承base.html -->
{% block title %}小明的主頁{% endblock %} <!-- 覆蓋標題區塊 -->
{% block content %} <!-- 覆蓋內容區塊 -->
<h1>歡迎來到小明的主頁！</h1>
<p>這是繼承base.html後的內容。</p>
{% endblock %}
五、總結¶
Jinja2模板引擎讓Flask後端數據的前端渲染變得簡單直觀。通過變量替換、條件判斷、循環等語法，我們可以輕鬆實現動態頁面；而模板繼承則進一步提高了代碼複用性，讓項目結構更清晰。
掌握Jinja2後，你可以繼續探索更多高級功能，如宏（Macro，複用代碼片段）、測試過濾器、自定義函數等。隨着實踐的深入，你會發現模板引擎是Web開發中連接數據與用戶界面的核心工具。
提示：初學者建議先從簡單示例（如本文的個人主頁）入手，逐步嘗試複雜場景（如數據庫查詢結果渲染、表單數據動態回顯），再深入學習模板繼承和高級語法。