How to use the `divisibleby` filter in AnQi CMS template to achieve alternate row coloring or group output every N elements?

In website operation, a carefully designed page layout and content presentation can significantly improve user experience and readability.Especially in scenarios with a large number of items in a list, if all entries are presented in the same style, it is easy to cause visual fatigue.At this time, changing rows by color or grouping by a specific quantity can well solve these problems.The template engine of AnQiCMS (AnQiCMS), with its flexible Django template syntax, provides powerful filter functions, wheredivisiblebyThe filter is a tool to meet such needs.

This article will delve into how to巧妙运用安企CMS templates.divisiblebyFilter, implement list alternating color or group output by N elements in a loop.

UnderstandingdivisiblebyFilter

The Anqi CMS template engine 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.It returns a boolean value (True or False), making it an ideal tool for conditional judgment 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 }}it will returnFalse.

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

Implement alternating row coloring of the list

The use of alternating colors for rows is one of the most common methods to enhance the readability of a list.It applies different background colors to the odd and even rows in the list, making 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. Whenforloop.Counterit is divisible by 2, it indicates that the current row is even; otherwise, it is odd.

Example Code

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

First, 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; /* 稍深一点的灰色背景 */
}

Continue, in the Anqi CMS template file (for examplearchive/list.htmlUse it indivisiblebyThe 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, applyeven-rowthe class; otherwise, applyodd-rowClass. In this way, we easily achieved the alternating row color effect of the list.

Tip:If it is just to achieve a simple alternating row color, Anqi CMS template also provides a simpler one.cycleLabel. For example:

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

However, `divisibleby