How to correctly display pagination navigation for articles or category lists?

When managing website content, whether it is an article list, product display, or other category pages, a clear and effective pagination navigation is crucial for improving user experience and search engine optimization.AnQiCMS (AnQiCMS) provides powerful template tag features, allowing us to easily add correct pagination navigation to list pages.This article will introduce how to implement this feature in AnQi CMS.

Understanding the pagination mechanism in AnqiCMS

AnQi CMS handles content display and pagination through a set of intuitive template tags. The core lies in the coordination of two tags: content list tags (such asarchiveListortagDataList)is responsible for querying and preparing the data needed for pagination, whilepaginationtags are responsible for generating the specific pagination navigation links.

In order for the content list to be paginated, it is first necessary to usearchiveListortagDataListWhen labeling, be explicit about itstypeattribute as"page". For example, when you want to display 10 articles per page on an article list page and provide pagination,archiveListthe usage of the tag will be like this:

{% archiveList archives with type="page" limit="10" %}
    {# 循环显示文章内容 #}
    {% for item in archives %}
        <li><a href="{{item.Link}}">{{item.Title}}</a></li>
    {% endfor %}
{% endarchiveList %}

here,archivesIt will include the article data of the current page, andlimit="10"which defines the number of articles displayed per page. Whentypeis set to"page"after, AnqiCMS will automatically identify the page number parameter of the current page and providearchiveListAfter the call, the context provides a namedpagespagination object.

Building pagination navigation:paginationThe application of tags

paginationTag is specifically used for generating pagination navigation. It needs to receive a list of content tags (such asarchiveListortagDataList) provided by thepagesobject. thispagesThe object contains all information related to pagination, such as the total number of items, the total number of pages, the current page number, the link to the first page, the previous page, the next page, and the list of middle page numbers, etc.

typicalpaginationLabel usage as follows:

{% pagination pages with show="5" %}
    {# 分页导航的具体HTML结构 #}
{% endpagination %}

HerepagesIsarchiveListIn (or other list label) attype="page"Pagination data provided in mode.show="5"It is an optional parameter that indicates the pagination navigation can display up to 5 middle page number buttons, which helps to maintain the simplicity of navigation and avoid the page from looking crowded when there are too many page numbers.

InpaginationWithin the tag, we can utilizepagesThe various properties of the object to build a complete navigation structure:

• pages.TotalItems: Total number of items.
• pages.TotalPages: Total number of pages.
• pages.CurrentPage: Current page number.
• pages.FirstPage: Home object, includingName(such as "Home" or "1") andLink.
• pages.PrevPage: Previous page object, provided only when there is a previous page, includingName(such as "Previous page") andLink.
• pages.NextPage: Next page object, provided only when there is a next page, containingName(such as “Next page”) andLink.
• pages.LastPage: End page object, containingName(such as “last page” or the page number of the last page) andLink.
• pages.Pages: An array that contains a list of middle page numbers, each element is apageItemObject.

EachpageItemobject (for examplepages.PagesEach in the arrayitem) all containName(Page number),Link(The URL of the corresponding page) andIsCurrent(A boolean value indicating whether it is the current page, which can be used to add highlight styles).

Combine an example: Add pagination navigation to the article list

Now, let's takearchiveListandpaginationTags together to create a complete pagination navigation for the article list page.

<div class="article-list-section">
    {% archiveList articles with type="page" limit="10" %}
        {% for item in articles %}
            <div class="article-item">
                <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
                <p>{{item.Description}}</p>
                <div class="meta-info">
                    <span>{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                    <span>{{item.Views}} 阅读</span>
                </div>
            </div>
        {% empty %}
            <p>目前没有找到任何文章。</p>
        {% endfor %}

        <div class="pagination-nav">
            {% pagination pages with show="5" %}
                <ul class="pagination-list">
                    {% if pages.FirstPage %} {# 确保首页存在 #}
                        <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                            <a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
                        </li>
                    {% endif %}

                    {% if pages.PrevPage %} {# 确保上一页存在 #}
                        <li class="page-item">
                            <a href="{{pages.PrevPage.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}}">{{pageItem.Name}}</a>
                        </li>
                    {% endfor %}

                    {% if pages.NextPage %} {# 确保下一页存在 #}
                        <li class="page-item">
                            <a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
                        </li>
                    {% endif %}

                    {% if pages.LastPage %} {# 确保末页存在 #}
                        <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
                            <a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
                        </li>
                    {% endif %}
                </ul>
                <p class="pagination-summary">共 {{pages.TotalItems}} 条，{{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页</p>
            {% endpagination %}
        </div>
    {% endarchiveList %}
</div>

This code first usesarchiveListTags in pagination mode (type="page") Get the list of articles and set 10 articles per page. Next, inarchiveListlabel'sendarchiveListbefore, we embeddedpaginationtag, using thepagesobject to render pagination navigation. By judgingFirstPage,PrevPage,NextPage,LastPageDoes it exist andpageItem.IsCurrentProperty, we can flexibly control the display and style of the pagination button.

Add pagination to the category list or tag list

Whether it is a category list page (displaying articles under a certain category) or a tag list page (displaying articles with a certain tag), the pagination logic is exactly the same as that of the above article list.

1. Category list page:In the category template file, you will still usearchiveListtags, and automatically obtain them based on the current category contextcategoryId, then settype="page"andlimit.

   {# 假设这是分类的list.html模板 #}
   {% archiveList category_articles with type="page" limit="10" %}
       {# ... 显示文章内容 ... #}
       <div class="pagination-nav">
           {% pagination pages with show="5" %}
               {# ... 分页HTML结构，与上方示例相同 ... #}
           {% endpagination %}
       </div>
   {% endarchiveList %}
   

2. Tags list page:In the template file of the tag (usuallytag/list.htmlortag/index.html), you need to usetagDataListtag, set as welltype="page"andlimit.

   {# 假设这是tag/list.html模板 #}
   {% tagDataList tagged_articles with type="page" limit="10" %}
       {# ... 显示带有该标签的文章内容 ... #}
       <div class="pagination-nav">
           {% pagination pages with show="5" %}
               {# ... 分页HTML结构，与上方示例相同 ... #}
           {% endpagination %}
       </div>
   {% endtagDataList %}
   

By using the above method, whether it is an article list, category list, or tag list, you can easily add a feature-rich, flexible style pagination navigation to them. Remember, the key is to use the list tags correctly.type="page"Attribute, and combinepaginationTag to render pagination links.

Frequently Asked Questions (FAQ)

Q1: Why doesn't my article list page display pagination navigation or pagination links? A1:Please check your content list tags (such asarchiveListortagDataList) whether they are set correctlytype="page"property. Only by specifyingtypeclearly as"page", Anq CMS will generate pagination data for the list and provide it topaginationLabel usage. If this attribute is missing, the system will treat it as a regular list and will not generate pagination data.

Q2: How to adjust the number of page navigation buttons displayed, for example, I only want to show 2 page numbers before and after the current page? A2:You can accesspaginationlabel'sshowproperty to control the number of page buttons displayed. For example,{% pagination pages with show="5" %}It will display up to 5 middle page number buttons (excluding the first page, last page, previous page, next page). You can adjust this number according to your design requirements.

Q3: How does the pagination link URL format look strange, or how can I customize the display of the URL? A3:The pagination URL of AnQi CMS usually follows the pseudo-static rules set in your backend. If the URL looks unexpected, you should first check the backend's 'Function Management' -> 'Pseudo-static Rules' settings to ensure that the list page (such asarchiveortagThe URL format is correct for the rule. For more advanced URL customization requirements,paginationTags provide aprefixparameter, allows you to redefine the pagination URL pattern. But please note,prefixis a high-level feature that needs to include{page}Is a placeholder, and incorrect settings may cause the page to be inaccessible. It is recommended to modify it after familiarizing yourself with the system's pseudo-static mechanism.