Can the `divisibleby` filter be used to implement alternating row colors or other conditional styles in a loop?

In the daily operation of website content, how to make the list data more readable and visually attractive is a key factor in improving user experience.English CMS (EnglishCMS) provides rich possibilities for content display with its flexible template engine.divisiblebyLook at how it helps us achieve alternating row coloring or other conditional styles in a loop.

KnowdivisiblebyFilter

The template system of Anqi CMS adopts a template engine syntax similar to Django, which makes the creation and customization of templates very intuitive and powerful.Among them, the filter (Filters) is a very practical feature in the template engine, which allows us to process or transform the output variables.

divisiblebyThat is a filter whose main function isCheck if a number can be evenly divided by another numberThis filter will return a boolean value (i.e.,)TrueorFalse), clearly telling us the result of the division.

Its basic syntax is very concise:

{{ 数值 | divisibleby: 除数 }}

For example, if we want to determine whether the number 21 can be evenly divided by 3, we can write it like this:

{{ 21 | divisibleby:3 }}
{# 输出结果：True #}

And if we want to determine whether 22 can be evenly divided by 3:

{{ 22 | divisibleby:3 }}
{# 输出结果：False #}

UnderstooddivisiblebyThe feature of [auto] can be cleverly applied to loops to achieve various conditional styles.

Practice one: Implement alternating row coloring in loops.

When displaying data in a table or list, alternating row colors are a common technique to enhance user experience. It helps users easily distinguish and read each row of data. In the template loop of Anqi CMS, we can utilizedivisiblebyfilters andforloop.Counter(Counter) Easily achieve this effect.

Anqi CMS'sforThe loop tag has built-in oneforloopan object, whereforloop.Counterwill start from 1, providing the current iteration number for each loop.

Combineforloop.Counteranddivisibleby:2，we can determine whether the current row is odd or even:

• Ifforloop.CounterIt can be divided evenly by 2, which means it is an even row.
• If it cannot be divided evenly by 2, it means it is an odd row.

Below is an example of alternating row colors implemented in the document list (usually usedarchiveListto get tags) example code:

{% archiveList archives with type="list" limit="10" %}
    {% for item in archives %}
    {# forloop.Counter | divisibleby:2 检查当前循环次数是否能被2整除 #}
    <li class="list-item {% if forloop.Counter | divisibleby:2 %}even-row{% else %}odd-row{% endif %}">
        <h4>{{ item.Title }}</h4>
        <p>{{ item.Description }}</p>
        <span>发布时间：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
    </li>
    {% endfor %}
{% endarchiveList %}

In this code, we dynamically added<li>to each elementeven-roworodd-rowThese two CSS classes. You only need to define the styles of these two classes in your CSS file, for example:

.even-row {
    background-color: #f9f9f9; /* 浅灰色背景 */
}
.odd-row {
    background-color: #ffffff; /* 白色背景 */
}
.list-item {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

Thus, each row in the list will display a different background color based on its oddity or evenness, greatly enhancing the visual effects.

Practical Two: Implementing More Flexible Conditional Styles

divisiblebyThe purpose of the filter is not just to alternate row colors. It can also be used to apply styles based on specific numeric conditions within a loop.

Imagine that you might want a special promotion tag for every third product item, or highlight every fifth news title with a striking color.divisiblebyIt can easily help you achieve these.

The following is an example showing how to highlight every third list item:

{% archiveList products with type="list" limit="15" %}
    {% for product in products %}
    {# 检查当前循环次数是否能被3整除，如果是，则添加highlight-promo类 #}
    <div class="product-card {% if forloop.Counter | divisibleby:3 %}highlight-promo{% endif %}">
        <h3>{{ product.Title }}</h3>
        <img src="{{ product.Thumb }}" alt="{{ product.Title }}">
        <p class="price">¥{{ product.Price }}</p>
        {% if forloop.Counter | divisibleby:3 %}
            <span class="promo-tag">特别推荐！</span>
        {% endif %}
    </div>
    {% endfor %}
{% endarchiveList %}

With the corresponding CSS style:

.product-card {
    border: 1px solid #eee;
    padding: 15px;
    margin-bottom: 10px;
    text-align: center;
}
.highlight-promo {
    border: 2px solid #ff6600; /* 突出边框 */
    box-shadow: 0 0 8px rgba(255, 102, 0, 0.3); /* 阴影效果 */
}
.promo-tag {
    display: inline-block;
    background-color: #ff6600;
    color: #fff;
    padding: 3px 8px;
    font-size: 0.8em;
    margin-top: 5px;
    border-radius: 3px;
}

In this way, you can judgeforloop.CounteranddivisiblebyFilter, combinedifTags, implement any conditional judgment based on numeric divisibility, adding more personalization and interactivity to your website content. Whether it's alternating row colors, special markings, grouped display, or other creative styles,divisiblebyIt is a very powerful and practical tool.

Common Questions (FAQ)

1. **In AnQiCMS template, `forloop