The template system of Anqi CMS provides us with two core tags, which are the foundation for implementing article list pagination:archiveList(used to obtain article data) andpagination(Used for generating pagination navigation). Next, we will delve into how to elegantly implement pagination on your website using these two tags.
一、Understanding the acquisition of article list data:archiveListtags
archiveListTags are the main tools used in AQS CMS to query and display article lists. To implement pagination, we need to pay special attention to several of its parameters:
type="page"This is the key command for implementing pagination. When you puttypeparameter settings"page"whenarchiveListThe label will automatically enable pagination mode and pass the current page's pagination information (such as the current page number, total number of pages, etc.) to the template context.paginationUse the label.limitThis parameter is used to control the number of articles displayed per page. For example,limit="10"it means that 10 articles will be displayed per page.moduleIdandcategoryId：If you want to get specific content models (such as "article model" or "product model") or articles under a specific category, you can use these two parameters for filtering.q(Search keyword)If your article list needs to support keyword search functionality, and the search results also need to be paginated,archiveList标签会自动处理URL中的qthe search results can be displayed in pages.
By combining these parameters,archiveListCan flexibly obtain the article data you need to display. For example, to get a list of article models, displaying 10 articles per page with pagination support, you can write it like this:
{% archiveList archives with moduleId="1" type="page" limit="10" %}
{% for item in archives %}
<li>
<a href="{{item.Link}}">
<h5>{{item.Title}}</h5>
<div>{{item.Description}}</div>
<div>
<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 alt="{{item.Title}}" src="{{item.Thumb}}">
</a>
{% endif %}
</li>
{% empty %}
<li>
当前分类下暂无文章。
</li>
{% endfor %}
{% endarchiveList %}
In the above code, we usearchiveListGot the article data, andforto iteratearchivesvariable to display the title, description, category, publish date, view count, and thumbnail of each article.{% empty %}The block handles the case where the list is empty.
Second, build pagination navigation:paginationtags
InarchiveListTag enabledtype="page"After that, the page context will automatically include apagesObject, this object contains all the information related to pagination.paginationThe role of the tag is to use thispagesObject, generating a complete and interactive pagination navigation.
paginationThe core parameter of the tag isshowIt is used to control how many adjacent page number buttons are displayed in the middle area of the pagination navigation, in addition to "Homeshow="5"It will display 2 pages on both sides of the current page, totaling 5 page numbers.
The followingpaginationcommon structure of tags andpageskey properties included in the object:
pages.TotalItems: Total number of articles.pages.TotalPages: Total number of pages.pages.CurrentPage：Current page number.pages.FirstPage: Home page information (includingNameandLinkproperties, as well asIsCurrentwhether it is the current page).pages.PrevPage：Previous page information (including)Name/Link/IsCurrent).pages.NextPage：Next page information.pages.LastPage：End page information.pages.Pages：An array containing the page number buttons of the middle part, each element hasName/Link/IsCurrentproperties.
You can go throughpages.Pagesthe array, and combine it withifstatement to judgeIsCurrentHighlight the current page to build a complete pagination navigation.
{# 分页代码 #}
<div class="pagination-container">
{% pagination pages with show="5" %}
<ul class="pagination">
{# 首页按钮 #}
<li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
<a class="page-link" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
</li>
{# 上一页按钮 #}
{% if pages.PrevPage %}
<li class="page-item">
<a class="page-link" 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 class="page-link" href="{{item.Link}}">{{item.Name}}</a>
</li>
{% endfor %}
{# 下一页按钮 #}
{% if pages.NextPage %}
<li class="page-item">
<a class="page-link" href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
</li>
{% endif %}
{# 末页按钮 #}
<li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
<a class="page-link" href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
</li>
</ul>
{% endpagination %}
</div>
In this pagination code block, we first use{% pagination pages with show="5" %}to initialize pagination data. Then, based onpagesObject properties are built one by one to create "Home{% if item.IsCurrent %}determine the current page and addactiveClass, so that it can be highlighted through CSS.
Three, Integration: A Complete Pagination Column Example
toarchiveListandpaginationTags combined, usually placed on the article list page template (for examplearchive/list.htmlorcategory/list.html), and dynamic article pagination functionality can be realized.
`twig <!DOCTYPE html>
<meta charset="UTF-8">
<title>{% tdk with name="Title" siteName=true %}</title>
<style>
.article-list { list-style: none; padding: 0; }
.article-list li { margin-bottom: 15px