新手指南：Django 標籤顯示功能解析
更新日期： 2025 年 1 月 27 日
本文為 Django 標籤功能 系列文，第 1 篇
在 Django 專案開發中，標籤 (tags) 是一個非常常見且實用的功能，用於對內容進行分類或標記，方便用戶進行瀏覽與篩選。
本文將以具體範例代碼為基礎，詳細講解如何在 Django 中處理標籤，並在頁面中展示它們。
無論是新手還是剛接觸 Django 的開發者，都可以透過這篇文章了解如何實現這項功能。
從資料庫中查詢標籤
在 Django 的視圖函式中，使用以下代碼可以獲取服務項目 (Service) 的標籤資訊，並將其傳遞到模板進行渲染：
from django.shortcuts import render, get_object_or_404
def service_detail(request, service_id):
service = get_object_or_404(Service, id=service_id)
tags = service.tags.all()
return render(
request,
"services/service_detail.html",
{
"service": service,
"tags": tags, # 將標籤數據傳遞給模板
},
)
代碼解析：
get_object_or_404：- 使用服務 ID 獲取指定的
Service物件。 - 如果該物件不存在，則會自動返回一個 404 頁面。
- 使用服務 ID 獲取指定的
tags = service.tags.all()：- 假設
Service模型中定義了一個與Tag模型的多對多關聯字段，這行代碼會抓取所有與該服務項目相關的標籤。
- 假設
return render()：- 使用
render()將資料傳遞到模板，並返回 HTTP 響應。 tags被包含在模板上下文中，鍵名為"tags"，模板可以透過該鍵名訪問標籤數據。
- 使用
在前端渲染標籤
後端獲取的標籤資料會被傳遞到模板中，以下是模板中的代碼：
<div class="flex flex-wrap gap-2 mt-4">
{% for tag in tags %}
<span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-s flex items-center">
{{ tag.name }}
</span>
{% endfor %}
</div>
代碼解析：
{% for tag in tags %}： 使用 Django 模板語法迭代tags列表，逐一處理每個標籤。<span>標籤：- 每個標籤會被包裝在一個
<span>元素內。 - 標籤的樣式由一些 CSS 類名控制，例如：
px-3 py-1：定義內邊距，確保標籤內容的間距適中。bg-blue-100 text-blue-700：設置背景色和文字顏色，提供視覺區分。rounded-full：將標籤的邊角設置為圓形。flex items-center：確保標籤的內容居中對齊。
- 每個標籤會被包裝在一個
{{ tag.name }}： 動態顯示標籤名稱，這是從後端傳遞的tag物件的name屬性。
輸出效果： 每個標籤都會以小型圓角框的形式顯示，背景為淡藍色，文字為深藍色，整體美觀且易讀。
結語
以上內容詳細講解了如何在 Django 專案中處理標籤功能，從後端數據的查詢到前端的渲染展示，並附上了代碼解析與實現細節。
透過這篇指南，新手開發者應能輕鬆上手並根據需求進一步擴展標籤功能。如果你有任何問題或需要更多幫助，請隨時提出！