【人工智慧雲端系統實務】 07. Django Templates 解析與應用

在 Django 的 MVC 架構中，Template (模板) 是負責「View」層的畫面顯示部分。它將後端傳遞來的資料以 HTML 形式渲染，讓使用者看到結構化、有樣式的頁面。

1. Template 的功能與角色

Django Template 的用途:

動態產生 HTML 頁面
顯示後端資料 (如文章列表、使用者資訊)
控制頁面結構 (如條件判斷、迴圈)
支援模板繼承與組件化設計 (如 header、footer)

2. 建立模板檔案(HTML)

預設 Django 將從 templates/ 資料夾中載入模板，因此需確保專案設定如下:

# settings.py
TEMPLATES = [
    {
        ...
        'DIRS': [BASE_DIR / 'templates'],  # 確保此設定有啟用
        ...
    }
]

結構示意:

project/
├── templates/
│   ├── base.html
│   └── home.html

3. Template 的基本語法

Django 使用自有語法:

{{ 變數 }}: 顯示資料
{% 標籤 %}: 執行邏輯指令 (如 if、for、include)

3.1 變數綁定(Variable)

1	<h1>Hello, {{ username }}</h1>

若 username = "Django"，將顯示:

1	Hello, Django

也可使用物件屬性與方法:

1	<p>文章標題:{{ article.title }}</p>

3.2 條件判斷

{% if %}

{% if user.is_authenticated %}
  <p>歡迎 {{ user.username }} 回來！</p>
{% else %}
  <p>請先登入</p>
{% endif %}

3.3 迴圈控制

{% for %}

<ul>
  {% for article in articles %}
    <li>{{ article.title }}</li>
  {% endfor %}
</ul>

也可用 forloop.counter 顯示索引(從 1 開始):

1	{{ forloop.counter }} - {{ article.title }}

3.4. 過濾器(Filters)

過濾器可對變數進行格式處理:

1
2
3

{{ title|lower }}      → 全小寫  
{{ content|truncatechars:100 }} → 限制字元數  
{{ date|date:"Y/m/d" }} → 格式化日期

4. 模板繼承 (Template Inheritance)

使用模板繼承可讓多個頁面共用相同框架 (如頁首、頁尾)。

base.html (父模板):

<!DOCTYPE html>
<html>
<head>
  <title>{% block title %}網站標題{% endblock %}</title>
</head>
<body>
  <header>我的網站</header>

  <main>
    {% block content %}{% endblock %}
  </main>

  <footer>版權所有</footer>
</body>
</html>

home.html (子模板):

{% extends 'base.html' %}

{% block title %}首頁{% endblock %}

{% block content %}
  <h1>這是首頁內容</h1>
{% endblock %}

5. 模板引入 {% include %}

將重複區塊抽成單一檔案引入 (如導覽列、footer):

<!-- base.html -->
<body>
  {% include "partials/navbar.html" %}
  <main>{% block content %}{% endblock %}</main>
</body>

6. 靜態檔案 (CSS/JS 圖片等)

1
2
3

{% load static %}
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<img src="{% static 'images/logo.png' %}">

靜態檔案通常放在 static/ 資料夾中。

7. 常用模板語法總覽

語法	說明
`{{ variable }}`	輸出變數值
`{% if %}...{% endif %}`	條件判斷
`{% for %}...{% endfor %}`	迴圈
`{% include 'file.html' %}`	引入子模板
`{% extends 'base.html' %}`	繼承模板
`{% block name %}...{% endblock %}`	區塊定義與覆寫
`{% load static %}`	載入靜態檔案管理
`{{ value \| filter }}`	使用過濾器處理變數

8. Template 的最佳實踐

小技巧與建議:

使用模板繼承統一頁面結構
抽出可重用的 HTML 至 include/ 或 partials/
善用 if / for 控制資料呈現邏輯
使用過濾器改善格式與輸出樣式
控制邏輯應保留在 View，Template 僅負責顯示