In AnQiCMS, optimizing the pagination display of the content list is crucial for improving the user browsing experience.A well-designed and easy-to-use pagination system not only helps visitors efficiently find information but also improves the website's SEO performance.AnQiCMS provides intuitive and powerful template tags, allowing us to easily achieve these goals.

核心：Understanding AnQiCMS pagination mechanism

In AnQiCMS, the pagination display of content lists mainly revolves around two core template tags: content list tags (such asarchiveList/tagDataListorcommentList) and pagination tag (pagination).

First, you need to tell the content list label that you want it to return paginated data instead of loading all the content at once. This is done by setting in the content list labeltype="page"Parameters to implement, while usinglimitParameters to specify how many items are displayed per page. For example, if you want to display 10 articles per page in an article list, your code would be like this:

{% archiveList archives with type="page" limit="10" %}
    {# 这里是循环显示文章的代码 #}
{% endarchiveList %}

OncearchiveListlabels totype="page"Pattern runs, it will automatically wrap all the data needed for pagination in a variable namedpages(this ispaginationthe variable that the default tag will look for). ThispagesThe variable includes all information such as the current page number, total page number, first page, last page, previous page, next page, and the list of middle page numbers, and we will use it to build the pagination navigation next.

实操：构建基础分页样式

HencepagesVariables, we can usepagination标签来渲染分页导航了。这个标签非常智能，它会自动生成包含正确链接和状态（例如当前页）的页码列表。

Generally, you would add after the content list loop,paginationsuch as tags:

{% archiveList archives with type="page" limit="10" %}
    {# 循环显示文章内容 #}
    {% for item in archives %}
        <div class="article-item">
            <a href="{{item.Link}}">{{item.Title}}</a>
            <p>{{item.Description}}</p>
            <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
        </div>
    {% empty %}
        <p>当前分类下暂无文章。</p>
    {% endfor %}
{% endarchiveList %}

<div class="pagination-container">
    {% pagination pages with show="5" %}
        {# 首页链接 #}
        <a class="page-link {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">首页</a>
        {# 上一页链接 #}
        {% if pages.PrevPage %}
            <a class="page-link" href="{{pages.PrevPage.Link}}">上一页</a>
        {% endif %}
        {# 中间页码列表 #}
        {% for item in pages.Pages %}
            <a class="page-link {% if item.IsCurrent %}active{% endif %}" href="{{item.Link}}">{{item.Name}}</a>
        {% endfor %}
        {# 下一页链接 #}
        {% if pages.NextPage %}
            <a class="page-link" href="{{pages.NextPage.Link}}">下一页</a>
        {% endif %}
        {# 末页链接 #}
        <a class="page-link {% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">末页</a>
    {% endpagination %}
</div>

In this example, we passedshow="5"topaginationLabels, this means that in addition to the home page, the last page, the previous page, and the next page, it will display up to 5 page number links in the middle.pagesInside the objectFirstPage/PrevPage/Pages(This is an array, it needs to beforcycled)NextPageandLastPageThe child object, all of which containLink("link address"), andName(Display name, such as page number) properties. AndIsCurrentproperties can help us judge the current page, thus addingactiveShow the current page number with CSS classes, enhancing user experience.

Customization: Make pagination more attractive.

After the basic pagination is set up, we can further optimize its display style and features to make it more in line with the overall design of the website and the habits of users.

  1. Control the number of page numbers displayed：As mentioned aboveshow="5"，You can flexibly adjust this number according to your page layout and aesthetic needs. If you have a lot of content, you can increase it appropriatelyshowThe value allows users to see more page numbers at once; if the content is less or the page space is limited, this value can be reduced.

  2. Enhance the visual effectsThe visual style of pagination is the key to enhancing user experience.By adding a custom CSS class to pagination links, you can completely control their appearance.page-linkandactiveClasses. You can define CSS rules for these classes, such as adjusting font size, color, background, borders, spacing, etc., to keep the pagination navigation consistent with your website style. For example:

    .pagination-container {
    margin-top: 20px;
    text-align: center;
}
.page-link {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #337ab7;
    text-decoration: none;
    transition: background-color 0.3s ease;
}
.page-link:hover {
    background-color: #f5f5f5;
}
.page-link.active {
    background-color: #337ab7;
    color: white;
    border-color: #337ab7;
}

  3. Flexible URL structureAnQiCMS supports pseudo-static and 301 redirect management, which is very important for generating search engine friendly pagination URLs.By default, pagination links are automatically generated based on the pseudo-static rules set in your backend.paginationtags support anprefixParameters. However, under normal circumstances, the default pseudo-static rules of AnQiCMS can meet most needs, without manual adjustmentprefix. Keep the pagination URL concise and regular, which is very beneficial for SEO and user understanding.

  4. Use pagination in search results.: When building the search function of your website,archiveListTagsqThe parameter can receive search keywords. At this time,paginationThe tags will intelligently.qParameters are automatically included in the pagination link, ensuring that users are still based on the same search conditions when clicking the next page. This greatly simplifies the pagination implementation of the search results page.

Through these configurations and techniques, you can easily create a beautiful and practical pagination style for content lists in AnQiCMS, thus significantly enhancing the user experience of the website.

Common Questions (FAQ)

1. Why does my content list only display one page and the pagination navigation not appear?

This is usually because you did not specify the tag (such as)archiveListwhen calling the content list,typeparameter settings"page"，or not setlimitparameter to specify the number of items displayed per page. IftypeYes"list"(default), the system will try to retrieve all content at once instead of pagination. Please make sure yourarchiveListtags similar{% archiveList archives with type="page" limit="10" %}Set this way, and the actual content quantity has exceededlimitValue. To avoid displaying pagination navigation when there is only one page of content, you can wrappaginationLabel the external addition of a conditional judgment, for example{% if pages.TotalPages > 1 %} ... {% endif %}.

2. How to make the pagination link URL look simpler and more SEO-friendly?

AnQiCMS built-in powerful pseudo-static function.You can configure the URL structure of the website by going to the "Function Management" -> "URL Rewrite Rules" in the background.Choose a suitable pseudo-static mode for your website (such as 'numeric mode' or 'model naming mode'), AnQiCMS will automatically generate concise, staticized pagination links./list?page=2Changes to/list-2.html. Keep the URL concise and regular, which is very beneficial for search engine crawling and user memory.

3. On which types of content lists can I apply pagination?

In AnQiCMS, all tags used to generate content lists support pagination functionality. This includes:

  • Document List: ThrougharchiveListTags, which can implement pagination for the content list of articles, products, or other custom models.
  • List of documents under the tag: ThroughtagDataListLabels, when displaying articles or products under specific labels, pagination can also be performed.
  • Comment list: ThroughcommentListTags, when managing articles or product comments, also support pagination display. In these tags, as long as you settype="page"andlimitparameters, you can cooperate withpaginationTo implement pagination display using tags.