As an experienced website operations expert, I know that the charm of an attractive and user-friendly website often lies in the details.In an AnQiCMS (AnQiCMS) such a content management system based on Go language, powerful and flexible in templates, even simple pagination navigation, we can make it come alive with clever design, providing users with a more intuitive and pleasant browsing experience.
Today, let's explore a practical and interesting technique: how to use AnQiCMS'sforIn the loop, add different styles to pagination links based on the parity of the page number.This can make your pagination navigation more visually hierarchical, and can also help users identify and locate the page faster in some scenarios.
AnQiCMS pagination tag: the cornerstone of navigation building
In AnQiCMS template design, the pagination function is built-in,paginationThe tag is implemented. It will automatically generate a complete set of pagination data based on the context of the current list, including the total number of pages, the current page, the first page, the last page, the previous page, the next page, and the list of page numbers displayed in the middle.We usually use it like this:
{% 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 block,pages.PagesIt is an array that contains all the page number objects displayed in the middle.item.Namerepresenting the page number,item.LinkThis is the link corresponding to the page number, whileitem.IsCurrentIt is a boolean value used to determine whether the current page is selected.
Smart useforloop.CounterPerform odd/even judgment
To implement the addition of styles based on the parity of the page number, we first need to know which iteration the current loop is. The AnQiCMS template engine (similar to Django syntax) is inforA very practical built-in variable is provided in the loop:forloop.Counter.
forloop.CounterIt records the currentforThe number of times the loop executes, it starts from1and incrementing. This means that whenforloop.CounterThe value is1, 3, 5...When we know it is a link of an odd page number (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...The link is even-numbered page when
With this counter, we can use modular arithmetic (remainder) in mathematics to determine the parity.A number divided by 2, if the remainder is 1, then it is an odd number;If the remainder is 0, then it is even.
forloop.Counter % 2 == 1: indicates the current is an odd number of loops.forloop.Counter % 2 == 0: indicates the current is an even number of loops.
Integrating odd-even judgment, add style to pagination links.
Now, let's seamlessly integrate the odd-even judgment logic into the pagination link loop. 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 code, we introduce a namedclassNamesa temporary variable, and throughaddfilter (refer to AnQiCMS'sfilter-add.mddocument) dynamically concatenate CSS classes.|trimFilter (referencefilter-trim.md) used to clear extra spaces generated during concatenation, ensuring a clean and tidy HTML structure.
Give them life: define CSS styles.
Of course, simply adding a CSS class is not enough, we still need to place your website's stylesheet (usually located in/public/static/css/CSS files defined in the directory must be seen for the actual effect to be visible.
You can define some basic styles this way:.
”`css /* pagination container base styles */ .pagination ul {
list-style: none;
padding: 0;
margin: 20px 0;
display: flex;
justify-content: center;
gap: 5px; /* 页码之间的间距 */
}
/* All pagination 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;
}
/* 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;
}
/* Special style for even pages */ .pagination .page-item.even-page a {
background-color: #f6ffed; /* 浅绿色背景 */
color: #52c41a;
border-color: #b7eb8f;
}
.pagination .page-item.even-page a:hover {
background-color: #d9f7be;
}