As an experienced website operations expert, I am well aware of the crucial role that a powerful and easy-to-use content management system plays in the success of a website.The AnQiCMS (AnQiCMS) provides an excellent experience in content publishing and management with its high-performance architecture based on the Go language and flexible template mechanism.Among them, effectively displaying a large amount of content, especially implementing the pagination function of article lists, is an indispensable part of improving user experience and website SEO performance.Today, let's delve deeply into how AnQi CMS ingeniously implements this feature and show the friendly page navigation.
In-depth analysis of pagination and page number display in article lists of AnQi CMS
Today, with the explosive growth of content, if a website only piles all articles on one page, it not only causes slow page loading but also greatly reduces the efficiency of users in finding information, and even affects the crawling and indexing by search engines.Therefore, dividing the article list into pages and providing clear page navigation has become the standard configuration for modern website operations.The autoCMS fully considers this requirement, making content pagination easy with its intuitive template tags.
一、 Article List Pagination Magic:archiveListtags
One of the core capabilities of AnQi CMS is its flexible and efficient content management.When your website content becomes increasingly rich, especially when the number of articles reaches a certain scale, how to elegantly display these contents 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 article list pagination in AnQiCMS is:archiveListLabel. This label is specifically used to retrieve document lists (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 turntypeparameter settings"page"whenarchiveListthe tags will return article data in a paginated form, rather than returning all matching articles at once.limit：This parameter determines the number of articles displayed per page. For example,limit="10"it means that 10 articles will be displayed per page.
PassarchiveListtags, you can filter articles based on various conditions, such as by model ID (moduleId), category ID (categoryId), recommended attributes (flag）etc., combined withtype="page"andlimitparameters, you can easily get the list of articles to be displayed on the current page.
Here is aarchiveListlabel combined withtype="page"simplified example of usage:
{% 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 data of 10 articles on the current page, throughforThe content within the tag will be displayed, providing a friendly prompt.{% empty %}The content within the tag will be displayed, providing a friendly prompt.
二、 English Page Control:paginationtags
Just having a list of article content is not enough, users also need clear navigation controls to jump to different pages. At this time,paginationthe pagination tags come into play. It is witharchiveListLabel close collaboration, according toarchiveListGenerated pagination data, intelligently constructs page navigation links.
paginationLabel very concise, mainly through ashowParameter to control the number of page displays. For example,show="5"Indicates that up to 5 consecutive page numbers can be displayed (e.g., "1 2 3 4 5" or "3 4 5 6 7").
paginationA label will providepagesThe object, this object contains rich pagination information, such as:
TotalItemsTotal number of articles.TotalPagesTotal number of pages.CurrentPageCurrent page number.FirstPageThe object of the homepage, containing:Name(如 “首页”) 和Link(Home link)LastPage：End object, includingName(such as “End”) andLink(End link).PrevPage：Previous page object, includingName(such as “Previous”) andLink(Previous page link).NextPage: The next page object, includingName(such as “Next page”) andLink(Next page link).PagesAn array containing intermediate page numbers (such as 1, 2, 3…), each element is also an object, containingName(page number),Link(page link),IsCurrent(whether the current page).
Using this information, you can build various styles and layouts of page navigation.
Part three: Integrating both into a complete example
Now, we willarchiveListandpaginationThese two tags combined, show 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" %}It will fetch the current page's 10 articles from the database and assign them toarticlesa variable. - Loop through the articles and display:
{% for item in articles %}to iteratearticlesvariable, displaying the title, link, and thumbnail of each article