How to implement pagination for document lists in AnQiCMS and support custom page number quantities?

AnQiCMS document list pagination and custom page number settings: Make your content management more efficient

Imagine when your website content becomes increasingly rich, with thousands of articles, product or news lists neatly arranged. If it is not effectively organized and presented, users may feel at a loss.A good pagination mechanism can not only improve user experience and help visitors quickly find the information they need, but is also an important link in SEO optimization.AnQiCMS, as an efficient content management system, is fully aware of the importance of this requirement, therefore, it provides a very flexible and easy-to-implement document list pagination function, and supports customizing the number of entries displayed per page and the style of pagination navigation, thereby enhancing your content management work like a tiger wing.

Master the core of pagination easily:archiveListwithpaginationTag

To implement pagination display of document lists in AnQiCMS, it mainly relies on two powerful template tags:archiveListandpagination. We can convertarchiveListUnderstand as a data extraction expert, it is responsible for fetching document data from the database as needed; whilepaginationis the architect of page navigation, it based onarchiveListThe data provided is used to build the pagination link bar visible below your website.

To implement pagination, we need to clarify two points first:

1. How many documents should be displayed per page?This depends onarchiveListlabel'slimitParameter control.
2. How many page numbers can be displayed on the pagination navigation bar?This depends onpaginationlabel'sshowParameter control.

After understanding these two core concepts, we can start implementing the pagination of the document list in the AnQiCMS template.

Implement the steps for document list pagination

We usually integrate{模型table}/list.htmlfor examplearticle/list.htmlorproduct/list.html)、search/index.htmlortag/list.htmlSet the pagination logic in such a list page template

First step: usearchiveListFetch pagination data and define the number of items per page

First, you need to use the templatearchiveListTag to retrieve document data. The key here is to settype="page"parameters, which tell the system that you want the data returned in paginated form rather than a simple list. At the same time, throughlimitParameter, you can easily control how many documents are displayed per page. For example, if you want to display 10 documents per page, you can set it like this:

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
        <!-- 在这里展示每篇文档的标题、链接、简介等信息 -->
        <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
        <p>{{item.Description}}</p>
        <!-- 更多文档字段 -->
    {% empty %}
        <p>当前分类或搜索条件下没有找到任何文档。</p>
    {% endfor %}
{% endarchiveList %}

In this code block,archivesis an array object containing all the documents on the current page. You can use{% for item in archives %}a loop to traverse and display the details of each document.limit="10"Make it clear to AnQiCMS that only 10 documents are displayed per page.

archiveListTags also support other parameters to finely control the data range, such asmoduleId(Filtered by model ID),categoryId(Filter by category ID),order(Sorting methods, such asorder="views desc"sorted by view count in descending order) as well asq(Search keywords) etc., making your content filtering more flexible.

Second step: usepaginationBuilding pagination navigation and customizing the number of page numbers

After obtaining the pagination data, the next step is to build the pagination navigation bar at the bottom of the page, allowing users to click to browse pages. This requires usingpaginationtags. This tag will automatically adjust according toarchiveListThe data obtained, calculate the total number of pages, current page, first page, last page, previous page, and next page, and generate the corresponding navigation links.

The most convenient way is to useshowParameters to define the maximum number of page number links displayed on the pagination navigation bar. For example, setshow="5"It will display up to 5 page number links around the current page, which helps to maintain the simplicity of pagination navigation, especially when there are a very large number of pages.

Here is an example of a common pagination navigation:

<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>

In this code block,pagesIspaginationThe tag provides a pagination information object. It includes:TotalItems(Total number of entries),TotalPages(Total number of pages),CurrentPage(Current page number) as well asFirstPage/PrevPage/NextPage/LastPageand other page objects, each page object also contains:Name(Link text),Link(link URL) andIsCurrent(Is it the current page) and other properties. Through the looppages.PagesYou can display the page number links in the middle part and utilize{% if item.IsCurrent %}Determine the current page, add different styles to it to provide better visual feedback.

Flexible application of advanced skills

The pagination feature of AnQiCMS is not isolated, it can seamlessly integrate with the website's search and filtering functions. When users enter keywords in the search box or filter content through conditions,archiveListThe tag will automatically identify the URL inq(Search keyword) or other custom filtering parameters, and keep these conditions when pagination, to ensure that users always see the content that matches their filtering criteria when flipping pages.

If you manage multiple sites and want to call the content list of another site and implement pagination in one site,archiveListlabel'ssiteIdthe parameter can be used. By specifyingsiteIdYou can call content across sites, providing great convenience for multi-site operations.

AnQiCMS has fully considered practicality and flexibility in the implementation of document list pagination.By simply combining simple labels, it can meet the needs from basic pagination to complex content display.It not only helps us organize and present massive amounts of content efficiently, but also makes secondary development and customization easy and pleasant through clear template syntax.

Frequently Asked Questions (FAQ)

1. Why did I setlimitThe parameter, but the number of page numbers displayed on the pagination navigation bar has not changed?

limitThe parameter controlsHow many documents are displayed per page(That is, the number of items per page), andpaginationwithin the labelshowThe parameter controls whatThe maximum number of page number links displayed on the pagination navigation barThese two parameters are independent and work together to define the complete user pagination experience.If you want the pagination navigation bar to be simpler, for example, to only display a few pages before and after the current page, you need to adjustshowThe value of the parameter.

Can I use multiple pagination lists on the same page? For example, a list of articles at the top of the page and a list of products at the bottom, both with pagination?

Yes, AnQiCMS supports implementing multiple independent pagination lists on the same page. The key is to name eacharchiveListtags and their correspondingpaginationTag usagedifferent variable names. For example, you can