如何在`for`循环中，根据页码的奇偶性为分页链接添加不同样式？
作为一位资深的网站运营专家，我深知一个富有吸引力且用户友好的网站，其魅力往往蕴藏在细微之处。在安企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;
}