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.

Core: Understand the pagination mechanism of AnQiCMS

In AnQiCMS, the pagination display of content lists is mainly based on two core template tags: content list tags (such asarchiveList/tagDataListorcommentList）and pagination tags（pagination)

Firstly, you need to inform the content list tag that you want it to return paginated data instead of loading all content at once. This is done by setting in the content list tagtype="page"To implement, and use simultaneouslylimitSpecify how many items to display per page. For example, if you want to display 10 articles per page in a list of articles, your code would look like this:

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

OncearchiveListtags totype="page"The pattern runs, it will automatically wrap all the data required for pagination in a variable namedpages(this ispaginationthe variable that the tag will default to looking for). ThispagesThe variable contains all the information such as the current page number, total number of pages, 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.

Practice: Build Basic Pagination Style

NowpagesVariable, we can use itpaginationUse tags to render pagination navigation. This tag is very smart, it will automatically generate a list of page numbers with correct links and status (such as the current page).

Generally, you would add after looping through the content listpaginationas shown below:

{% 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"topaginationThis tag means that in addition to the home page, last page, previous page, and next page, it will display up to 5 page number links in the middle.pagesinside the objectFirstPage/PrevPage/Pages(This is an array that needs to beforlooped through)NextPageandLastPageEach sub-object includesLink(link address) andNameProperties such as page numbers displayed. WhileIsCurrentProperties can help us determine the current page, thereby addingactiveAdd CSS classes to highlight the current page number and enhance the user experience.

Customization: Make pagination more attractive.

After the basic pagination is set up, we can further optimize its display style and functionality to better fit the overall design of the website and user habits.

  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, allowing users to see more pages at once; if the content is less or the page space is limited, this value can be reduced.

  2. Enhance visual effectsThe visual style of pagination is the key to improving user experience. By adding custom CSS classes to pagination links, you can completely control their appearance.We used in the above example,page-linkandactiveYou can define the 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 structure：AnQiCMS 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.If a special requirement is encountered, the pattern of the pagination URL needs to be customized further,paginationLabels also support aprefixParameters. However, in most cases, the default pseudo-static rules of AnQiCMS can meet most needs without manual adjustmentprefixKeep the pagination URL concise and regular, which is greatly beneficial for SEO and user understanding.

  4. Use pagination in search results: When building the search function of a website,archiveListlabel'sqThe parameter can accept search keywords. At this time,paginationthe tag will intelligently directqParameters are automatically entered into the pagination link, ensuring that when the user clicks on the next page, they are still based on the same search criteria for filtering. This greatly simplifies the pagination implementation on the search results page.

By using these configurations and tricks, you can easily create a beautiful and practical pagination style for content lists in AnQiCMS, thereby significantly enhancing the website user experience.

Frequently Asked Questions (FAQ)

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

This is usually because you did not include the tag (such asarchiveList) when calling the content list.typethe parameter to"page"or not setlimitparameter to specify the number of items to display per page. IftypeIs"list"(default value), the system will try to retrieve all content at once instead of pagination. Make sure yourarchiveListtags similar{% archiveList archives with type="page" limit="10" %}This is set, and the actual content exceedslimitThe value. At the same time, to avoid displaying pagination navigation when there is only one page of content, you can wrappaginationAdd a conditional judgment outside the label, for example{% if pages.TotalPages > 1 %} ... {% endif %}.

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

AnQiCMS has built-in powerful URL rewriting capabilities. You can configure the website URL structure by going to the "Function Management" -> "URL Rewriting Rules" in the background.Choose a static URL mode suitable for your website (such as 'numeric mode' or 'model naming mode'), AnQiCMS will automatically generate concise, static pagination links.For example, from/list?page=2changes to/list-2.html. Keeping the URL concise and regular is very beneficial for search engine crawling and user memory.

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

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

  • Document List: PassarchiveListTags, can implement pagination for the content list of articles, products, or other custom models.
  • Document list under the tag: PasstagDataListTags, when displaying articles or products under specific tags, pagination can also be performed.
  • Comment List: PasscommentListTags, when managing articles or product comments, also support pagination display. In these tags, just settype="page"andlimitthe parameter, it can be配合paginationtags to achieve pagination display.