您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 更多程式設計知識

Python Jinja2 模板引擎完整教學：MVC 架構與模板語法

編輯：更多程式設計知識

Web 應用中，Python 程式碼負責業務邏輯（Controller），HTML 模板負責呈現邏輯（View），資料模型（Model）在兩者間流動。Jinja2 是 Flask 預設、功能強大的模板引擎。本文完整說明 MVC 架構、模板語法、繼承與進階技巧。

MVC 架構在 Web 應用中的角色

Model：資料結構（如字典、ORM 物件）
View：包含變數與指令的 HTML 模板
Controller：處理 URL、業務邏輯、準備 Model 傳給 View

MVC 架構圖

Flask 整合 Jinja2


$ pip install jinja2


from flask import Flask, request, render_template

app = Flask(__name__)

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

@app.route('/signin', methods=['GET'])
def signin_form():
    return render_template('form.html')

@app.route('/signin', methods=['POST'])
def signin():
    username = request.form['username']
    password = request.form['password']
    if username == 'admin' and password == 'password':
        return render_template('signin-ok.html', username=username)
    return render_template('form.html', 
                           message='Bad username or password', 
                           username=username)

模板檔案結構


project/
├── app.py
└── templates/
    ├── home.html
    ├── form.html
    └── signin-ok.html

目錄結構

Jinja2 核心語法

1. 變數插值


{{ username }}          # 簡單變數
{{ user.name }}         # 物件屬性
{{ user['name'] }}      # 字典鍵值
{{ user.name|upper }}   # 過濾器

2. 控制結構


{% if message %}
{{ message }}
{% endif %}

{% for user in users %}
{{ user.name }}
{% endfor %}

{% for i in range(1, 6) %}
{{ i }}
{% endfor %}

3. 模板繼承（佈局）


{# base.html #}

{% block title %}Default{% endblock %}

{% block content %}{% endblock %}



{# child.html #}
{% extends "base.html" %}
{% block title %}Child Page{% endblock %}
{% block content %}
Child Content
{% endblock %}

4. 引入片段


{% include 'header.html' %}
{% include 'footer.html' %}

5. 宏（可重用片段）


{% macro input(name, value='', type='text') %}

{% endmacro %}

{{ input('username') }}
{{ input('password', type='password') }}

6. 過濾器常用範例

過濾器	效果
{{ name\|upper }}	大寫
{{ text\|truncate(30) }}	截斷並加省略號
{{ list\|length }}	長度
{{ date\|datetimeformat('%Y-%m-%d') }}	日期格式化
{{ html\|safe }}	標記為安全，不轉義
{{ val\|default('N/A') }}	預設值

自動 HTML 轉義與安全

Jinja2 預設啟用自動轉義，{{ user_input }} 會將 < > & 轉為實體。若確定內容安全（如後端生成的 HTML），用 {{ html|safe }} 或 {% autoescape false %}...{% endautoescape %}。

其他常見模板引擎對比

引擎	語法特徵	特點
Jinja2	{{ var }}, {% ... %}	功能豐富、效能佳、Flask 預設
Mako	${var}, <% ... %>	Python 語法嵌入、效能極高
Cheetah	${var}, <% ... %>	早期成熟專案
Django Template	{{ var }}, {% ... %}	Django 內建、語法較受限