As an experienced website operations expert, I am well aware of the importance of a smooth and informative pagination navigation for user experience and Search Engine Optimization (SEO).AnQiCMS (AnQiCMS) provides us with powerful content management capabilities with its high-performance architecture based on the Go language, flexible template engine, and SEO-friendly design philosophy.Today, let's delve into how to cleverly display key information such as 'Total X pages' and 'Current page Y' in the pagination navigation of AnQiCMS, making the website content more professional and intelligent.

The core of pagination navigation: understanding AnQiCMS'spaginationTag

In AnQiCMS, to implement pagination and display detailed page number information, the core lies in the flexible use of templates in thepaginationThe tag is specifically designed to handle pagination logic for various list contents (such as articles, products, etc.) and provides rich page number information for us to call.

To usepaginationLabel, make sure your content list labels (such asarchiveList/tagDataListorcommentList）的typethe parameter is set to"page"This will tell the system that you need to retrieve pagination data, not just a simple content list. For example, when you retrieve an article list, you would typically configure it like this:

{% archiveList archives with type="page" limit="10" %}
    {# 循环显示文章内容 #}
    {% for item in archives %}
        <div class="article-item">
            <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
            <p>{{ item.Description }}</p>
        </div>
    {% empty %}
        <p>暂时没有文章内容。</p>
    {% endfor %}
{% endarchiveList %}

In the above code,archivesThe variable will carry the document data of the current page. And all the metadata required for pagination will be automatically processed and prepared, providingpaginationTag usage. Next, we can use these page objects generated by the system to build complete navigation information.

Overview of key pagination information

WhenpaginationWhen the tag is called, it will receive a list of all pagination details.pagesThe object. This object contains many practical fields, among which the most relevant to today's topic is:

  • TotalItems: Total number of content items.
  • TotalPagesThe total number of pages, that is, X in 'Total X pages'.
  • CurrentPageThe current page number, that is, Y in 'Current page Y'.

Furthermore,pagesThe object also providesFirstPage(Home page),LastPage(End page),PrevPage(Previous page),NextPage(Next page) and an array containing intermediate page number linksPagesThese are indispensable parts for building a complete pagination navigation.

Easily build the display of "Total X pages" and "Current page Y"

Now, let's demonstrate how to add these key information into pagination navigation through a practical template code snippet.

In your list template file (for examplearticle/list.htmlortag/list.htmlthenarchiveListafter (or any other list tag) you can build your pagination area like this:

<div class="pagination-wrapper">
    {% pagination pages with show="5" %}
        <ul class="pagination">
            {# 显示总页数和当前页信息 #}
            <li class="pagination-info">
                共 <span>{{ pages.TotalPages }}</span> 页，当前第 <span>{{ pages.CurrentPage }}</span> 页
            </li>

            {# 首页链接 #}
            {% if pages.FirstPage %}
                <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                    <a href="{{ pages.FirstPage.Link }}">{{ pages.FirstPage.Name }}</a>
                </li>
            {% endif %}

            {# 上一页链接 #}
            {% 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 %}

            {# 末页链接 #}
            {% if pages.LastPage %}
                <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
                    <a href="{{ pages.LastPage.Link }}">{{ pages.LastPage.Name }}</a>
                </li>
            {% endif %}
        </ul>
    {% endpagination %}
</div>

In this code block:

  1. We use{% pagination pages with show="5" %}tag to wrap the entire pagination navigation area.show="5"The parameter controls the maximum number of middle page numbers displayed, and you can adjust this number according to your design requirements.
  2. What is most important, we use{{ pages.TotalPages }}and{{ pages.CurrentPage }}these simple variable references directly inpagination-infoThis<li>The element displays the information of 'Total X pages' and 'Current page Y'.
  3. Through a series of the{% if %}We ensure that the links will only be displayed when "Home
  4. {% for item in pages.Pages %}The loop is responsible for rendering the middle page number links,item.NameIt is the page number,item.LinkIt is the corresponding page number URL,item.IsCurrentIt can be used to add highlight style to the current page.

In this way, your pagination navigation is not only functional, but also clearly informs users of the total amount and position of the current content, greatly enhancing the usability and user experience of the website.

Extra considerations for enhancing user experience

When designing pagination navigation, in addition to functional implementation, aesthetics and user experience should not be overlooked.You can customize the CSS style to make the pagination navigation consistent with the overall style of the website.AnQiCMS powerful template customization capability makes everything easy.

AnQiCMS offers powerful support in static rules, which also means that your pagination links will be clear, regular, and SEO-friendly, for exampleyourdomain.com/category/list-1.html/yourdomain.com/category/list-2.htmlThis is very beneficial for content crawling and collection.

User-friendly pagination design not only enhances the professionalism of the website but also effectively guides visitors to browse more content, increase page stay time, and indirectly optimize the overall performance of the website.

Conclusion

Through AnQiCMS's flexible template tag system, especiallypaginationThe powerful function of tags, we can easily implement pagination of content lists and accurately present key information such as 'Total X pages' and 'Current page Y'.This highly customized capability is one of the core values that AnQiCMS, as an enterprise-level content management system, can bring, allowing content operators to focus on content creation and dissemination without being troubled by complex underlying technology.

Frequently Asked Questions (FAQ)

Q1:archiveListlabel'stypeWhat is the role of the parameters? If I don't need pagination, how should I set it?

A1: archiveListlabel'stypeThe parameter is used to specify the display type of the list. When set totype="page"it will generate complete page number information for the content list, forpaginationTag usage. If your content list does not require pagination functionality and you just want to simply list a certain number of contents, then you can usetypethe parameter totype="list"which is usually accompanied bylimitParameters to control the number of items displayed, for examplelimit="10"In this mode,paginationthe tag will not be able to get pagination data.

Q2: In addition to 'Total X pages' and 'Current page Y', what other information can I display in the pagination navigation?

A2: paginationlabel'spagesThe object also providesTotalItemsfield indicating the pagination content