How to use the `divisibleby` filter in an `divisibleby` loop to achieve alternating row colors or group output by N elements?

In website operation, carefully designed page layout and content presentation can significantly improve user experience and readability.Especially in scenarios where the list content is abundant, if all entries are presented in the same style, it is easy to cause visual fatigue.At this time, alternating row colors or grouping output by a specific quantity can well solve these problems.divisiblebyThe filter is a powerful tool to meet such needs.

This article will delve into how to skillfully use the security CMS templates indivisiblebyFilter, implement alternating row coloring or grouping output of N elements in the loop.

---

UnderstandingdivisiblebyFilter

The template engine of Anqi CMS supports syntax similar to Django, including many practical filters (filters).divisiblebyThe filter, as the name implies, is used to determine whether one number can be evenly divided by another.Its return value is a boolean value (True or False), which makes it an ideal tool for implementing conditional judgments in loops.

Its basic usage is very intuitive:

{{ 某个数字 | divisibleby: 另一个数字 }}

For example,{{ 21 | divisibleby:3 }}it will returnTrueBecause 21 is divisible by 3.{{ 22 | divisibleby:3 }}Then it will returnFalse.

In the loop of the template, we often useforloop.Counterthis special variable. It represents the index of the current loop, starting from 1. Combinedforloop.CounteranddivisiblebyWe can easily control the display logic of list elements.

Implement alternating row coloring for the list

Stripping color is one of the most common methods to enhance the readability of lists.It applies different background colors to odd and even rows in the list to make it easier for users to distinguish and read each item.

Operation ideas

To implement alternating row coloring, we need to determine whether the current loop index is odd or even.forloop.CounterIf it can be divided by 2, it means the current is an even row; otherwise, it is an odd row.

Sample code.

Assume we have a list of documents, and we want to display different background colors for alternate rows.

Firstly, define two classes in your CSS style file, for example,odd-rowandeven-row:

/* public/static/css/style.css 或您的自定义CSS文件 */
.article-list li {
    padding: 10px;
    margin-bottom: 5px;
}
.odd-row {
    background-color: #f9f9f9; /* 浅灰色背景 */
}
.even-row {
    background-color: #e0e0e0; /* 稍深一点的灰色背景 */
}

Then, in the template files of Anqi CMS (for example)archive/list.html), usedivisiblebyThe filter dynamically adds style classes to list items:

<ul class="article-list">
    {% archiveList archives with type="page" limit="10" %}
        {% for item in archives %}
            <li class="{% if forloop.Counter|divisibleby:2 %}even-row{% else %}odd-row{% endif %}">
                <!-- 这里是您的文章内容 -->
                <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
                <p>{{ item.Description|truncatechars:100 }}</p>
                <span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
            </li>
        {% empty %}
            <li>暂无相关内容。</li>
        {% endfor %}
    {% endarchiveList %}
</ul>

In this example,forloop.Counter|divisibleby:2It will judge whether the current row is an even row. If it is, it will applyeven-rowclass; otherwise, applyodd-rowClass. By this method, we easily achieve the alternating row color effect of the list.

Tip:If it is only to achieve a simple alternating row color, the Anqi CMS template also provides a more concisecycleLabel. For example:

<li class="{% cycle 'odd-row' 'even-row' %}">
    <!-- 内容 -->
</li>

However, `divisibleby