With the increasing richness of website content today, how to effectively display a large number of articles while ensuring a smooth browsing experience is a problem that every website operator needs to consider.AnQiCMS provides a powerful and flexible article list pagination feature, which not only helps optimize the presentation of website content but also allows for better integration into the overall website design and enhances user interaction experience through custom styles and page number settings.
Next, we will delve into how to implement pagination for article lists in the Anqi CMS, and provide a detailed explanation of how to customize the style and number of page numbers of the pagination navigation according to your needs.
[en] One, implement the pagination display of article lists
In Anqi CMS, the core of displaying article lists in pagination is to use template tagsarchiveListto obtain the data and specify it as a pagination mode.
Firstly, you need to use it in the template file (usually the list page template, such as{模型table}/list.htmlor a custom list template)archiveListTags for retrieving article data. This tag is very flexible, and can be used to filter articles based on various conditions such as category ID, model ID, and recommendation attributes.
The key is toarchiveListSet tagstype="page"Parameters. Once this parameter is set, Anqi CMS will automatically handle the pagination logic of the current page according to your specificationslimitParameters (number of articles displayed per page) are used to return the article data for the current page.
For example, if you want to display 10 articles per page under the current category, you can write the code like this:
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<div class="article-item">
<a href="{{item.Link}}">
<h4>{{item.Title}}</h4>
<p>{{item.Description}}</p>
<div class="meta">
<span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
<span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>阅读量：{{item.Views}}</span>
</div>
</a>
{% if item.Thumb %}
<a href="{{item.Link}}">
<img src="{{item.Thumb}}" alt="{{item.Title}}">
</a>
{% endif %}
</div>
{% empty %}
<p>抱歉，当前分类暂无文章。</p>
{% endfor %}
{% endarchiveList %}
In this code block:
archiveList archives with type="page" limit="10"Retrieves the 10 articles corresponding to the current page number and stores the results.archivesthe variable.{% for item in archives %}Loops through these articles,itemThe variable contains the details of each article, such as the title (item.Title) and the link (item.Link) and the description (item.Description) etc.{% empty %}Blocks are used to display a friendly prompt when there is no article data, to avoid the page from being blank.
By this method, you have successfully enabled pagination for the article list. Next, we need to provide users with a tool to navigate to different page numbers.
II. Render pagination navigation
The article list data needs to be prepared and then usedpaginationtags to generate and display pagination navigation.paginationTags are usually followed byarchiveListtags after, it will use according toarchiveListThe provided pagination information, automatically generates page number links and navigation buttons.
paginationTags will organize the pagination data into apagesThis object contains various useful information about the current pagination state, such as the total number of articles, total number of pages, current page number, home link, previous page link, next page link, last page link, and an array containing all visible page numbers.
A basic pagination navigation implementation might look like this:
<div class="pagination-container">
{% pagination pages with show="5" %}
<ul>
{# 首页按钮 #}
<li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
<a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
</li>
{# 上一页按钮 #}
{% if pages.PrevPage %}
<li class="page-item">
<a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
</li>
{% endif %}
{# 中间页码列表 #}
{% for item in pages.Pages %}
<li class="page-item {% if item.IsCurrent %}active{% endif %}">
<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 %}
{# 尾页按钮 #}
<li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
<a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
</li>
</ul>
<p>总共有 {{pages.TotalItems}} 篇文章，分为 {{pages.TotalPages}} 页，当前在第 {{pages.CurrentPage}} 页。</p>
{% endpagination %}
</div>
In this code block:
{% pagination pages with show="5" %}Tell the system to generate pagination navigation and store the pagination data inpagesthe variable.show="5"Parameters play a crucial role here, indicating that in the list of page numbers, except for the first page, last page, previous page, and next page buttons, only a maximum of 5 middle page numbers are displayed (for example, when there are many total pages)1...3 4 5 6 7...100).pages.FirstPage/pages.PrevPage/pages.NextPage/pages.LastPageEach represents objects for home page, previous page, next page, and last page, respectively, and theirLinkproperties provide the corresponding links,Nameproperties provide the button text.pages.Pagesis an array that includes the middle page items.{% for item in pages.Pages %}Loop through,item.LinkProvide page link,item.NameProvide page numbers.item.IsCurrentorpages.FirstPage.IsCurrentBoolean values can determine whether the current page number is the page being viewed, which is crucial for highlighting the current page number.
Three, customize the style and number of page numbers for pagination navigation.
The pagination tag of AnQi CMS provides enough flexibility, allowing you to achieve fully customized styles by controlling tag parameters and pairing with CSS.
1. Custom page number count:As mentioned earlier,paginationTagsshowThe parameter directly controls the number of middle page buttons.
show="5"Maximum display of 5 middle page numbers.show="7"Maximum of 7 middle page numbers displayed. You can adjust this value based on the width of the page layout, user habits, and other factors to achieve the best display effect. If omitted,showParameters, the system will have a default value, but for precise control, it is recommended to set it explicitly.
2. Custom pagination navigation style:You can fully control the visual presentation of pagination navigation by adding custom CSS classes to the HTML structure.
In the above example, we usedpagination-container/page-itemandactiveClass names. You can write style rules for these classes in your CSS file, for example:
/* pagination-container 整体布局 */
.pagination-container {
margin-top: 30px;
text-align: center;
}
.pagination-container ul {
list-style: none;
padding: 0;
display: inline-flex; /* 使页码水平排列 */
margin: 0;
}
/* page-item 单个页码或按钮 */
.page-item {
margin: 0 5px; /* 页码间距 */
}
.page-item a {
display: block;
padding: 8px 12px;
border: 1px solid #ddd;
color: #333;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.page-item a:hover {
background-color: #f5f5f5;
color: #007bff;
border-color: #007bff;
}
/* active 当前页高亮 */
.page-item.active a {
background-color: #007bff;
color: white;
border-color: #007bff;
pointer-events: none; /* 禁用当前页的点击事件 */
}
/* 隐藏不必要的文字（如首页/尾页按钮的默认文本在某些设计中可能不显示） */
.page-item:first-child a,
.page-item:last-child a {
font-weight: bold;
}
By modifying these CSS rules, you can change the background color, text color, border, rounded corners, size, and even add animation effects to the pagination buttons, making them perfectly match the design style of your website.
Four: Advanced Techniques and Precautions
- Pagination of search results:
archiveListTagsqParameter intype="page"This applies in the mode as well. This means that if you use this tag on the search results page, it will automatically recognize the search keywords in the URLqand