使用 Tailwind CSS 和 Shared Template 設計 Django 項目導航欄與樣式
更新日期： 2024 年 12 月 1 日
本文為 Django 與前端框架教學，第 4 篇：
- 使用 Esbuild 實現 Django 中的靜態資源管理與優化
- 使用 HTMX 實現 Django 頁面不刷新交互效果
- 使用 HTMX 完成刪除功能的邏輯解析
- 使用 Tailwind CSS 和 Shared Template 設計 Django 項目導航欄與樣式 👈 所在位置
建議閱讀本文前，先閱讀完 Django 高階教學 系列文， 若已有基本認識，可前往閱讀 Django 會員系統建立教學 系列
本文將引導新手在 Django 項目中實現以下功能：
- 在共享模板中設置導航欄（Navbar）。
- 使用 Tailwind CSS 調整外觀樣式。
- 實現樣式的動態管理與最佳實踐。
新增共享導航欄模板
新增共享模板檔案
檔案位置：templates/shared/navbar.html
以下是共享導航欄模板代碼：
<nav>
<ul>
<li><a href="{% url 'pages:home' %}">PyDev</a></li>
</ul>
<ul>
<li><a href="{% url 'users:login' %}">登入</a></li>
<li><a href="{% url 'users:register' %}">註冊</a></li>
</ul>
</nav>
為什麼要將 navbar.html 獨立出來，而不是直接放在 layout.html 中？
將 navbar.html 獨立出來作為單獨的模板文件，而不是直接放在 layout.html 中，有以下幾個重要原因：
支持頁面定制化
如果直接將導航欄寫在 layout.html 中，所有頁面都會使用同樣的導航欄。
如果某些頁面需要定制化導航（例如：首頁的導航欄不同於其他頁面，或某些頁面需要隱藏某些選項），就需要修改 layout.html，這樣會影響所有頁面。
通過獨立的 navbar.html，可以在不同的頁面選擇是否包含導航欄，或根據頁面需求修改導航的呈現。
避免 layout.html 複雜化
layout.html 的主要職責是提供頁面的整體框架，比如標題、腳本、樣式表以及內容插槽（{% block content %}）。
如果將導航欄的邏輯直接寫在 layout.html 中，會增加文件的複雜性，甚至影響框架的可讀性。
將導航欄提取到獨立文件中，可以讓 layout.html 更加簡潔，專注於框架的整體結構。
支持條件渲染與動態邏輯
獨立的 navbar.html 更容易加入條件邏輯。例如：
- 未登入時顯示「登入」和「註冊」
- 已登入時顯示「登出」和用戶的個人信息
如果將這些邏輯寫在 layout.html 中，會增加該文件的負擔，讓代碼變得不易維護。
在 navbar.html 中，只需專注於導航的條件邏輯，讓代碼結構更清晰。
簡化測試與調試
導航欄是所有頁面的公共部分，容易出現問題。如果將導航欄獨立為模板文件：
- 可以單獨測試
navbar.html的功能。 - 如果導航欄的功能發生異常，只需檢查
navbar.html，縮小了問題範圍。
更容易添加額外的導航邏輯或功能
未來如果需要對導航欄添加功能（例如：搜索框、動態菜單），獨立的 navbar.html 模板更容易擴展。
修改 Layout 文件引入共享模板
檔案位置：templates/shared/layout.html
原始的 layout.html 文件如下：
<body>
{% block content %}
<!-- 子模板的內容會插入到這裡 -->
{% endblock %}
</body>
修改後的文件：
<body>
{% include "shared/navbar.html" %}
<main class="container mx-auto">
{% block "content" %}{% endblock %}
</main>
</body>
使用 Tailwind CSS 調整外觀
安裝 Tailwind CSS
安裝方式：兩種選擇
- CDN 安裝方式
在 HTML 頁面直接引入 CDN，即可立即使用 Tailwind CSS，適合快速測試和小型項目。
示例代碼：
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">- CLI（命令列界面）安裝方式
適合開發大型項目，通過編譯 Tailwind CSS 可以去除未使用的樣式，優化文件大小。需要在本地安裝並配置 Tailwind。
CLI 是什麼？
CLI（Command Line Interface，命令列界面）是一種透過終端執行指令來操作工具或系統的方式。使用 CLI 安裝 Tailwind，可以靈活定制樣式並整合到開發流程中。
透過 npm 安裝 Tailwind CSS
npm install -D tailwindcss配置 Tailwind CSS
配置檔案說明：tailwind.config.js
檔案位置：tailwind.config.js
生成 tailwind.config.js 的指令：
npx tailwindcss init內容範例：
module.exports = {
content: ['./templates/**/*.html'], // 指定 Tailwind CSS 要監控的文件範圍
theme: {
extend: {}, // 擴展主題樣式
},
plugins: [], // 加入插件，例如表單或排版插件
}
功能解析
- content：指定 Tailwind 需要掃描的文件範圍，只有這些文件中使用到的樣式才會被加入最終的 CSS 文件。
- theme.extend：擴展 Tailwind 的預設樣式，比如新增顏色或字體。
- plugins：可以加入第三方插件來擴展功能。
新增 CSS 配置文件
檔案位置：frontend/styles/app.css
新增以下內容，定義基本的 Tailwind 層級：
@tailwind base; /* Tailwind 基本樣式 */
@tailwind components; /* 可複用的組件樣式 */
@tailwind utilities; /* 實用工具樣式，例如 bg-red-500 */
編譯 Tailwind CSS
執行以下命令，將 Tailwind 的樣式轉換為瀏覽器可讀的 CSS：
npx tailwindcss -i ./frontend/styles/app.css -o ./static/styles/app.css --watch指令解析：
npx：執行 Node.js 的工具（例如 Tailwind CSS），無需全局安裝。-i：指定輸入的源文件（app.css）。-o：指定輸出的目標文件（轉譯後的 CSS）。--watch：持續監聽源文件的變化，自動重新編譯，適合開發過程。
引入 CSS 到共享模板
將編譯後的 CSS 引入到共享模板中。
檔案位置：templates/shared/layout.html
新增代碼：
<link rel="stylesheet" href="{% static 'styles/app.css' %}" />代碼解析
{% static 'styles/app.css' %}：Django 的靜態文件標籤，用於生成正確的靜態文件路徑。<link rel="stylesheet">：將樣式表連結到 HTML 頁面中，使 Tailwind CSS 的樣式生效。
完整的共享模板（帶 Tailwind CSS）
以下是整合導航欄與 Tailwind 的模板：
檔案位置：templates/shared/layout.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Python Developer</title>
<script src="{% static 'scripts/app.js' %}" type="module"></script>
<link rel="stylesheet" href="{% static 'styles/app.css' %}" />
</head>
<body>
{% include "shared/navbar.html" %}
<main class="container mx-auto">
{% block "content" %}{% endblock %}
</main>
</body>
</html>
效果總結
完成這些步驟後：
- Tailwind CSS 的樣式將應用於整個項目。
- 導航欄模板
navbar.html可輕鬆引入其他頁面。 - 使用
--watch指令可在保存 CSS 文件時自動編譯，提升開發效率。
這樣配置結構清晰，方便後續功能的擴展與樣式的調整。
調整導航欄樣式
更新導航欄 HTML
檔案位置：templates/shared/navbar.html
使用 Tailwind CSS 調整導航欄樣式：
<nav class="bg-black text-white shadow text-xl py-4 px-6 flex justify-between">
<ul>
<li><a href="{% url 'pages:home' %}">PyDev</a></li>
</ul>
<ul class="flex gap-4">
<li><a href="{% url 'users:login' %}">登入</a></li>
<li><a href="{% url 'users:register' %}">註冊</a></li>
</ul>
</nav>
使用自定義 CSS 優化類名
檔案位置：frontend/styles/app.css
如果覺得 Tailwind 類名太多，可以自定義樣式：
.navbar {
@apply bg-black text-white shadow text-xl py-4 px-6 flex justify-between;
}修改後的導航欄 HTML：
<nav class="navbar">
<ul>
<li><a href="{% url 'pages:home' %}">PyDev</a></li>
</ul>
<ul class="flex gap-4">
<li><a href="{% url 'users:login' %}">登入</a></li>
<li><a href="{% url 'users:register' %}">註冊</a></li>
</ul>
</nav>
提示：盡量避免過早自定義樣式，保留 Tailwind 的直觀性和靈活性。
使用 DaisyUI 元件庫（可選）
若覺得 Tailwind 操作繁瑣，可以安裝 DaisyUI：
npm install daisyui配置 tailwind.config.js：
module.exports = {
content: ['./templates/**/*.html'],
plugins: [require('daisyui')],
};DaisyUI 提供預設的元件，例如：
<nav class="navbar bg-black text-white shadow-lg">
<ul>
<li><a href="{% url 'pages:home' %}">PyDev</a></li>
</ul>
<ul class="menu menu-horizontal">
<li><a href="{% url 'users:login' %}">登入</a></li>
<li><a href="{% url 'users:register' %}">註冊</a></li>
</ul>
</nav>四、完整目錄結構
以下是根據您的專案調整後的目錄結構，包含相關檔案的組織方式和功能說明：
project/
├── frontend/ # 前端開發檔案
│ ├── styles/ # 原始的 CSS 文件存放位置
│ │ └── app.css # Tailwind CSS 原始配置文件
│ ├── scripts/ # 原始的 JavaScript 文件存放位置
│ │ └── app.js # JavaScript 主文件
│ └── tailwind.config.js # Tailwind CSS 配置文件
├── static/ # 靜態資源文件（Django 將編譯的 CSS 和 JS 放置於此）
│ ├── styles/
│ │ └── app.css # 編譯後的 Tailwind CSS 文件
│ ├── scripts/
│ │ └── app.js # 編譯後的 JavaScript 文件
├── templates/ # Django 模板文件
│ ├── shared/ # 共用模板
│ │ ├── layout.html # 主框架模板，提供標題、腳本及樣式引入
│ │ └── navbar.html # 獨立的導航欄模板
│ ├── users/ # 用戶相關模板
│ │ ├── login.html # 登入頁面模板
│ │ ├── register.html # 註冊頁面模板
│ ├── resumes/ # 簡歷相關模板
│ │ ├── show.html # 顯示簡歷及留言的模板
│ ├── comments/ # 留言相關模板
│ │ └── _comment.html # 單一留言模板片段
├── users/ # User app，處理用戶認證
│ ├── urls.py # 用戶路由設定
│ ├── views.py # 用戶視圖處理
├── comments/ # Comments app，處理留言相關功能
│ ├── urls.py # 留言路由設定
│ ├── views.py # 留言視圖處理
│ ├── models.py # 留言的模型設計
├── resumes/ # Resumes app，處理簡歷相關功能
│ ├── urls.py # 簡歷路由設定
│ ├── views.py # 簡歷視圖處理
│ ├── models.py # 簡歷的模型設計
├── manage.py # Django 專案管理工具
└── requirements.txt # Python 依賴包列表
目錄結構詳解
frontend/- 存放開發階段的原始 CSS 和 JS 文件。
tailwind.config.js是 Tailwind 的配置文件，用於指定樣式掃描範圍。
static/- 存放編譯後的靜態資源，例如經過 Tailwind 處理的 CSS 文件和經過打包的 JavaScript 文件。
- 這些文件最終由 Django 的靜態文件機制提供給瀏覽器使用。
templates/- 存放所有的 HTML 模板文件。
shared/目錄存放共用模板，比如layout.html（主框架模板）和navbar.html（導航欄模板）。users/存放用戶相關的模板文件，如登入和註冊頁面。resumes/存放簡歷相關的模板，比如顯示簡歷的頁面。comments/存放留言相關的模板片段，方便在多個地方重用。
- 各應用目錄（
users/,comments/,resumes/）- 每個應用的目錄內包含了
urls.py、views.py等文件，負責處理該應用的功能邏輯。
- 每個應用的目錄內包含了
manage.py- Django 的管理命令工具，用於啟動伺服器、遷移資料庫等操作。
requirements.txt- 記錄了專案所需的 Python 依賴包，用於快速部署和環境搭建。