作为一位资深的网站运营专家，我深知一个富有吸引力且用户友好的网站，其魅力往往蕴藏在细微之处。在安企CMS（AnQiCMS）这样基于Go语言、功能强大且模板灵活的内容管理系统中，即使是简单的分页导航，我们也能通过巧妙的设计，使其焕发新的生机，为用户提供更直观、愉悦的浏览体验。

今天，我们就来探讨一个既实用又充满趣味的技巧：如何在AnQiCMS的for循环中，根据页码的奇偶性为分页链接添加不同的样式。这不仅能让您的分页导航在视觉上更具层次感，还能在某些场景下，帮助用户更快地识别和定位页面。

AnQiCMS分页标签：构建导航的基石

在AnQiCMS的模板设计中，分页功能是通过内置的pagination标签来实现的。这个标签会根据当前列表的上下文，自动生成一套完整的分页数据，包括总页数、当前页、首页、末页、上一页、下一页，以及中间显示的页码列表。我们通常会这样使用它：

{% 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 %}

在这段代码中，pages.Pages是一个数组，包含了中间显示的所有页码对象。item.Name代表页码数字，item.Link是该页码对应的链接，而item.IsCurrent则是一个布尔值，用于判断当前页是否被选中。

巧妙利用forloop.Counter进行奇偶判断

要实现根据页码奇偶性来添加样式，我们首先需要知道当前循环是第几次迭代。AnQiCMS的模板引擎（类似于Django语法）在for循环中提供了一个非常实用的内置变量：forloop.Counter。

forloop.Counter会记录当前for循环的执行次数，它从1开始递增。这意味着，当forloop.Counter的值为1, 3, 5...时，我们知道这是奇数页码的链接（从我们想要改变样式的“中间页码数组”中的第一个链接开始算起）；当其值为2, 4, 6...时，则为偶数页码的链接。

有了这个计数器，我们就可以运用数学中的模运算（取余数）来判断奇偶性。一个数除以2，如果余数是1，那么它是奇数；如果余数是0，那么它是偶数。

  • forloop.Counter % 2 == 1：表示当前是奇数次循环。
  • forloop.Counter % 2 == 0：表示当前是偶数次循环。

整合奇偶判断，为分页链接添加样式

现在，让我们把奇偶判断逻辑无缝地整合到分页链接的循环中。我们可以在循环体内部使用if-else条件判断，根据forloop.Counter的奇偶性，为每个分页链接动态地添加不同的CSS类。

让我们看一个完整的示例：

<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>

在这段代码中，我们引入了一个名为classNames的临时变量，并通过add过滤器（请参考AnQiCMS的filter-add.md文档）动态地拼接CSS类。|trim过滤器（参考filter-trim.md）用于清除拼接过程中可能产生的多余空格，确保HTML结构干净整洁。

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

当然，仅仅添加了CSS类还不够，我们还需要在您的网站样式表（通常是位于/public/static/css/目录下的CSS文件）中定义这些类，才能看到实际效果。

您可以这样定义一些基础样式：

”`css /* pagination容器基础样式 */ .pagination ul {

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

}

/* 所有页码项的基础样式 */ .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;

}

/* 当前活动页的样式 */ .pagination .page-item.active a {

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

}

/* 奇数页的特殊样式 */ .pagination .page-item.odd-page a {

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

}

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

background-color: #bae7ff;

}

/* 偶数页的特殊样式 */ .pagination .page-item.even-page a {

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

}

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

background-color: #d9f7be;

}