As a senior website operation expert, I am well aware that how to effectively guide users to browse and discover information is crucial when managing a large amount of content.The pagination feature is the bridge connecting users to the deep content of the website.In an efficient and customizable content management system like AnQiCMS, the flexible use of pagination tags can greatly enhance user experience and the professionalism of the website.

Today, let's deeply analyze AnQiCMSpaginationa core parameter of tagsshowLook at its function and how we can cleverly use it to control the number of page numbers displayed at the bottom of the page.

Pagination: The cornerstone of content management websites.

Imagine a website with hundreds or even thousands of articles, products, or news. If all the content were piled onto a single page, the user experience would be unimaginable.Pagination, it is born to solve this pain point.It will divide a large amount of content logically into several pieces, each corresponding to a page, and link these pages together through page numbers.This not only allows users to browse in an orderly manner, but also helps search engines better understand the website structure.

In AnQiCMS, when we usearchiveListortagDataListtags such astype="page"mode to get paginated list data, it is usually followed bypaginationLabels to render beautiful and practical pagination navigation. For example, when we need to display a list of articles, we might use it like this:

{% archiveList archives with type="page" limit="10" %}
    {# 循环显示文章列表内容 #}
{% endarchiveList %}

<div class="pagination">
    {# 这里就是分页标签发挥作用的地方 #}
</div>

paginationThe label accepts a name calledpagesThe variable contains all the information needed for pagination, such as total number of items (TotalItems), total number of pages (TotalPages), current page number (CurrentPage), and the link data for the first page, last page, previous page, next page, and middle page numbers.

show参数：优雅控制页码显示数量的关键

现在，让我们聚焦于paginationTagsshow参数。它的作用直观而强大：It allows us to specify the maximum number of middle page number links to display in the pagination navigation bar, in addition to the first page, last page, previous page, and next page.

showThe parameter is designed to solve this problem, it can keep the pagination component simple and beautiful while allowing the user to see enough page numbers for navigation.

For example, when we setshow="5"When, the pagination navigation bar will surround the current page number and intelligently display a total of 5 middle page number links. If the current page is the 3rd page, it may display 1, 2,3、4、5；If the current page is the 10th page, with a total of 20 pages, it may display 8, 9,1011, 12. Thus, no matter how many pages the website content has, the pagination navigation bar that the user sees is always compact and easy to click.

以下是一个典型的AnQiCMS模板中使用Englishshow参数的例子：

<div class="pagination">
    {% pagination pages with show="5" %}
    <ul>
        {# 首页链接 #}
        <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' 参数控制 #}
        {% 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 example,show="5"指令告知AnQiCMS，在{% for item in pages.Pages %}This loop only renders the links of up to 5 adjacent page numbers of the current page.Other pagination elements, such as home page, end page, previous page, and next page, will be displayed independently to provide complete navigation capabilities.

如何根据实际需求控制页码数量？

It is very simple to control the number of page numbers displayed at the bottom of the page, just adjustshowthe value of the parameter:

  • show="3"If you want to display the pagination bar extremely concise, for example on mobile devices, you can only show one page on each side of the current page, plus the current page, totaling 3 pages.
  • show="7"If the page space allows, or your website users are accustomed to direct jumps to more page numbers, you can increase the display quantity appropriately.
  • OmittedshowParametersIf there is no explicit statement in the documentshowThe default value of the parameter, omitting it may cause AnQiCMS to display all available intermediate page numbers, which may not be an ideal choice when there are a large number of pages. Therefore, it is recommended to always set it explicitly.showthe value.

As website operators, we should decide on an appropriate one based on the overall design style of the website, the target user group, and the ratio of access devices (PC, mobile end)showValue. Generally, 3 to 7 middle page numbers is a relatively balanced choice, which can keep the content concise and meet the users' needs for quick page jumps.

Summary

AnQiCMSpaginationTag combinationshowParameters, provide us with a powerful and flexible tool to achieve efficient pagination in content management systems.By cleverly controlling the number of displayed pages, we can not only optimize the user interface and improve the usability of the website, but also ensure that content-rich large websites maintain a professional image.Remember, every detail can affect the user's decision to stay or leave and the conversion of the website.

Common Questions (FAQ)

1. If the total number of pages of the website ()TotalPages) is less thanshowThe number of parameters set, how will the pagination display?

If the total number of pages on the website, for example, is only 3, and you willshowparameter settings5AnQiCMS will intelligently display only the actual existing page numbers, such as pages 1, 2, 3. It will not forcibly generate non-existent page numbers and will not report an error accordingly.show="5".show参数设定的是“最多”显示的数量。

2.show参数是仅仅影响视觉显示，还是会影响搜索引擎对页面的抓取和收录？

showThe parameter mainly is a front-end display control parameter, it only affects the number of pagination links that users see in the browser.It will not change the total number of pages actually existing on the website, nor will it affect the crawling and indexing of all pagination content by search engines.The search engine will discover and index all pages through pagination links (including the home page, last page, previous page, next page, and all real URLs of the intermediate pages), regardless of how many page number links are displayed on the front end.showThe parameter will affect the SEO effect of the website.

3. On mobile and PC端, should I set different things?showDo you mean? Does AnQiCMS support this scenario?

Yes, this is a very good practice. Due to the limited screen size of mobile devices, it is usually recommended to set a smallershowvalue (for example3or4To avoid poor user experience caused by too long pagination bars.AnQiCMS supports responsive template design (such as adaptive, code adaptation, PC+mobile independent site mode).paginationlabel settings for differentshowParameters, thus providing a **pagination experience tailored for different devices.