Django模板如何避免重复展示已出现的待替换产品 按组展示对应替代产品

方案1：视图层预处理数据（更推荐） #

Django的模板层设计原则是仅做展示逻辑，复杂的数据聚合建议放在视图层完成，性能更好且可维护性更高。

步骤1：修改视图查询逻辑 #

在视图中先将收藏数据按待替换产品分组，把每个待替换产品对应的所有替代产品聚合为列表，再传给模板：

# views.py 中对应视图的核心逻辑
from .models import Favorite, Product

def favorites_view(request):
    # 先获取当前用户所有不重复的待替换产品ID
    unique_to_substitute_ids = Favorite.objects.filter(
        user=request.user # 替换为你实际的用户过滤条件
    ).values_list("product_to_substitute_id", flat=True).distinct()

    # 构造分组数据
    grouped_favorites = []
    for p_id in unique_to_substitute_ids:
        # 获取待替换产品实例
        to_substitute = Product.objects.get(id=p_id)
        # 获取该产品对应的所有替代产品实例
        substitutes = Product.objects.filter(
            id__in=Favorite.objects.filter(
                product_to_substitute_id=p_id,
                user=request.user
            ).values_list("substitute_product_id", flat=True)
        )
        grouped_favorites.append({
            "to_substitute": to_substitute,
            "substitutes": substitutes
        })
    
    # 将分组后的数据传入模板上下文
    return render(request, "你的模板路径.html", {"grouped_favorites": grouped_favorites})

步骤2：修改模板代码 #

直接遍历分组后的数据集即可：

{% for group in grouped_favorites %}
    <!-- 待替换产品区块 每个产品仅渲染1次 -->
    <section style="background-image: url('{{ group.to_substitute.image_url }}')">
        ...
    </section>

    <!-- 遍历渲染所有对应的替代产品 -->
    {% for substitute in group.substitutes %}
    <section>
        <img class="img-fluid" src="{{ substitute.image_url }}" alt="..." />
    </section>
    {% endfor %}
{% endfor %}

方案2：模板层快速修改（无需改动视图） #

如果你不想调整视图逻辑，可以用Django模板内置的ifchanged标签实现，仅当待替换产品ID变化时才渲染待替换产品区块：

注意：使用该方案需要确保传入模板的favorites查询集已经按product_to_substitute_id排序，否则会出现重复渲染的问题。
模板代码修改如下：

{% for product in favorites %}
        {% if product.product_to_substitute %}

            {% ifchanged product.product_to_substitute_id %}
            <!-- 待替换产品区块 仅ID变化时渲染 -->
            <section style="background-image: url('{{ product.product_to_substitute.image_url }}')">
                ...
            </section>
            {% endifchanged %}

            <!-- 替代产品区块每次循环都渲染 -->
            <section>
                <img class="img-fluid" src="{{ product.substitute_product.image_url }}" alt="..." />
            </section>

        {% endif %}
{% endfor %}

内容的提问来源于stack exchange，提问作者bientavu