Django+Bootstrip 卡片模板設計 經典精品

侬侬发發表於2024-07-25
Djangoboot

下面是一個完整的卡片模板程式碼，包含所有元素，並使用Django的模板語言來處理狀態欄位的條件渲染。同時還包括示例檢視和URL配置。

完整的卡片模板

<div class="card">
    <!-- 卡片圖片 -->
    <img src="{{ product_package.image_url }}" class="card-img-top" alt="產品圖片">

    <div class="card-body">
        <!-- 卡片標題 -->
        <h5 class="card-title"><strong>產品：</strong> {{ product_package.item_no }}</h5>

        <!-- 卡片文字內容 -->
        <p class="card-text"><strong>紙箱:</strong> {{ product_package.box_code }}</p>
        <p class="card-text"><strong>棧板:</strong> {{ product_package.pallet_code }}</p>
        <p class="card-text"><strong>產品單重：</strong> {{ product_package.product_weight }}</p>
        <p class="card-text"><strong>單箱產品數量：</strong> {{ product_package.box_product_qty }}</p>
        <p class="card-text"><strong>每層箱數：</strong> {{ product_package.pallet_boxes_layer }}</p>
        <p class="card-text"><strong>最高層數：</strong> {{ product_package.pallet_max_layers }}</p>
        <p class="card-text"><strong>其他包材重量(棧箱以外)：</strong> {{ product_package.pallet_other_weight }}</p>

        <!-- 條件顯示狀態 -->
        <p class="card-text">
            <strong>狀態：</strong>
            {% if product_package.state %}
                啟用
            {% else %}
                未啟用
            {% endif %}
        </p>
    </div>

    <!-- 卡片底部操作按鈕 -->
    <div class="card-footer text-muted">
        <a href="{% url 'edit_product' product_package.id %}" class="btn btn-primary">編輯</a>
        <a href="{% url 'delete_product' product_package.id %}" class="btn btn-danger">刪除</a>
    </div>
</div>

解釋：

  1. 卡片圖片：

    • <img src="{{ product_package.image_url }}" class="card-img-top" alt="產品圖片">：在卡片頂部顯示產品圖片。確保image_url是你的模型或上下文中提供的圖片URL。

  2. 卡片標題：

    • <h5 class="card-title"><strong>產品：</strong> {{ product_package.item_no }}</h5>：顯示產品編號作為卡片標題。

  3. 卡片文字內容：

    • <p class="card-text"><strong>紙箱:</strong> {{ product_package.box_code }}</p>：顯示紙箱程式碼。
    • 其他欄位如pallet_code、product_weight、box_product_qty等，以類似方式顯示。

  4. 條件顯示狀態：

    • {% if product_package.state %}：檢查state是否為真。
    • 如果state為真，顯示“啟用”；否則顯示“未啟用”。

  5. 卡片底部操作按鈕：

    • <div class="card-footer text-muted">：包含編輯和刪除產品的操作按鈕。
    • <a href="{% url 'edit_product' product_package.id %}" class="btn btn-primary">編輯</a>：連結到編輯頁面。
    • <a href="{% url 'delete_product' product_package.id %}" class="btn btn-danger">刪除</a>：連結到刪除操作。

Django檢視示例

from django.shortcuts import render, get_object_or_404

def product_detail_view(request, product_id):
    product_package = get_object_or_404(ProductPackage, id=product_id)
    return render(request, 'product_detail.html', {'product_package': product_package})

URL配置示例

from django.urls import path
from .views import product_detail_view

urlpatterns = [
    path('product/<int:product_id>/', product_detail_view, name='product_detail'),
    path('product/<int:product_id>/edit/', edit_product_view, name='edit_product'),
    path('product/<int:product_id>/delete/', delete_product_view, name='delete_product'),
]

確保在你的檢視中傳遞product_package物件到模板，並定義edit_product_view和delete_product_view檢視。根據實際情況替換ProductPackage為你的實際模型名稱。



效果圖

相關文章