Django -- 從平凡到超凡

第 7 章    範本繼承

(1) 三振法則

▸ 其實目前還有個三振但還沒出局,那就是 main.html, about.html, 與 article.html 三個範本裡還有相同資料,如下:

<!doctype html>
{% load staticfiles %}
<html>
<head>
<title>部落格</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/static/main/css/main.css">
</head>
<body>
{% include 'main/menu.html' %}
...
</body>
</html>

需要重構!

▸ 解決方案:利用 Django 的範本繼承 (Template inheritance),消除重複部份

▸ 步驟:

1. 確認每個範本裡重複出現的部份
2. 將這些重複出現的資料放在基礎範本 (Base template) 裡,然後定義一些區塊標籤 (Block tag) ,讓其他範本可以置換區塊的內容
3. 其他的範本繼承基礎範本,並各自設定區塊的內容

(2) 基礎範本

∗ 範本區塊標籤

▸ 各範本的相同部份應該利用「繼承」(Inheriant) 而來,不要每個範本都重複撰寫

▸ 各範本的不同部份則利用「範本區塊標籤」(Template block tag) 來規劃可以置換內容之處,因此,各個範本可以決定某個區塊的內容

▸ 建立一個基礎範本,其內容如下:

main/templates/main/base.html
<!doctype html>
{% load staticfiles %}
<html>
<head>
<title>部落格</title>
<meta charset="utf-8">
<link rel="stylesheet" href="{% static 'main/css/main.css' %}">
</head>
<body>
{% include 'main/menu.html' %}
<h2>部落格 -- {% block heading %}{% endblock %}</h2>
{% block content %}{% endblock %}
</body>
</html>
✶ 範本區塊標籤指定一個區塊,讓繼承的範本可以設定該區塊的內容,因此各個範本可以設定不同的內容,就會產生不同的頁面
✶ 區塊標籤格式:
{% block <blockName> %}...{% endblock %}
# {% block <blockName> %}:開始標籤, <blockName> 是區塊名稱
# {% endblock %}:結束標籤
✶ 如果區塊有預設資料,可以直接置入標籤內容,例如:
{% block content %}這是預設內容{% endblock %}
✶ 目前設定 2 個區塊:heading (標題) 與 content (內容),繼承範本可以置換這些區塊的內容

(3) 範本繼承

▸ 將所有範本都改為繼承 base.html 範本

main/templates/main/about.html
{% extends 'main/base.html' %}
{% block heading %}關於{% endblock %}
{% block content %}
<p>歡迎來到我的部落格,您可盡情瀏覽並留言。</p>
{% endblock %}
{% extends ... %}:繼承 base.html 範本
{% block heading ... %}:將 base.html 裡的 heading 區塊內容置換為 關於
{% block content ... %}:將 base.html 裡的 content 區塊內容置換為 <p>歡迎來到我的部落格,您可盡情瀏覽並留言。</p>
測試:localhost:8000/main/about/
inheritanceAbout
main/templates/main/main.html
{% extends 'main/base.html' %}
{% block heading %}首頁{% endblock %}
{% block content %}
<p>{{ like }}</p>
{% endblock %}
測試:localhost:8000/main/
inheritanceMain
article/templates/article/article.html
{% extends 'main/base.html' %}
{% block heading %}歡迎蒞臨{% endblock %}
{% block content %}
{% endblock %}
測試:localhost:8000/article/
inheritanceMain

∗ 上推專案到 Github

... Commit message: Chapter 7 finished Commit and Push

▸ 練習