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

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

In AnQiCMS template, generate pagination navigation with page number control

In a content management system, effective pagination navigation not only helps users easily browse a large amount of content, but also is a key factor in enhancing 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 content list

To build pagination navigation, first make sure that your content list tags are in pagination mode. AnQiCMS providesarchiveList(Document List),tagDataList(Tag document list) andcommentList(Comment list) and other tags, all of which support generating pagination data. When using these tags, you need to explicitly 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 %}

this partarchivesThe variable will contain the article data for the current page. What's more, whentype="page"After being set, the system will automatically prepare the data used for pagination navigation, which will then bepaginationused by tags.

Introduce pagination navigation tags and control the number of page numbers

After the tag in your content list, you can introducepaginationtags to render pagination navigation. AnQiCMS'spaginationTagged throughshowParameters, allowing you to precisely control the number of page numbers displayed in navigation, thus maintaining the interface's neatness and optimizing the user experience.

showThe value of the parameter specifies how many page number links are displayed before and after the current page. For example,show="5"It ensures that at most 5 page numbers are displayed in the pagination navigation.

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,pagesYespaginationThis variable is provided automatically by the label and 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

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

  • TotalItems: Total number of contents.
  • TotalPages: Total number of pages.
  • CurrentPage: Current page number.
  • FirstPage: Home object (contains)NameandLink).
  • LastPage: End page object (contains)NameandLink).
  • PrevPage: Previous page object (including)NameandLink).
  • NextPage: Next page object (including)NameandLink).
  • Pages: An array that contains the objects of the middle pages (each object containing)Name/LinkandIsCurrent).

Combine these fields, and you can flexibly create pagination navigation, and according toIsCurrentAdd styles to the current page number field, highlighting it.

This is a complete example showing how to combinearchiveListandpaginationLabel, and how to use itshowParameters to control the number of pages:

{# 首先使用 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 %}

Through the above steps, you can generate a functional pagination navigation in AnQiCMS template with可控 number of pages.This not only improves the user experience of your website, but also makes your content management more efficient and professional.

Common Questions and Answers (FAQ)

Q: Why didn't the pagination navigation display after I added thepaginationlabel?

A:paginationLabel requires a specific content list label (such asarchiveList/tagDataListorcommentList) to provide pagination data. Please make sure your content list label is settype="page" parameters, andlimit the parameters are also correctly configured.limitThe parameter is set too large, causing all content to be displayed on one page, or the total number of contents does not exceedlimitThe set number, may not generate pagination.

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

A:paginationTags provide ashowParameters used to control the maximum number of page 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 range of displayed page numbers based on the total number of pages and the current page number.

Q: I want to only display 'Previous' and 'Next' in the pagination navigation and hide the specific page numbers. How can I achieve this in AnQiCMS?

A: You can achieve this by flexibly utilizingpaginationthe logical judgment within the tag labels to meet this requirement. Inpaginationthe tag block, you can selectively render onlypages.PrevPageandpages.NextPagethe links, while skipping the looppages.PagesArray to hide specific page number. For example, you can delete or comment out the example code in{% for item in pages.Pages %}to{% endfor %}the part between.