The template engine of AnQiCMS provides a powerful and flexible tool for the dynamic display of website content. Among them,divisiblebyThe filter is a small yet effective feature that can enhance the logic of templates, mainly used to determine if one number can be evenly divided by another.Understanding and making good use of this filter can help us achieve more intelligent effects in content presentation and page layout.

divisiblebyThe core function of the filter is to determine whether a number is divisible by another.

divisiblebyThe filter, as the name implies, has the core function of checking whether a given number can be evenly divided by another number.When we need to trigger some conditional judgment based on the divisibility of a number, this filter is particularly useful.

Its basic usage syntax is very intuitive:{{ 数值 | divisibleby: 除数 }}Here,.数值is the original number we need to judge, and除数is the other number we use for integer division. This除数It can be either a fixed number written directly, or a variable obtained through other means.

After executing this filter, it will return a boolean value (i.e., true or false).

  • If数值Can be divided by除数The filter will returnTrue.
  • If数值Cannot be divided by除数The filter will returnFalse.

For example,{{ 21 | divisibleby: 3 }}it will returnTrueBecause 21 is divisible by 3; and{{ 22 | divisibleby: 3 }}Then it will returnFalseThis feature makes it very efficient for conditional judgments in templates.

divisiblebyCommon application scenarios of filters

divisiblebyFilters have a variety of flexible applications in the actual operation of website content, especially when dealing with lists or repetitive elements, which can help us achieve more precise control.

  1. List Style Alternating (Zebra Strip Effect)When displaying article lists, product lists, or table data, in order to enhance readability and visual appeal, we often need to make adjacent rows or columns display different background colors or styles, which is known as the 'zebra striping' effect. By combiningdivisiblebyfilters andforIn-built in the loopforloop.CounterA variable for a loop counter, which allows us to easily implement the requirement of 'changing color every N lines.'For example, let odd and even rows have different styles, or set a special background every three rows.

  2. Content grouping and inserting specific elementsImagine being on a long product list page where you want to automatically insert an advertisement, a special recommendation spot, or a visual separator after every 4 products. By judgingforloop.CounterWhether it can be divided evenly by 4, we can insert custom HTML structure or content at the appropriate loop position.This not only effectively breaks the fatigue of users reading, but also increases the exposure opportunities for marketing content.

  3. Periodically display special prompts or iconsSometimes, we may want to add some additional tags to the content under certain specific conditions.For example, in a video list, a 'Hot Recommendation' icon is displayed every 5th video; or in a news list, a 'Latest Comment' link is displayed every 10 news items.divisiblebyThe filter makes it simple and easy to enhance periodic content without complex data processing logic.

  4. Custom grid layout and responsive design assistanceWhen building a grid-based layout, for example, if you want to display 3 or 4 elements per row,divisiblebyCan help us determine when to end the current line or start a new one, ensuring that elements are aligned as expected across different screen sizes.Although most modern CSS frameworks have built-in comprehensive grid systems, combining template logic for auxiliary judgment is still effective in certain scenarios that require fine control.

Code Examples and Practices

Below, we will demonstrate through some specific code examples,divisiblebyThe application of filter in AnQiCMS template.

Assume we have a list of articlesarchivesWe want to achieve the following effects:

  • Alternate background color display of each article line (odd and even rows with different colors).
  • Insert a separator or an advertisement after displaying 3 articles.
<style>
    .article-item {
        padding: 10px;
        margin-bottom: 5px;
    }
    .article-item.odd {
        background-color: #f9f9f9; /* 奇数行背景色 */
    }
    .article-item.even {
        background-color: #e6e6e6; /* 偶数行背景色 */
    }
    .separator {
        border-top: 1px dashed #ccc;
        margin: 20px 0;
        text-align: center;
        color: #888;
    }
</style>

<div class="article-list">
    {% archiveList archives with type="list" limit="10" %}
        {% for item in archives %}
            {# 判断奇偶行，实现斑马线效果 #}
            <div class="article-item {% if forloop.Counter | divisibleby: 2 %}even{% else %}odd{% endif %}">
                <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
                <p>{{ item.Description | truncatechars:100 }}</p>
                <small>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</small>
            </div>

            {# 每显示3篇文章后插入分隔线，但不在最后一篇文章后插入 #}
            {% if forloop.Counter | divisibleby: 3 and not forloop.Last %}
                <div class="separator">--- 更多精彩内容 ---</div>
            {% endif %}
        {% empty %}
            <p>目前没有文章。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

In this example,forloop.CounterIt will increment from 1, representing the current loop count.

  • {% if forloop.Counter | divisibleby: 2 %}Determine if the current loop iteration can be evenly divided by 2, thereby adding for even rowseventhe class, adding for odd rowsoddclass.
  • {% if forloop.Counter | divisibleby: 3 and not forloop.Last %}Then determine if the current loop count is divisible by 3 and is not the last item in the list, so that a new item is inserted after every third article.separatorofdiv.

By such a combination, we can achieve rich and diverse content display and layout requirements purely through template-level control, without changing the data source and backend logic.

Summary

divisiblebyThe filter is a very practical tool in the AnQiCMS template engine, which provides a flexible solution for complex list display, content grouping, and dynamic layout through simple integer division judgment. Whether it is the 'zebra line' effect for optimizing user experience or the periodic element insertion for improving content operation efficiency, divisibleby

Common Questions (FAQ)

1.divisiblebyCan the filter only be used for numbers?Yes,divisiblebyThe filter is specifically used to process variables of numeric type.If applied to non-numeric types (such as strings), it may cause template rendering errors or unexpected results.Ensure that you provide numbers to the filter in actual use.

2. How to determine if a number cannot be divided evenly?If you need to determine if a number cannot be evenly divided by another number, you can combinedivisiblebyFilter is related toifJudgment in logic.notKeywords. For example:{% if not forloop.Counter | divisibleby: 2 %}It can be used to determine if the current loop counter is an odd number (i.e., not divisible by 2).

3.divisiblebyFilter is related toforloop.CounterWhat is the relationship? divisiblebyFilters are often used withforIn the loopforloop.CounterVariables are used together.forloop.CounterIncremented at each iteration, it provides the current number of iterations. By takingforloop.CounterasdivisiblebyThe 'value' parameter can conveniently implement conditional judgments based on the number of iterations, such as alternating colors for rows, inserting content every N items, etc. This is one of its most common application scenarios.