如何在Django ListView中实现每2个项的镜像布局？

问题描述 #

我正在开发一个Django产品概览页面，用ListView展示分类，采用Bootstrap两栏网格布局，呈现「图片 | 信息」的形式。现在希望每第2个项进行镜像，最终效果如下：

Picture | Info
Info | Picture
Picture | Info

请问如何修改循环实现该需求？我的现有代码如下：

<div class='container'>

    {% for category in categories  %}

<!-- 检查是否存在子分类，不存在则按分类筛选，存在则按子分类筛选 -->
    {% if category.sub_category is Null %}

        <a href="{% url 'academy:brandByCat_list' category.category_name %}">
            <div class="row py-3 item-display">

                <div class='col-md item-img'>
                    <img src= {{category.category_picture.url}} class="img-fluid category-picture">
                </div>

                <div class="col-md">
                    <h1 class='py-3'>{{category.category_name}}</h1>
                    <p>{{category.category_info}}
                </div>

            </div>
        </a>



        {% else %}
        <a href="{% url 'academy:brandBySubCat_list' category.sub_category %}">
            <div class="row py-3 item-display">

                <div class='col-md item-img'>
                    <img src= {{category.category_picture.url}} class="img-fluid category-picture">
                </div>

                <div class="col-md">
                    <h1 class='py-3'>{{category.sub_category}}</h1>
                    <p>{{category.category_info}}</p>
                </div>

            </div>
        </a>

    {% endif %}


    {% endfor %}
</div>

修改方案 #

利用Django模板循环内置的forloop.counter变量判断当前项的位置，偶数项调换图片和信息栏的顺序即可实现镜像效果，同时优化代码减少冗余：

<div class='container'>
    {% for category in categories %}
        <!-- 统一处理跳转链接和标题，减少重复代码 -->
        {% if category.sub_category is Null %}
            {% url 'academy:brandByCat_list' category.category_name as item_url %}
            {% with display_title=category.category_name %}
        {% else %}
            {% url 'academy:brandBySubCat_list' category.sub_category as item_url %}
            {% with display_title=category.sub_category %}
        {% endif %}

        <a href="{{ item_url }}">
            <div class="row py-3 item-display">
                <!-- 根据项的奇偶性调整列顺序 -->
                {% if forloop.counter|divisibleby:2 %}
                    <!-- 偶数项：信息在前，图片在后 -->
                    <div class="col-md">
                        <h1 class='py-3'>{{ display_title }}</h1>
                        <p>{{ category.category_info }}</p>
                    </div>
                    <div class='col-md item-img'>
                        <img src="{{ category.category_picture.url }}" class="img-fluid category-picture">
                    </div>
                {% else %}
                    <!-- 奇数项：图片在前，信息在后 -->
                    <div class='col-md item-img'>
                        <img src="{{ category.category_picture.url }}" class="img-fluid category-picture">
                    </div>
                    <div class="col-md">
                        <h1 class='py-3'>{{ display_title }}</h1>
                        <p>{{ category.category_info }}</p>
                    </div>
                {% endif %}
            </div>
        </a>
        {% endwith %}
    {% endfor %}
</div>

关键说明 #

• forloop.counter：从1开始计数当前循环项，配合divisibleby:2过滤器快速判断是否为偶数项
• 使用{% with %}标签复用标题和跳转链接，避免重复编写相同结构的代码，提升可维护性
• 偶数项调换信息栏与图片栏的顺序，实现交替镜像的布局效果
• 完整保留了原有的子分类判断逻辑，确保跳转链接和显示标题的正确性

内容的提问来源于stack exchange，提问作者Thomas Doll-Datema