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.AnQiCMS (AnQiCMS) provides rich possibilities for content display with its flexible template engine.Today, let's talk about a very practical template filter -divisiblebyLook at how it helps us achieve alternating row coloring or other conditional styles in a loop.

Get to knowdivisiblebyFilter

The Anqi CMS template system adopts a template engine syntax similar to Django, making the creation and customization of templates very intuitive and powerful.Among them, Filters are a very practical feature of the template engine, allowing us to process or transform variables when outputting them.

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

Its syntax is very concise:

{{ 数值 | divisibleby: 除数 }}

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

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

And if we want to determine whether 22 is divisible by 3:

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

UnderstooddivisiblebyThis feature allows us to cleverly apply it in loops to achieve various conditional styles.

Practice 1: Implement alternating row coloring in loops

When displaying data in a table or list, alternating row coloring is a common technique to enhance user experience, which helps users easily distinguish and read each line of data. In the template loop of AnQi CMS, we can take advantage ofdivisiblebyFilters andforloop.Counter(Loop counter) easily achieve this effect.

Of Security CMSforThe loop tag built-in included aforloopwithin the object,forloop.Counterstarts from 1, providing the current iteration number for each loop.

Combineforloop.Counteranddivisibleby:2We can then determine whether the current line is an odd line or an even line:

• Ifforloop.CounterIf it is divisible by 2, it means it is an even line.
• If it is not divisible by 2, it means it is an odd line.

Here is an example of a row alternation code implemented in the document list (usually usingarchiveListtags to obtain

{% 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 set up each<li>Elements are dynamically addedeven-roworodd-rowThese CSS classes. You only need to define the styles for these 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;
}

Such that, each line in the list will display a different background color according to its parity, greatly enhancing the visual effects.

Practice 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 numerical conditions in a loop.

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

Here is an example of 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;
}

By this method, you can according toforloop.Counteranddivisiblebyfilter, combinedifLabel, implement any conditional judgment based on numerical divisibility, adding more personalization and interactivity to your website content. Whether it's alternating row coloring, special marking, grouped display, or other creative styles,divisiblebyIt is a very powerful and practical tool.

Frequently Asked Questions (FAQ)

1. **In the AnQiCMS template, `forloop