新手指南：如何設計接案者與發包者的 django 頁面模板
更新日期： 2024 年 12 月 19 日
本文為 Django 一鍵切換使用者身分教學，第 4 篇：
- Django 如何設計一鍵切換使用者角色的模型
- Django 用者角色管理與路徑設計
- 動態角色管理：設計簡潔統一的 /users/ 路徑
- 新手指南：如何設計接案者與發包者的 django 頁面模板 👈 所在位置
- 新手指南：Django 模板為什麼不能多重繼承？
在構建接案平台時，接案者和發包者的功能需求往往有所不同，但又存在某些相似的部分。
設計一套清晰、靈活的模板結構，能讓代碼更易於維護和擴展。
本文將帶您了解如何根據頁面內容和邏輯，選擇適當的模板設計方案，並提供分離與合併模板的建議及範例。
合併與分離模板的比較
合併模板的優缺點
優點
- 減少模板數量，便於統一管理。
- 節省模板切換的代碼，例如 Django 的多次
render調用。 - 共享視覺元素（如導航欄）更簡單。
缺點
- 當接案者與發包者的頁面差異較大時，模板中的條件判斷（如
{% if ... %}）會增加代碼複雜度。 - 修改某一角色的專屬功能時，可能影響另一角色的代碼，增加維護難度。
分離模板的優缺點
優點
- 每個角色擁有專屬模板，代碼清晰，便於針對性修改。
- 更適合角色間功能和邏輯差異較大的場景。
缺點
- 可能增加模板數量，帶來一些初期的管理成本。
- 部分重複結構需進一步抽取成共享部分（例如基礎框架模板）。
哪種方式適合您？
- 若接案者與發包者的頁面結構高度相似（例如僅主內容區不同），可考慮合併模板，並使用條件渲染。
- 若頁面功能差異較大，則建議分為兩個模板，並將共享部分抽取為基礎模板。
接案者與發包者頁面內容設計
接案者的頁面內容
- 個人資料：展示姓名、技能、經驗、簡歷等。
- 接案進度：列出接案中的專案（專案名稱、狀態、報酬）。
- 評價與回饋：顯示發包者對接案者的評價。
- 通知：包括專案邀請、訊息通知等。
- 財務管理：如收入統計與提款記錄。
發包者的頁面內容
- 個人資料：包括姓名、聯絡方式、公司資訊等。
- 發包進度：列出發包中的專案（專案名稱、狀態、負責接案者）。
- 專案管理：功能如新增專案、編輯專案。
- 評價與回饋：對接案者的評價管理。
- 財務管理：支付紀錄與專案預算管理。
視覺化設計範例
共用框架
+--------------------------------------------+
| 頁面標題 |
+--------------------------------------------+
| [左側導航欄] | [主內容區域] |
|-----------------------|----------------------|
| - 個人資料 | |
| - 發包進度（發包者） | |
| - 接案進度（接案者） | |
| - 評價與回饋 | |
| - 財務管理 | |
|-----------------------|----------------------|
接案者專用頁面
+--------------------------------------------+
| 接案者主控台 |
+--------------------------------------------+
| [左側導航欄] | [主內容區域] |
|-----------------------|----------------------|
| - 個人資料 | - 我的專案 |
| - 接案進度 | - 專案名稱 |
| - 評價與回饋 | - 狀態：進行中 |
| - 財務管理 | - 報酬：$1000 |
| | |
| | - 通知訊息 |
+-----------------------+----------------------+
發包者專用頁面
+--------------------------------------------+
| 發包者主控台 |
+--------------------------------------------+
| [左側導航欄] | [主內容區域] |
|-----------------------|----------------------|
| - 個人資料 | - 我的專案 |
| - 發包進度 | - 專案名稱 |
| - 評價與回饋 | - 狀態：進行中 |
| - 財務管理 | - 負責人：接案者A |
| | |
| | - 新增專案按鈕 |
+-----------------------+----------------------+
模板結構建議
使用共享的 base.html
抽取共享的頁面結構（如標題、導航欄）到基礎模板中，提升模板的可復用性。
範例：base.html
<!DOCTYPE html>
<html>
<head>
<title>接案平台</title>
</head>
<body>
<header>
<h1>接案平台</h1>
</header>
<aside>
<ul>
<li><a href="#">個人資料</a></li>
<li><a href="#">進度管理</a></li>
<li><a href="#">評價與回饋</a></li>
<li><a href="#">財務管理</a></li>
</ul>
</aside>
<main>
{% block content %}
{% endblock %}
</main>
</body>
</html>
為角色創建專屬模板
每個角色的模板繼承自 base.html，僅需填充主內容部分。
範例：freelancer_dashboard.html
{% extends 'base.html' %}
{% block content %}
<h2>接案進度</h2>
<ul>
<li>專案名稱：專案A，狀態：進行中</li>
<li>專案名稱：專案B，狀態：已完成</li>
</ul>
<h2>通知</h2>
<p>您有新的專案邀請！</p>
{% endblock %}
範例：client_dashboard.html
{% extends 'base.html' %}
{% block content %}
<h2>發包進度</h2>
<ul>
<li>專案名稱：專案X，負責人：接案者A</li>
<li>專案名稱：專案Y，負責人：接案者B</li>
</ul>
<h2>新增專案</h2>
<button>新增專案</button>
{% endblock %}
總結
- 合併模板適用於頁面結構高度相似的情況，可簡化代碼數量，但需謹慎處理條件渲染。
- 分離模板更適合邏輯和功能差異大的場景，能夠提升代碼清晰度與可維護性。
- 通過共用基礎模板（如
base.html），有效減少重複代碼，並提升整體結構的可擴展性。
無論選擇哪種方案，關鍵是根據實際需求平衡代碼的簡潔性與靈活性，為未來的維護和擴展做好準備。