How to generate a pagination navigation with page number control in AnQiCMS template?

Hello! As an experienced CMS website operator, I fully understand the importance of high-quality content and user experience.Page navigation is an indispensable part of content-based websites, directly affecting the user's browsing experience and the discoverability of the content.In AnQiCMS, generating a pagination navigation with page number control is an intuitive and powerful process.

Below, I will elaborate on how to implement this feature in the AnQiCMS template.

Generate pagination navigation with page number quantity control in the AnQiCMS template.

In a content management system, effective pagination navigation not only helps users easily browse a large amount of content, but is also the key to improving the professionalism and user experience of the website.AnQiCMS as an efficient and flexible content management system provides convenient template tags to build this navigation and allows you to precisely control the number of visible page numbers.

Enable pagination mode for the content list

To build pagination navigation, first make sure that your content list tag is in pagination mode. AnQiCMS providesarchiveList(Document list),tagDataList(Tag document list) andcommentListTags such as (comment list) support pagination. When using these tags, you need to specifytype="page"the parameters and setlimitthe parameters to define the number of items displayed per page.

For example, if you want to display 10 articles per page on the article list page and enable pagination, you can use it like thisarchiveListTags:

{% archiveList archives with type="page" limit="10" %}
    {# 在这里循环输出每页的文章内容 #}
    {% for item in archives %}
        <a href="{{ item.Link }}">{{ item.Title }}</a>
        {# 更多文章详情... #}
    {% endfor %}
{% endarchiveList %}

HerearchivesThe variable will contain the article data for the current page. More importantly, whentype="page"After being set, the system will automatically prepare the data for pagination navigation, which will then bepaginationused by the tags.

Introduce pagination navigation tags and control the number of page numbers

After the content list tag, you can introducepaginationtags to render pagination navigation. AnQiCMS'spaginationTag throughshowParameter, allowing you to accurately control the number of page numbers displayed in navigation, thereby maintaining the interface's neatness and optimizing the user experience.

showThe value specifies how many page number links to display before and after the current page. For example,show="5"It ensures that the pagination navigation displays a maximum of 5 page numbers.

The followingpaginationThe basic structure of the tag, and how to use itshowparameters:

<div class="pagination">
    {% pagination pages with show="5" %}
        {# 分页导航的具体HTML结构将在这里构建 #}
    {% endpagination %}
</div>

In this example,pagesIspaginationA variable automatically provided that contains all the data required to build a complete pagination navigation, such as total number of pages, current page, home link, previous page link, next page link, last page link, and the list of middle page numbers, etc.

Build the HTML structure for pagination navigation

pagesThe variable contains multiple useful fields that you can use to build a rich pagination navigation. These fields include:

• TotalItemsTotal number of items.
• TotalPages: Total number of pages.
• CurrentPageCurrent page number.
• FirstPage: Home object (includingNameandLink)
• LastPage: End object (includingNameandLink)
• PrevPage: Previous page object (includingNameandLink)
• NextPage: Next page object (includingNameandLink)
• Pages: An array containing objects for middle page numbers (each object containsName/LinkandIsCurrent)

By combining these fields, you can flexibly create pagination navigation and according toIsCurrentAdd style to the current page number to highlight.

This is a complete example showing how to combinearchiveListandpaginationtags, as well as how to utilizeshowparameters to control the number of page numbers:

{# 首先使用 archiveList 标签获取分页数据 #}
{% archiveList archives with type="page" limit="10" %}
    <div class="article-list">
        {% for item in archives %}
            <div class="article-item">
                <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
                <p>{{ item.Description }}</p>
                <span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
            </div>
        {% empty %}
            <p>该列表没有任何内容。</p>
        {% endfor %}
    </div>

    {# 接着使用 pagination 标签生成分页导航，并控制页码显示数量 #}
    <div class="pagination-nav">
        {% 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 %}

                {# 中间页码链接，受 show="5" 参数控制 #}
                {% 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>
{% endarchiveList %}

By following these steps, you can generate a functionally complete pagination navigation with a可控 number of page numbers in the AnQiCMS template.This not only enhances the user experience of your website, but also makes your content management more efficient and professional.

Frequently Asked Questions (FAQ)

Q: Why did I add a label in the templatepaginationbut the pagination navigation did not display?

A:paginationThe label requires a specific content list tag (such asarchiveList/tagDataListorcommentList) to provide pagination data. Please make sure that the content list tag is settype="page"parameters, andlimitthe parameters have also been correctly configured. IflimitParameter set too large causes all content to be displayed on one page, or the total number of items may not exceedlimitThe set quantity, may not generate pagination.

Q: How to adjust the number of page numbers displayed in the pagination navigation?

A:paginationTags provide ashowThe parameter is used to control the maximum number of page number links displayed in pagination navigation. For example, if you want to display up to 5 page numbers around the current page, you can set{% pagination pages with show="5" %}. The system will automatically adjust the display range of page numbers based on the total number of pages and the current page number.

Q: How can I display only 'Previous page' and 'Next page' in pagination navigation while hiding the specific page numbers in AnQiCMS?

A: You can flexibly utilizepaginationto achieve this requirement through logical judgments within the tag. Inpaginationwithin the tag block, you can selectively renderpages.PrevPageandpages.NextPagethe links while omitting the looppages.PagesAn array is used to hide specific page number digits. For example, you can delete or comment out the sample code in{% for item in pages.Pages %}to{% endfor %}The part between.