Today, let's explore a practical and interesting skill: how to use the AnQiCMSforIn the loop, different styles are added to pagination links based on the parity of the page number.This not only makes your pagination navigation more visually hierarchical, but also helps users identify and locate the page faster in some scenarios.

AnQiCMS pagination tags: the foundation of building navigation

In AnQiCMS template design, pagination is achieved through built-inpagination

{% pagination pages with show="5" %}
    {# 这里是分页链接的循环部分 #}
    {% for item in pages.Pages %}
        <a class="page-item {% if item.IsCurrent %}active{% endif %}" href="{{item.Link}}">{{item.Name}}</a>
    {% endfor %}
{% endpagination %}

In this code,pages.PagesIt is an array that contains all the pagination objects displayed in the middle.item.Namerepresenting the page number,item.LinkThis is the link corresponding to the page number.item.IsCurrentIt is a boolean value used to determine whether the current page is selected.

Smart useforloop.CounterOdd/even judgment

To implement adding styles based on the parity of the page number, we first need to know how many iterations the current loop is. AnQiCMS's template engine (similar to Django syntax) inforA very useful built-in variable is provided in the loop:forloop.Counter.

forloop.CounterIt will record the currentfornumber of times the loop executes, it starts from1begin to increase. This means,forloop.Counterhas a value of1, 3, 5...When, we know this is a link of odd page numbers (starting from the first link in the 'middle page number array' that we want to change the style of); when its value is2, 4, 6...When, it is the even page number link.

With this counter, we can use modular arithmetic (remainder) in mathematics to determine the oddness or evenness.A number divided by 2, if the remainder is 1, then it is odd; if the remainder is 0, then it is even.

  • forloop.Counter % 2 == 1: means it is the odd iteration.
  • forloop.Counter % 2 == 0: means it is the even iteration.

Integrate odd/even judgment, add style to pagination links.

Now, let's seamlessly integrate the odd-even judgment logic into the loop of pagination links. We can use it inside the loop body.if-elseConditional judgment, based onforloop.CounterThe parity, dynamically adds different CSS classes to each pagination link.

Let's look at a complete example:

<div class="pagination">
    {% pagination pages with show="5" %}
    <ul>
        {# 首页和上下页通常有独立的样式，此处我们专注于中间的页码列表 #}

        {% if pages.FirstPage %}
        <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
            <a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
        </li>
        {% endif %}

        {% if pages.PrevPage %}
        <li class="page-item">
            <a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
        </li>
        {% endif %}

        {# 核心部分：遍历中间页码，并根据奇偶性添加样式 #}
        {% for item in pages.Pages %}
            {% set classNames = "" %} {# 初始化一个空字符串来存储可能添加的类名 #}

            {# 判断是否为当前页，如果是，添加active类 #}
            {% if item.IsCurrent %}
                {% set classNames = classNames|add:"active" %}
            {% endif %}

            {# 根据forloop.Counter判断奇偶性，并添加相应类名 #}
            {% if forloop.Counter % 2 == 1 %}
                {% set classNames = classNames|add:" odd-page" %} {# 奇数页添加'odd-page'类 #}
            {% else %}
                {% set classNames = classNames|add:" even-page" %} {# 偶数页添加'even-page'类 #}
            {% endif %}

            <li class="page-item {{ classNames|trim }}"> {# 使用trim过滤器清除可能多余的空格 #}
                <a href="{{item.Link}}">{{item.Name}}</a>
            </li>
        {% endfor %}

        {% if pages.NextPage %}
        <li class="page-item">
            <a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
        </li>
        {% endif %}

        {% if pages.LastPage %}
        <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
            <a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
        </li>
        {% endif %}
    </ul>
    {% endpagination %}
</div>

In this piece of code, we introduce a namedclassNamesThe temporary variable, and throughaddFilter (refer to AnQiCMS'sfilter-add.mddocument) dynamically concatenate CSS classes.|trimFilter (referencefilter-trim.mdEnglish for: ）用于清除拼接过程中可能产生的多余空格，确保HTML结构干净整洁。

English for: 赋予它们生命：定义CSS样式

Of course, simply adding a CSS class is not enough, we also need to add your website's stylesheet (usually located in/public/static/css/In the CSS file under the directory) define these classes to see the actual effect.

You can define some basic styles like this:

English translation of 'auto': English /* pagination container base styles */ pagination ul {

list-style: none;
padding: 0;
margin: 20px 0;
display: flex;
justify-content: center;
gap: 5px; /* 页码之间的间距 */

}

/* All page item base styles */ .pagination .page-item {

display: inline-block;

}

.pagination .page-item a {

display: block;
padding: 8px 12px;
border: 1px solid #ddd;
text-decoration: none;
color: #337ab7;
border-radius: 4px;
transition: background-color 0.3s ease;

}

.pagination .page-item a:hover {

background-color: #f5f5f5;

}

/* Current active page style */ .pagination .page-item.active a {

background-color: #007bff;
color: white;
border-color: #007bff;
cursor: default;

}

/* English translation: Odd page special style */ .pagination .page-item.odd-page a {

background-color: #e6f7ff; /* 浅蓝色背景 */
color: #1890ff;
border-color: #91d5ff;

}

.pagination .page-item.odd-page a:hover {

background-color: #bae7ff;

}

/* Even page special style */ .pagination .page-item.even-page a {

background-color: #f6ffed; /* 浅绿色背景 */
color: #52c41a;
border-color: #b7eb8f;

}

.pagination .page-item.even-page a:hover {

background-color: #d9f7be;

}