As an experienced website operations expert, I know that it is crucial to effectively guide users to browse and discover information when managing a large amount of content.Page functionality is the bridge that connects users with the deep content of a website.In AnQiCMS (AnQiCMS) such an efficient and customizable content management system, flexible use of pagination tags can greatly enhance user experience and the professionalism of the website.

Today, let's delve into AnQiCMSpaginationA core parameter of the tag -showLook at its function and how we 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 one page, the user experience would be unimaginable.Pagination, it is born to solve this pain point. It divides a large amount of content into several small pieces logically, each corresponding to a page, and links these pages together through page numbers.This allows users to browse in an orderly manner and also helps search engines better understand the website structure.

In AnQiCMS, when we usearchiveListortagDataListtags such astype="page"pattern to obtain the pagination list data, it is usually followed bypaginationTags 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 tag receives a name calledpagesThe variable contains all the information required for pagination, such as the total number of items (TotalItems）、total number of pages（TotalPages）、current page（CurrentPage) etc., as well as links to the home page, last page, previous page, next page, and middle page numbers.

showParameter: the key to elegantly control the display of page numbers

Now, let's focus onpaginationlabel'sshowParameter. Its function is intuitive and powerful:It allows us to specify the maximum number of middle page number links to display in the pagination navigation bar, excluding the first page, last page, previous page, and next page.

Why is this parameter so important? Imagine a list with hundreds of pages, if the pagination navigation bar displays all the page numbers (1, 2, 3, …, 98, 99, 100) all at once, it will be a long and difficult-to-navigate list, especially on mobile devices, it's a nightmare.showThe parameter is specifically designed to solve this problem, it can ensure that the user can see enough page numbers for jumping while maintaining the simplicity and aesthetics of the pagination component.

For example, when we setshow="5"At the moment, 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,34, 5; If the current page is the 10th page, with a total of 20 pages, it may display 8, 9,10And 11, 12. This way, no matter how many pages the website content has, the pagination navigation bar that the user sees is always compact and easy to click.

The following is an example of using a typical AnQiCMS templateshowExample of parameters:

<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"The instruction informs AnQiCMS about{% for item in pages.Pages %}This loop renders at most 5 page number links adjacent to the current page.Other pagination elements such as home page, end page, previous page, next page will be displayed independently to provide complete navigation capabilities.

how to control the number of pages according to actual needs?

The control of the number of pages displayed at the bottom of the page is very simple, just adjustshowthe value of the parameter:

  • show="3": If you want the pagination bar to be extremely concise, for example on mobile devices, you can only display one page on the left and one page on the right of the current page, plus the current page, totaling 3 pages.
  • show="7"If the page space allows, or if your website users are accustomed to direct page number jumps, you can increase the display quantity appropriately.
  • OmittedshowParameterIf there is no explicit statement in the document.showThe default parameter value, omitting it may cause AnQiCMS to display all available middle page numbers, which may not be an ideal choice when there are a large number of pages. Therefore, it is recommended to always explicitly set it.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. Usually, a page range of 3 to 7 middle pages is a balanced choice, as it can keep things concise and meet the user's fast navigation needs.

Summary

AnQiCMS'paginationLabel combinationshowParameters provide us with a powerful and flexible tool for achieving 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 rich large websites always maintain a professional image.Remember, every detail can affect the user's stay and the conversion of the website.

Frequently Asked Questions (FAQ)

1. If the total number of pages on 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 pages, and you willshowthe parameter to5，AnQiCMS will intelligently only display the actual existing page numbers, such as pages 1, 2, 3. It will not forcibly generate non-existing page numbers and will not report an error either.show="5"and will not generate non-existing page numbers forcefully, nor will it report an error.showThe parameter sets the maximum number of items to display.

2.showDoes the parameter only affect the visual display, or will it affect the search engine's crawling and indexing of the page?

showThe parameter is mainly a front-end display control parameter, which only affects the number of pagination links that the user sees in the browser.It will not change the total number of pages actually existing on the website, nor will it affect the search engine's crawling and indexing of all pagination content.The search engine will find and index all pages through pagination links (including the home page, last page, previous page, next page, and all intermediate pages' real URLs), regardless of how many page number links are displayed on the front end.Therefore, you have nothing to worry aboutshowParameters will affect the website's SEO effect.

3. Should I set different values on mobile and PC? Does AnQiCMS support this scenario?showIs that right? Does AnQiCMS support this kind of scenario?

Yes, this is a very good practice. Due to the limited screen size of mobile devices, it is usually recommended to set a smallershowfor example3or4), to avoid poor user experience due to too long pagination bars.AnQiCMS supports responsive template design (such as adaptive, code adaptation, PC+mobile independent site mode).You can customize in different templates (such as PC templates and mobile templates) forpaginationlabel with different settingsshowParameters, thus providing a ** pagination experience for different devices.