How to apply AnQiCMS pagination feature to the pagination display of article lists or Tag document lists?

In website content management, whether it is to display a large number of articles, products, or documents under categories, an efficient and user-friendly pagination feature is crucial.It not only allows users to easily browse a large amount of content, avoiding the slow loading caused by long pages, but also helps search engines better crawl and index website information.AnQiCMS (AnQiCMS) is well-versed in this, providing an intuitive and powerful pagination feature in template tag design, making it easy to implement pagination display in article lists or Tag document lists.

To understand how AnQiCMS implements pagination, we need to focus on three core template tags:archiveList(used for article lists),tagDataList(used for Tag document lists) as well.pagination(Used to generate pagination navigation). They work together to build a complete pagination experience.

I. Pagination display of article list.

For the most common articles (or product) lists on the website, AnQiCMS usesarchiveListtags to retrieve content. The key to enabling pagination functionality lies intypeParameter settings.

when we wantarchiveListWhen a label returns paginated data instead of a simple list, you need totypethe parameter to"page". At the same time,limitThe parameter is no longer a limit on the total number of items, but defines the number of articles displayed per page. For example, if we want to display 10 articles per page, we can call it like this:

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

OncearchiveListtags totype="page"The pattern is called, the AnQiCMS system will automatically handle the logic of the current page number and prepare all the data needed for pagination. Next, we can usepaginationTags to render pagination.

paginationTags usually follow.archiveListAfter the label, and pass a variable (usually namedpagesThis variable contains all the information related to pagination, such as total number of items, total number of pages, current page number, home link, previous page link, next page link, last page link, and the list of middle page numbers.showParameters allow us to control the number of middle page links displayed, for exampleshow="5"This means that up to 5 middle page numbers can be displayed.

<div class="pagination">
    {% pagination pages with show="5" %}
    <ul>
        {# 显示总页数和当前页 #}
        <li>总数：{{pages.TotalItems}}条，总共：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>
        {# 首页链接 #}
        <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>
    {% endpagination %}
</div>

By combining the above, we can see a functionally complete pagination navigation of the article list on the website front-end. In addition,archiveListit also supportsmoduleId(Specify the content model),categoryId(specified category),order(Sorting methods) and other parameters, which can be used to refine the selection and sorting of list data when retrieving data, and these conditions remain effective in pagination mode. If the URL contains a search keywordq,archiveListIntype="page"The search function will also be automatically read and applied.

Second, the pagination display of Tag document list.

Similar to the article list, when we need to display a document list under a specific Tag and implement pagination, we can usetagDataListTag. Its pagination logic isarchiveListhighly consistent.

tagDataListThe tag also needs totypethe parameter to"page"enable pagination mode,limitThe parameter defines the number of Tag documents to display per page. Moreover,tagIdThe parameter specifies which Tag's documents need to be retrieved.

{% tagDataList archives with type="page" limit="10" %}
    {# 在这里循环显示当前页的Tag文档内容 #}
    {% for item in archives %}
        <li><a href="{{item.Link}}">{{item.Title}}</a></li>
    {% endfor %}
{% endtagDataList %}

Later, it is also used topaginationBuild the pagination navigation of the Tag document list, its usage is exactly the same as the pagination of the article list.

<div class="pagination">
    {% pagination pages with show="5" %}
    <ul>
        {# 分页导航结构与文章列表分页示例一致 #}
        {# ... （省略具体代码，同上） ... #}
    </ul>
    {% endpagination %}
</div>

tagDataListalso supportsmoduleIdandorderParameters such as this allow for more flexible control of the display content and order of the Tag document list.

Section 3: Flexible Customization and Precautions.

The pagination function of AnQiCMS is designed to be very flexible, allowing template developers to adjust the style of pagination links as needed. Due topaginationThe label only provides data structure and links, the actual HTML structure and CSS style are freely defined by developers in the template, which means you can completely control the appearance and layout of the pagination buttons, making them perfectly integrate into the overall design of the website.

It is worth mentioning that when configuring pseudo-static rules, AnQiCMS will automatically adapt the URL structure of pagination links, without the need for additional cumbersome configuration for pagination rules.paginationlabel'sprefixThe parameters allow for advanced customization of pagination URL patterns, but in most cases, the automatic adaptation provided by the system is sufficient.

In general, AnQiCMS provides a comprehensive pagination solution for content lists and Tag document lists through concise and powerful template tags.Developers only need to understand the usage of a few core tags to quickly implement an efficient and beautiful pagination function, greatly enhancing the user experience and management efficiency of the website.

Frequently Asked Questions (FAQ)

1. Why is the pagination link not displayed in my article or Tag document list?

This is usually due to not callingarchiveListortagDataListthe tag correctlytypethe parameter to"page", or not properly introducing it in the templatepaginationTags to render pagination navigation. Make sure your tag calls includetype="page", and add{% pagination pages with show="5" %}...{% endpagination %}such code to display pagination links.

How to customize the style and layout of pagination links?

AnQiCMS'paginationThe tag is responsible for providing pagination data and generating the corresponding URL, it does not generate any built-in CSS styles. You can customize it as needed,{% pagination pages with show="5" %}...{% endpagination %}Within the tag, use HTML and CSS to completely customize the pagination style and layout. For example, you can wrap each page number link in<li>In the tag, then beautify it with CSS, or use flexbox layout to control the arrangement of pagination buttons.

3. Where else can the pagination feature of AnQiCMS be used, besides articles and Tag lists?

The design philosophy of AnQiCMS is universal, so in addition to the article and Tag document lists, similar pagination mechanisms can also be applied to other places that require list display and may contain more content. For example, the comment list (commentListTags are also supportedtype="page"Parameters can be used withpaginationTags can be used to implement pagination of comment content to avoid the page being too long due to too many comments on a single article page.