Django模板渲染菜品对象重复 双列分栏展示异常解决

左右列菜品重复的核心逻辑错误非常明确：模板中两个列的内部循环都在遍历全量dishes查询集，无论外层怎么循环生成列、怎么通过cycle标签切换left-list/right-list类名，两个循环拿到的都是完全一致的全量数据，必然会渲染出重复内容。cycle标签只能循环切换输出值，根本不具备数据拆分的能力。

不要在模板层做数据拆分处理，直接在视图层把目标查询集拆成两个独立列表传入模板，模板层分别对应渲染即可，逻辑最清晰也最不容易出问题。

第一步：调整视图层（views.py）逻辑 #

删掉原来传长度为2的列表n、传全量dishes查询集的逻辑，提前在视图内完成数据筛选和拆分：

from django.shortcuts import render
from .models import DishesModel

def dish_page(request):
    # 先筛选出当前tab需要展示的菜品，比如你当前要渲染的Breakfast分类
    target_dishes = list(DishesModel.objects.filter(tabs="Breakfast"))
    # 按奇偶索引拆分：左列放索引0、2、4...的菜品，右列放1、3、5...的菜品，适配瀑布流双列均匀排布的需求
    left_list = target_dishes[::2]
    right_list = target_dishes[1::2]
    
    return render(request, "dish_template.html", {
        "left_dishes": left_list,
        "right_dishes": right_list
    })

切片规则可以根据设计稿要求灵活调整：如果需要固定前半部分菜品放左列、后半部分放右列，只需要把拆分逻辑改成mid = len(target_dishes) // 2，left_list = target_dishes[:mid]、right_list = target_dishes[mid:]即可。

第二步：调整模板渲染逻辑 #

删掉原来外层遍历列表n生成列的冗余逻辑，直接写两个固定列容器，分别渲染对应拆分好的数据集，输出结构和你手里的原生HTML预期代码完全一致：

<div class="row">
    <!-- 左列容器 -->
    <div class="col-lg-6">
        <div class="left-list">
            {% for dish in left_dishes %}
            <div class="dish-item">
                <!-- 这里保留你原来的菜品卡片渲染逻辑即可，比如菜品图、名称、价格字段 -->
                <img src="{{ dish.cover.url }}" alt="{{ dish.name }}">
                <h4>{{ dish.name }}</h4>
                <span class="price">¥{{ dish.price }}</span>
            </div>
            {% endfor %}
        </div>
    </div>
    <!-- 右列容器 -->
    <div class="col-lg-6">
        <div class="right-list">
            {% for dish in right_dishes %}
            <div class="dish-item">
                <img src="{{ dish.cover.url }}" alt="{{ dish.name }}">
                <h4>{{ dish.name }}</h4>
                <span class="price">¥{{ dish.price }}</span>
            </div>
            {% endfor %}
        </div>
    </div>
</div>

Django模板本身定位是纯展示层，不适合承载数据拆分这类处理逻辑，之前尝试的模板层拆分方案不生效，本质是模板内置标签没有提供便捷的查询集切片能力，强行写自定义模板标签实现反而会增加不必要的代码复杂度。视图层提前拆分数据的方案有几个明显优势：

• 左右两列分别渲染独立的拆分后数据集，完全不会出现内容重复问题
• left-list、right-list类名直接绑定到对应列容器，不需要动态切换，不会出现类名匹配错误
• 输出的DOM结构和原生HTML预期实现完全一致，原有样式不需要任何修改
• 后续要调整拆分规则、切换菜品分类，只需要修改视图层几行代码即可，维护成本极低

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