Django 如何實現動態填充卡牌，以優化頁面顯示

更新日期： 2024 年 12 月 26 日

當網站尚未有足夠的用戶生成內容時，頁面可能顯得空泛或不完整。

為了提供一致的視覺效果並避免簡陋的版面設計，可以使用填充卡牌（Placeholder Cards）作為佔位符，維持整體佈局的完整性。

本篇文章將介紹如何使用 Django 實現這樣的功能，從視圖邏輯到模板渲染，循序漸進地帶您了解整個實現過程。

視圖邏輯：計算填充卡牌數量

在 Django 視圖中，設計了一個邏輯來計算填充卡牌數量，確保頁面上總是顯示指定數量的卡牌（例如 4 張）。以下是視圖程式碼：

def home(request):
    categories = Category.objects.prefetch_related("services")
    services = Service.objects.order_by("-created_at")[:4]
    placeholders = max(0, 4 - services.count())  # 計算填充卡牌數量
    return render(request, "pages/home.html", {
        "services": services,
        "categories": categories,
        "placeholders": range(placeholders)  # 傳遞範圍對象
    })

邏輯詳解

1. 抓取服務數據 (services)：
   • 從 Service 模型中提取最新的 4 個服務，按 created_at 降序排序。
   • 如果服務數據少於 4，則返回相應數量的結果。
2. 計算填充卡牌數量 (placeholders)：
   • 計算還需要多少個填充卡牌來補足總數 4。
   • 使用公式 max(0, 4 - services.count()) 確保結果非負。
3. 傳遞數據到模板：
   • services：傳遞實際服務數據。
   • placeholders：傳遞一個範圍對象（range(placeholders)），用於生成對應數量的填充卡牌。

模板邏輯：渲染卡牌與填充卡牌

模板負責將服務數據與填充卡牌渲染到頁面。以下是模板程式碼：

<div class="services grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
  <!-- 渲染服務卡片 -->
  {% for service in services %}
    {% include "pages/service_card.html" %}
  {% empty %}
    <p class="text-center text-gray-500 col-span-full">目前沒有服務資料。</p>
  {% endfor %}

  <!-- 渲染填充卡牌 -->
  {% for _ in placeholders %}
    <div class="bg-white shadow-md rounded-lg p-4 border border-gray-200">
      <div class="animate-pulse">
        <div class="h-32 bg-gray-300 rounded mb-4"></div>
        <div class="h-4 bg-gray-300 rounded w-3/4 mb-2"></div>
        <div class="h-4 bg-gray-300 rounded w-1/2"></div>
      </div>
    </div>
  {% endfor %}
</div>

邏輯詳解

1. 服務卡片渲染 ({% for service in services %})：
   • 迴圈 services，渲染每個服務卡片。
   • 使用 {% include %} 引入卡片內容，統一樣式與邏輯。
2. 空數據提示 ({% empty %})：
   • 如果 services 為空，顯示提示文字「目前沒有服務資料」。
3. 填充卡牌渲染 ({% for _ in placeholders %})：
   • 使用 placeholders（範圍對象）生成對應數量的填充卡牌。
   • 卡牌包含骨架屏樣式，模擬加載狀態。

整體運作流程

流程：計算數據

1. 從資料庫中抓取最多 4 個服務數據。
2. 如果服務數據不足 4，計算需要的填充卡牌數量。

流程：渲染模板

1. 渲染已抓取的服務數據作為服務卡片。
2. 若數據不足，根據 placeholders 渲染填充卡牌，確保總數達到 4。

運作示例

以下是不同數據條件下的運作示例：

情況：services 有 2 個項目

• 視圖計算結果：
  • services.count() = 2
  • placeholders = max(0, 4 - 2) = 2
• 模板渲染：
  • 渲染 2 個服務卡片。
  • 渲染 2 張填充卡牌。

情況：services 為空

• 視圖計算結果：
  • services.count() = 0
  • placeholders = max(0, 4 - 0) = 4
• 模板渲染：
  • 顯示提示文字：「目前沒有服務資料」。
  • 渲染 4 張填充卡牌。

情況：services 有 4 個項目

• 視圖計算結果：
  • services.count() = 4
  • placeholders = max(0, 4 - 4) = 0
• 模板渲染：
  • 渲染 4 個服務卡片。
  • 無需渲染填充卡牌。

優勢與彈性

保持頁面整潔

即使數據不足，填充卡牌的存在使頁面佈局保持一致，減少空白感。

提供良好用戶體驗

骨架屏樣式模擬加載效果，給用戶提供視覺反饋，增強交互體驗。

易於維護與擴展

• 邏輯清晰：數據處理在視圖中完成，模板僅負責渲染。
• 可調整：若需要更改卡片總數，只需修改視圖中的參數（目前為 4）。

總結

這段程式碼實現了動態填充卡牌的功能，即使在數據不足或加載中的情況下，頁面佈局依然保持美觀與一致性。

]通過結合視圖邏輯與模板渲染，您可以靈活地控制卡片數量並提升用戶體驗。如果有任何改進需求或疑問，歡迎隨時討論！