As an experienced website operations expert, I know that a powerful and flexible content management system is crucial for the success of a website.AnQiCMS (AnQiCMS) takes advantage of its efficient architecture based on the Go language and rich features, providing great convenience for content operators.Today, with the content of websites becoming increasingly rich, how to efficiently display and manage this content while providing an excellent user experience is a challenge that every operator must face.The pagination mechanism is one of the core means to solve this problem.

Today, let's deeply analyze the two key variables in the page tag of Anqi CMS:pages.TotalItemsandpages.TotalPagesUnderstand what they represent respectively, as well as the practical scenarios they can bring in actual operation.

In-depth analysis of the Anqi CMS pagination tag:pages.TotalItemswithpages.TotalPagesthe mysteries and practices

When building a user-friendly content display page, pagination is undoubtedly the cornerstone.When the amount of content on a website is large, loading all information at once and presenting it on a single page not only leads to slow page loading but also causes users to lose direction in a sea of information.The pagination tag of AnQi CMS is born to solve this pain point, which allows us to display content lists in a structured way while providing clear navigation.

In Anqi CMS template design, when you use{% pagination pages with show="5" %}such pagination tags,pagesthis variable carries all the key information of the current pagination status. Among them,pages.TotalItemsandpages.TotalPagesThese are the two data items that can most intuitively reflect the total amount of content and pagination structure.

I.pages.TotalItems: An intuitive presentation of the total amount of content.

pages.TotalItemsIt represents the current pagination list in the sense that it is named.The actual total number of all items of content.. Whether it is an article list, product list, comment list, or any other paginated data set,TotalItemsit will accurately tell you how many independent records are included in the set.

What scenarios can it be used in?

  1. Enhance user perception and information transparency: Display information such as 'Total XX articles', 'Found YY items', 'Total ZZ comments' at the top or bottom of the list page, which allows users to have a direct understanding of the volume of content and help them evaluate the relevance of search results or the richness of the channel. For example, on the product category page, display“该分类下共计 {{ pages.TotalItems }} 件商品”Can help visitors quickly learn whether the types of goods are rich or not.

  2. Verify the validity of filtering or search results.When a user uses the filter or search function, clearly inform them that 'Your search/filter criteria found {{ pages.TotalItems }} matching results,' which can enhance the user's feedback experience and help them determine whether they need to adjust the search criteria.

  3. The benchmark for operational data analysis.: For operators,TotalItemsProvided a real-time indicator of content growth. For example, we can analyze changes under specific categories or tags to evaluate content production efficiency or user interest points.TotalItemsChanges to evaluate content production efficiency or user interest points.

How to use in the template?

In{% pagination pages with show="5" %}Inside the tag, you can easily display the total count like this:

<p>
    共计 {{ pages.TotalItems }} 条记录。
</p>

Second,pages.TotalPages: Macro control of pagination logic

pages.TotalPagesMeans the number of items displayed per page in the currentlimitset under the setting of the following, How many pages of content need to be divided in totalto be displayed completely. It directly reflects the 'depth' or 'width' of the pagination structure.

What scenarios can it be used in?

  1. Build a complete pagination navigationThis isTotalPagesThe most essential use. Whether it is the classic 'previous page/next page/page number' navigation or the more modern 'load more' or 'waterfall' mode, understanding the total number of pages is indispensable.For example, you can use it to determine whether to display the 'Last Page' button or to build a complete list of page numbers.For example, display“当前第 {{ pages.CurrentPage }} 页 / 总 {{ pages.TotalPages }} 页”Can clearly inform the user of its position in the entire content sequence.

  2. Improve user navigation experience: Knowing the total number of pages can help visitors with a clear content browsing goal plan their browsing path.For example, if a user sees that an article has 50 pages, they may choose to jump directly to a specific page instead of flipping through each page blindly.

  3. Logical judgment and front-end optimizationIn front-end development, you can make use ofTotalPagesfor logical judgment. For example, ifpages.TotalPagesIf equal to 1, the pagination component can be completely hidden to avoid unnecessary UI elements taking up space.

  4. Crawler extraction strategy reference: For SEO optimization, the crawler will fetch content based on pagination links.TotalPagesThe information does not directly expose to the crawler, but it guides us to build clear and complete internal pagination links, thereby optimizing the crawling efficiency of the crawler.

How to use in the template?

Similarly, in{% pagination pages with show="5" %}You can use it like this inside the tag.TotalPages:

<p>
    总共 {{ pages.TotalPages }} 页内容。
</p>

Or, combineTotalItemsWith the current page numberCurrentPageProvide more comprehensive information:

<div class="pagination-info">
    第 {{ pages.CurrentPage }} 页，共 {{ pages.TotalPages }} 页，总计 {{ pages.TotalItems }} 条记录。
</div>

3. Combine both to create a more user-friendly pagination experience

pages.TotalItemsandpages.TotalPagesThey do not exist in isolation, they complement each other, and together they provide users with a comprehensive view of the content list.A good pagination design should make full use of these two data, allowing users to clearly understand 'how much content there is' and 'how the content is distributed' at any time.

For example, on the article list page, you might display it like this:

<div class="article-summary">
    我们为您精选了 <strong>{{ pages.TotalItems }}</strong> 篇优质文章，分布在 <strong>{{ pages.TotalPages }}</strong> 个页面中。
</div>

{# 接下来是分页的具体导航按钮 #}
<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 %}
            {% 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 way, users can not only see specific page navigation, but also obtain an overview of the total amount of content and pagination, thereby improving the usability and user experience of the website.The pagination tag of AnQi CMS, through these simple variables, gives us powerful control over content display.

Frequently Asked Questions (FAQ)

Q1: If the website content is less, not enough to display a page,pages.TotalPageshow many will be displayed?A1: Even if the content is not enough for a full page (for example, only 3 records, but 10 per page),pages.TotalPagesIt will also be displayed1. Because at least 1 page is needed to display this content, andpages.TotalItemsit will display the actual number of contents, that is3.

Q2:pages.TotalItemsandpages.TotalPageshow is the value calculated?A2:pages.TotalItemsThe value is the total number of records returned by the database query that meet the conditions.pages.TotalPagesThe value is throughpages.TotalItemsDivided by the number of items displayed per page (i.e., the pagination tag in thelimitThe value of the parameter, or the default value, is rounded up. For example, if there are 103 records, and 10 are displayed per page, thenTotalItemsit is 103, andTotalPagesThen `ceil(103 / 10) =