As an expert who deeply understands the operation of AnQiCMS, I know that a smooth, user-friendly website experience is crucial for attracting and retaining users.The pagination feature of the content list is the cornerstone of any content-rich website, not only optimizing the user browsing experience, but also an important link in search engine optimization.In AnQiCMS, achieving complete pagination functionality for article lists is efficient and flexible through its powerful template tag system.
Overview of article list pagination functionality
In AnQiCMS template, the complete pagination function for the article list mainly relies on the collaborative work of two core template tags:archiveListUsed to retrieve article data from the database and divide it by pages;paginationIt is responsible for generating and displaying page navigation links, guiding users to switch between different pages.Understanding the usage of these tags and the data passing mechanism between them is the key to building an efficient pagination list.
The introduction of pagination divides long articles into manageable multiple pages.This significantly improves page loading speed, because the browser does not need to load all article data at once.At the same time, it also improves the user experience, allowing users to easily find the content they are interested in, and avoids endless scrolling.For search engine optimization, a clear pagination structure helps the crawler better index the website content, avoid duplicate content, and ensure that the content of each page can be discovered and included.
Retrieve article data:archiveListApplication of tags
Firstly, we need to usearchiveListUse tags to retrieve article data. To implement pagination, this tag must be configuredtype="page"This parameter tells the AnQiCMS system that the article data we want to retrieve is prepared for pagination. The system will automatically handle the current page number and total number of pages, etc.
In the template,archiveListtags usually define a variable name to store the list of queried articles. For example, we can name itarchives.limitThe parameter is used to specify the number of articles displayed per page, which is a key factor in controlling the granularity of pagination. In addition, we can also use parameters such as to filter articles under specific models or categories, or usemoduleIdandcategoryIdto filter specific models or categories under certain parameters, or useorderParameters to define the sorting method of the article (e.g., sorted by publish time in reverseid descor by view countviews desc).
A basicarchiveListUsage is as follows, it will retrieve data of 10 articles per page under the specified category:
{% archiveList archives with type="page" categoryId="1" limit="10" order="id desc" %}
{# 循环显示当前页的文章列表 #}
{% for item in archives %}
<li>
<a href="{{item.Link}}">
<h5>{{item.Title}}</h5>
<p>{{item.Description}}</p>
<span>发布时间：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>阅读量：{{item.Views}}</span>
</a>
</li>
{% empty %}
<li>暂无相关文章。</li>
{% endfor %}
{% endarchiveList %}
In the above code,archivesThe variable contains all the article data on the current page. Throughforthe loop, we can traverse and display the titles, links, summaries, and other information of these articles.emptyBlocks are used to display friendly prompt information when there is no article.
Generate pagination navigation:paginationThe implementation of tags
InarchiveListAfter the tag, we need to introducepaginationtags to generate pagination navigation.paginationTags will automatically utilizearchiveListThe generated pagination data to build page link. It will also define a variable name, usually ofpages，used to store all detailed information related to pagination, such as total number of pages, current page, first page, previous page, next page, and last page links, etc.
paginationAn important parameter of the tag isshowIt determines how many page number buttons are displayed in the page number list. For example,show="5"This will display up to 5 page numbers near the current page, which helps to keep the pagination navigation concise, especially when there are a large number of articles.
Below ispaginationTypical application examples of tags and their internal structures:
<div class="pagination">
{% pagination pages with show="5" %}
<ul>
<li>总数：{{pages.TotalItems}}条，总共：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>
<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>
{% endpagination %}
</div>
In this structure,pagesThe variable provides everything needed to build complete pagination navigation.pages.FirstPage/pages.PrevPage/pages.Pages(an array containing the middle page numbers),pages.NextPageandpages.LastPageeach providing the corresponding page number name (Name) and the link (Link) and whether it is the current page (IsCurrentThe boolean value allows us to flexibly render pagination styles and interactions as needed.
Integrate article list with pagination function
To implement the complete pagination feature of the article list in AnQiCMS template, we willarchiveListandpaginationThe label is integrated into a template file. This template file is usually a list page template for a category, such asarticle/list.htmlorproduct/list.htmlThis depends on the structure you define in the background content model and category settings.
The following is a complete example showing how to implement a paginated article list for an article category with ID 1 in the AnQiCMS template.
{# 假设这是 article/list.html 模板文件 #}
{# 获取页面的TDK信息 #}
<title>{% tdk with name="Title" siteName=true %}</title>
<meta name="keywords" content="{% tdk with name="Keywords" %}">
<meta name="description" content="{% tdk with name="Description" %}">
{# 面包屑导航 #}
<div class="breadcrumb">
{% breadcrumb crumbs with index="首页" title=true %}
<ul>
{% for item in crumbs %}
<li><a href="{{item.Link}}">{{item.Name}}</a></li>
{% endfor %}
</ul>
{% endbreadcrumb %}
</div>
<h1>{{ category.Title }}</h1> {# 显示当前分类标题，假设有 category 变量 #}
<div class="article-list-container">
{# 使用 archiveList 标签获取文章列表，并启用分页模式 #}
{% archiveList archives with type="page" categoryId="1" limit="10" order="id desc" %}
<ul class="article-items">
{% for item in archives %}
<li class="article-item">
<a href="{{item.Link}}" title="{{item.Title}}">
<div class="article-thumb">
{% if item.Thumb %}
<img src="{{item.Thumb}}" alt="{{item.Title}}">
{% else %}
<img src="/public/static/images/default-thumb.jpg" alt="默认缩略图">
{% endif %}
</div>
<div class="article-info">
<h2 class="article-title">{{item.Title}}</h2>
<p class="article-description">{{item.Description}}</p>
<div class="article-meta">
<span>发布日期: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>阅读量: {{item.Views}}</span>
</div>
</div>
</a>
</li>
{% empty %}
<li class="no-content">当前分类下暂无文章。</li>
{% endfor %}
</ul>
{# 在文章列表下方显示分页导航 #}
<div class="pagination-controls">
{% pagination pages with show="5" %}
<ul class="pagination-list">
<li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
<a href="{{pages.FirstPage.Link}}" class="page-link">{{pages.FirstPage.Name}}</a>
</li>
{% if pages.PrevPage %}
<li class="page-item">
<a href="{{pages.PrevPage.Link}}" class="page-link">{{pages.PrevPage.Name}}</a>
</li>
{% endif %}
{% for pageItem in pages.Pages %}
<li class="page-item {% if pageItem.IsCurrent %}active{% endif %}">
<a href="{{pageItem.Link}}" class="page-link">{{pageItem.Name}}</a>
</li>
{% endfor %}
{% if pages.NextPage %}
<li class="page-item">
<a href="{{pages.NextPage.Link}}" class="page-link">{{pages.NextPage.Name}}</a>
</li>
{% endif %}
<li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
<a href="{{pages.LastPage.Link}}" class="page-link">{{pages.LastPage.Name}}</a>
</li>
</ul>
<div class="pagination-summary">
共 {{pages.TotalItems}} 篇文章，{{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页
</div>
{% endpagination %}
</div>
{% endarchiveList %}
</div>
This code first utilizes:archiveListRetrieve the articles of the current page, thenfordisplay them in a loop. Next,paginationtags are used to render pagination links. ThroughpagesVariables' various properties, we can precisely control the display of the home page, previous page, specific page number, next page, and last page, and highlight the current page according toIsCurrentattribute additionactivethe class.
When the user visits this page, AnQiCMS will automatically handle based on the page number parameter in the URLarchiveListandpaginationLabels, displaying the corresponding page number of the article and the updated pagination navigation. This design of separating content acquisition and pagination rendering makes the template logic clear and maintenance convenient.
The storage location of template files
According to AnQiCMS template conventions, the template files for list pages are usually stored in/template/{您的模板目录名}/{模型table}/list.html. For example, if your article model is namedarticle, and the template directory isdefault, then the file should be nameddefault/article/list.html. Moreover, AnQiCMS also supports customizing templates according to category ID, for example,default/article/list-{分类ID}.html, to achieve more refined page design.
Through the above steps and examples, you should be able to easily implement the complete pagination feature of the AnQiCMS template, thereby providing a more professional, efficient, and user-friendly website experience.
Common Questions and Answers (FAQ)
1. Why does my article list show articles but the pagination navigation does not?This usually happens becausearchiveListTagstypethe parameters are not set correctly"page"Only whenarchiveListoftyperesponse for"page"when, AnQiCMS system will generate the necessary pagination datapaginationtags. Please check yourarchiveListtags, make sure it includestype="page"Parameter.
2. How to set different number of items per page for different article categories?You can do this by setting it separately in each category corresponding toarchiveListtagslimitThe value of the parameter to be implemented. For example, in a category list template, you can setlimit="5", and in another category list template, you can setlimit="20"If you want to use a completely different template for a category, you can also specify a custom category template in the category settings in the background.
3. How is the URL structure of pagination links generated? Do I need to manually modify the pseudo-static rules?AnQiCMS's pagination link URL structure is automatically generated, and it conforms to the pseudo-static rules you have configured in the background (such as/{module}-{id}.htmlor/{module}-{filename}(-{page})consistent with EnglishIn most cases, you do not need to manually modify the pseudo-static rules to adapt to the pagination function.If the pseudo-static rules are configured correctly, pagination links will be automatically generated with friendly URLs containing page number parameters.{page}parameters, to ensure the pagination function works normally.