使用 Django 樣板繼承實現頁面佈局共享
更新日期： 2024 年 12 月 1 日
本文為 Django 新手教學，第 5 篇：
當我們使用 Django 的模板系統渲染頁面時，會遇到一個問題：
每個 HTML 文件都需要手動添加相同的標籤，例如 <header>、<body> 等，這不僅繁瑣，還容易導致代碼重複和維護困難。
為了解決這個問題，我們可以利用 Django 的樣板繼承功能，實現頁面佈局的共享。
樣板繼承的基本概念
Django 提供了樣板繼承的功能，允許我們建立一個通用的母版樣板，並在子樣板中重用這個佈局。
這樣，我們可以將網站的標頭（header）、腳註（footer）等固定部分集中管理，而僅在子樣板中定義特定頁面的內容。
樣板繼承語法
在 Django 中，我們使用以下語法進行樣板繼承：
{% extends "母版路徑" %}
指定子樣板繼承的母版樣板。{% block 區塊名稱 %}...{% endblock %}
定義母版中的可替換區塊，子樣板可以覆蓋這些區域的內容。
設置共享母版樣板
以下是實現樣板繼承的步驟。
建立目錄結構
首先，我們在 templates 資料夾中建立一個新子目錄 shared，用來存放通用的母版樣板。
目錄結構如下：
mysite/
│
├── templates/
│ ├── shared/
│ │ ├── layout.html # 母版樣板
│ ├── pages/
│ │ ├── about.html # 子樣板
│
└── ...
編寫母版樣板 layout.html
在 shared/ 資料夾中創建 layout.html，內容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Django Site</title>
</head>
<body>
<header>
<h1>我的網站</h1>
<nav>
<a href="/">首頁</a>
<a href="/about/">關於我</a>
</nav>
</header>
<main>
{% block content %}
<!-- 子樣板的內容將插入到這裡 -->
{% endblock %}
</main>
<footer>
<p>版權所有 © 2024</p>
</footer>
</body>
</html>
此母版樣板定義了網站的基本結構，包括：
- 標頭區域：包含網站標題和導航欄。
- 內容區域：使用
{% block content %}定義可替換區塊，允許子樣板插入內容。 - 頁腳區域：顯示版權信息。
修改子樣板以繼承母版
現在我們來修改子樣板 about.html，使其能夠繼承通用的母版樣板 layout.html，實現內容的插入和佈局共享。
以下是更新後的 about.html 文件內容：
{% extends "shared/layout.html" %}
{% block content %}
<h1>關於我</h1>
<p>這是關於我的頁面。</p>
{% endblock %}
{% extends "shared/layout.html" %}
這行代碼的作用是讓 about.html 繼承 layout.html 的母版結構。
透過這種繼承方式，我們無需在 about.html 中重複定義 HTML 的標頭（如 <header>）、導航欄（如 <nav>）、頁腳（如 <footer>）等全局部分，只需專注於本頁的特定內容。
{% block content %} 和 {% endblock %}
在母版樣板 layout.html 中，我們使用 {% block content %} 定義了一個可覆蓋區塊，表示該區域內容可由子樣板來指定。
在 about.html 中，這對標籤之間的內容，將被插入到母版樣板的 {% block content %} 區域內。
輸出效果
當 about.html 被渲染時，最終的 HTML 結構，將包含母版樣板的全局佈局（如標頭和頁腳），並在 {% block content %} 定義的位置插入以下內容：
<h1>關於我</h1> <p>這是關於我的頁面。</p>這種方式不僅簡化了 HTML 文件的結構，還保證了網站佈局的一致性。同時，子樣板的內容可以隨需求輕鬆調整，而不影響母版的全局設計。
使用樣板繼承的好處
- 減少代碼重複
母版樣板集中管理固定結構，避免每個 HTML 文件重複定義相同的標籤。 - 提高可維護性
修改母版樣板即可全局更新網站的佈局，例如新增導航欄或修改頁腳內容。 - 清晰的層次結構
子樣板僅需關注特定頁面的內容，母版樣板負責全局佈局，代碼更加結構化。
小結
Django 的樣板繼承功能是開發高效可維護網站的重要工具。通過以下步驟，我們可以輕鬆實現佈局共享：
- 在
templates/shared/中創建母版樣板。 - 使用
{% extends %}和{% block %}定義和覆蓋內容區域。 - 在子樣板中專注於頁面的獨特內容。
學會這些操作後，您將能快速構建擁有一致佈局的專業網站！