In website content display, we often encounter situations where we need to adjust the layout or style based on the divisibility of numbers, such as setting different background colors for odd and even rows of tables, or starting a new row for grouping display every fixed number of contents.In the template system of Anqi CMS, implementing such logical judgments is quite direct and efficient.
The template engine of AnQi CMS is designed to be very flexible and easy to use, it adopts a syntax structure similar to Django templates, allowing us to access variables through simple references ({{ 变量名 }}）and logic control labels{% if ... %}/{% for ... %}To build dynamic content.In addition, it also provides a rich set of filters for processing and transforming variables, including a practical tool specifically for determining integer divisibility.
Core Solution:divisiblebyFilter
For determining whether a number can be evenly divided by another number, AnQi CMS provides a very convenient and powerful tool:divisiblebyFilter. This filter is specifically used to check if one number can be perfectly divided by another number, that is, the remainder of the division operation is zero.
Its basic usage is to follow the numeric variable to be judged with a pipe symbol|Connectdivisiblebythe filter, and use the colon:Specify another number as the divisor. The syntax structure is roughly as follows:
{{ 被检查的数字 | divisibleby: 整除数 }}
When the checked number can be perfectly divided by the divisor, the filter will returnTrue(true); otherwise, if it cannot be divided, it will returnFalse(false). For example,{{ 21|divisibleby:3 }}it will returnTruewhile{{ 22|divisibleby:3 }}Then it will returnFalse.
Actual application example
MastereddivisiblebyThe usage of the filter, we can easily implement various logic controls based on integer division in the template.
Scenario one: alternating styles of table rows
This is a very common requirement, by assigning different CSS classes to the odd and even rows of a table, we can enhance the readability of the table. When looping through list content, we can make use offorLoop built-inforloop.CounterVariable (representing the current loop index, starting from 1) to judge.
<table>
<thead>
<tr>
<th>序号</th>
<th>文章标题</th>
<th>发布日期</th>
</tr>
</thead>
<tbody>
{% for item in archiveList %}
<tr class="{% if forloop.Counter|divisibleby:2 %}even-row{% else %}odd-row{% endif %}">
<td>{{ forloop.Counter }}</td>
<td>{{ item.Title }}</td>
<td>{{ stampToDate(item.CreatedTime, "2006-01-02") }}</td>
</tr>
{% endfor %}
</tbody>
</table>
In this code block, we check the loop counterforloop.CounterIs it divisible by 2? If it is, then it indicates that the current is an even row, applyeven-rowclass; if not, it indicates that it is an odd row, applyodd-rowclass.
Scenario two: content list grouped display
假设您希望每 3 篇文章就开启一个新的行（English）div class="row"Here, the three-column layout is presented to make the content visually more orderly. This is very practical in product showcases or pages with图文 lists.
<div class="container">
{% for item in archiveList %}
{# 每隔3个项目或在第一个项目时开启新行 #}
{% if forloop.Counter == 1 or forloop.Counter0|divisibleby:3 %}
<div class="row">
{% endif %}
<div class="col-md-4">
<div class="article-card">
<h4>{{ item.Title }}</h4>
<p>{{ item.Description }}</p>
<a href="{{ item.Link }}">查看详情</a>
</div>
</div>
{# 每隔3个项目或在最后一个项目时关闭当前行 #}
{% if forloop.Counter|divisibleby:3 or forloop.Last %}
</div> {# 关闭 div.row #}
{% endif %}
{% endfor %}
</div>
Here we cleverly utilizeforloop.Counter(counting from 1) andforloop.Counter0（From 0 starting counting）coincide withdivisiblebyFilter to determine when to open a new line and when to close an old line.forloop.Counter0Is divisible by 3 (i.e., the 0th, 3rd, 6th…element), or it is the first element, we start a newdiv.row. At the same time,forloop.CounterThe number can be divided by 3, or it is the last element (forloop.Last) we close the current (div.row) to ensure the integrity of the layout.
Scenario three: dynamic judgment combined with variables
divisiblebyThe filter can not only be used for hard-coded numbers, it also works well with variables in templates.For example, you can get the number of articles displayed per line from the system settings and use it as the divisor.
{% set articles_per_row = system.articles_per_row %} {# 假设系统设置中有此变量，值为3或4等 #}
<div class="container">
{% for item in archiveList %}
{% if forloop.Counter == 1 or forloop.Counter0|divisibleby:articles_per_row %}
<div class="row">
{% endif %}
<div class="col-md-{{ 12|divisibleby:articles_per_row }}"> {# 动态计算列宽 #}
<div class="product-item">
<h3>{{ item.Title }}</h3>
<img src="{{ item.Thumb }}" alt="{{ item.Title }}">
</div>
</div>
{% if forloop.Counter|divisibleby:articles_per_row or forloop.Last %}
</div>
{% endif %}
{% endfor %}
</div>
In this example,articles_per_rowIt is a variable obtained from the system configuration, which makes the grouping logic more flexible and controllable. You can adjust the layout without modifying the template code. At the same time, we also demonstrated12|divisibleby:articles_per_rowThis usage, but pay attentiondivisiblebyThe filter itself returns a boolean value, here you should use ordinary division, for example12 / articles_per_rowTo dynamically calculate column width. Ifarticles_per_rowIs 3, then the column width is 4.
Attention Points and **Practice
When usingdivisiblebyFiltering time, there are several points to note:
- Input type:Make sure to pass:
divisiblebyThe number of the filter is a valid numeric type. Generally, template variables are handled correctly, but if unexpected situations occur, please check the output value of the variable. - Readability:Although template code can be written in a compact manner, proper indentation and comments are still good practices for team collaboration and future maintenance.
- Combined with other logic:
divisiblebyThe filter returns a boolean value, which means it can be directly embedded into{% if ... %}labels, and can also be combined with other logical operators (such asand/or/not) to build more complex conditional judgments. - Use loop variables wisely:
forLoop