How to implement pagination and page number display for article lists in AnQi CMS?
As an experienced website operations expert, I am well aware of the crucial role of a powerful and easy-to-use content management system in the success of a website.AnQiCMS (AnQiCMS) boasts its high-performance architecture based on the Go language and flexible template mechanism, providing an excellent experience in content publishing and management.Among them, efficiently displaying a large amount of content, especially the implementation of pagination functions for article lists, is an indispensable factor in improving user experience and website SEO performance.Today, let's delve into how Anqi CMS cleverly implements this feature and demonstrate the friendly pagination navigation.
In-depth analysis of pagination and page number display in article lists of AnqiCMS
On the day of the explosive growth of content, if a website only stacks all articles on a single page, it will not only cause the page to load slowly, but will also greatly reduce the efficiency of users in finding information, and even affect the crawling and collection of search engines.Therefore, pagination of the article list and clear page navigation have become a standard of modern website operations.The AnQi CMS fully considers this requirement, making content pagination effortless through its intuitive template tags.
The pagination magic of the article list:archiveListTag
One of the core capabilities of AnQi CMS is its flexible and efficient content management.How to elegantly display the content of your website as it becomes increasingly rich, especially when the number of articles reaches a certain scale, while ensuring a good user experience, has become a problem that operators need to consider.The pagination feature has emerged, which can divide a large amount of content into several pages, allowing users to browse page by page and avoid the heavy load of a single page.
The core of implementing pagination for the article list in AnQiCMS lies inarchiveListLabel. This label is specifically used to retrieve a list of documents (i.e., articles or products). To enable pagination, you need to pay attention to two key parameters:
type="page"This is the 'switch' to enable pagination functionality. When you toggletypethe parameter to"page"then,archiveListthe tags will return article data in a paginated format, rather than returning all matching articles at once.limitThis parameter determines the number of articles displayed per page. For example,limit="10"it means that 10 articles will be displayed per page.
ByarchiveListtags, you can filter articles based on various conditions, such as by model ID (moduleId), classification ID (categoryId), recommended attributes(flag) etc., combined withtype="page"andlimitThe parameter allows you to easily obtain the list of articles to be displayed on the current page.
The following is anarchiveListLabel collaborationtype="page"A simplified example of use:
{% archiveList archives with 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 this example,archivesThe variable will contain the data of 10 articles on the current page, throughforLoop to traverse and display the title, abstract, category, publishing time, and viewing volume of each article. When there are no articles,{% empty %}the content within the tag will be displayed, providing a friendly prompt.
Two, Mastering Page Numbers:paginationTag
Just having a list of article content is not enough; users also need clear navigation controls to jump to different pages. At this point,paginationpagination tags come into play. It is witharchiveListLabels closely collaborate according toarchiveListGenerate pagination data, intelligently build page navigation links.
paginationLabels are very concise, mainly through ashowParameter to control the number of pages displayed. For example,show="5"Indicates that up to 5 consecutive page numbers can be displayed (such as “1 2 3 4 5” or “3 4 5 6 7”).
paginationThe tag will provide apagesObject, this object contains rich pagination information, such as:
TotalItemsTotal number of articles.TotalPages: Total number of pages.CurrentPage: The current page number.FirstPage: The object of the home page, containing:Name(such as “Home”) and:Link(Home link).LastPage: The object at the end, includingName(such as "end page") andLink(end page link).PrevPage: The object at the previous page, includingName(such as "Previous page") andLink(previous page link).NextPage: The object of the next page, containingName(such as “Next page”) andLink(Next page link).Pages: An array containing the middle page numbers (such as 1, 2, 3…), each element is also an object, containingName(Page number),Link(page link),IsCurrent(Is this the current page?).
Using this information, you can build various styles and layouts for page navigation.
3. Integrate both: Complete example.
Now, we willarchiveListandpaginationThese tags combined, demonstrate a complete and practical pagination code structure for an article list.
<div class="article-list-section">
{# 第一步：使用 archiveList 标签获取当前页的文章列表 #}
{% archiveList articles with type="page" limit="10" %}
<ul class="article-items">
{% for item in articles %}
<li class="article-item">
<a href="{{item.Link}}" class="article-link">
{% if item.Thumb %}
<div class="article-thumb">
<img alt="{{item.Title}}" src="{{item.Thumb}}">
</div>
{% endif %}
<div class="article-info">
<h5 class="article-title">{{item.Title}}</h5>
<p class="article-description">{{item.Description}}</p>
<div class="article-meta">
<span class="category-name">分类: {% categoryDetail with name="Title" id=item.CategoryId %}</span>
<span class="publish-date">发布: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span class="views-count">阅读: {{item.Views}}</span>
</div>
</div>
</a>
</li>
{% empty %}
<li class="no-articles-found">
很抱歉，当前分类或筛选条件下没有找到任何文章。
</li>
{% endfor %}
</ul>
{% endarchiveList %}
{# 第二步：使用 pagination 标签显示页码导航 #}
<div class="pagination-nav">
{% pagination pages with show="5" %}
<ul class="pagination-list">
{# 首页链接 #}
<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>
<div class="pagination-summary">
共计 {{pages.TotalItems}} 篇文章，{{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页
</div>
{% endpagination %}
</div>
</div>
Code analysis:
- Get article list:
{% archiveList articles with type="page" limit="10" %}Will retrieve 10 articles from the database and assign them toarticlesVariable. - Display the articles one by one:
{% for item in articles %}Loop througharticlesA variable, displaying the title, link, and thumbnail of each article