As an experienced website operations expert, I know that a powerful and flexible content management system is crucial for the success of a website.The AnQiCMS provides great convenience for content operators with its efficient architecture based on the Go language and rich features.Today, with the content of websites becoming increasingly rich, how to efficiently display and manage these contents 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, we will deeply analyze two key variables in the pagination tag of the Anqi CMS:pages.TotalItemsandpages.TotalPagesUnderstand what they represent and what practical scenarios they can bring us in actual operation.

In-depth analysis of the AnQi CMS pagination tag:pages.TotalItemsWithpages.TotalPagesThe mystery and practice of it

When building a user-friendly content display page, pagination is undoubtedly the cornerstone.When the volume of website content is large, loading all information at once and displaying it on a single page not only leads to slow page loading but also makes it difficult for users to find their way in a sea of information.The pagination label of AnQi CMS is exactly born to solve this pain point, which allows us to display content lists in a structured way while providing clear navigation.

In the template design of AnQi CMS, when you use{% pagination pages with show="5" %}such pagination tags,pagesthis variable holds all the key information of the current pagination state.pages.TotalItemsandpages.TotalPagesIt is the two data items that can most intuitively reflect the total amount of content and the pagination structure.

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

pages.TotalItems, as the name implies, it represents the actual total number of items in the current pagination list.of all the 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 this set.

What scenarios can it be used for?

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

  2. Verify the validity of filtered or search results：When users use the filter or search function, clearly inform them that 'Your search/filter criteria found {{ pages.TotalItems }} matching results,' which can enhance the feedback of user operations and help them determine whether they need to adjust the search conditions.

  3. Benchmark for operational data analysisEnglish translation: For operators,TotalItemsProvided a real-time monitoring indicator for content growth. For example, we can evaluate content production efficiency or user focus hotspots by analyzing specific categories or tags.TotalItemsChanges, to assess content production efficiency or user focus hotspots.

How to use in the template?

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

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

Second,pages.TotalPagesOverall control of pagination logic:

pages.TotalPagesIt indicates the number of items displayed per page under the setting of (limit)How many pages do all the contents need to be divided into?It can be fully displayed. It directly reflects the 'depth' or 'width' of the pagination structure.

What scenarios can it be used for?

  1. Build a complete pagination navigation：This isTotalPagesThe most core use.Whether it is the classic 'Previous/Next/Page Number' navigation or the more modern 'Load More' or 'Masonry' mode, understanding the total number of pages is indispensable.For example, you can use it to determine whether to display the "End Page" button, or to build a complete list of page numbers.“当前第 {{ pages.CurrentPage }} 页 / 总 {{ pages.TotalPages }} 页”Can clearly inform the user of its position in the entire content sequence.

  2. Optimize the user navigation experienceFor visitors with a clear content browsing goal, knowing the total number of pages can help them plan their browsing path.For example, if a user sees that a certain type of article has 50 pages, they may choose to directly jump to a specific page instead of flipping through pages blindly.

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

  4. Crawler scraping strategy referenceFor SEO optimization, the crawler will fetch content based on pagination links.TotalPagesThe information although not directly exposed to the crawler, but it guides us to build clear, complete internal page 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 within the tagTotalPages:

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

或者，combinedTotalItemsand the current page numberCurrentPageto provide 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 exist not in isolation, they complement each other, and together they provide users with a comprehensive view of the content list.A good pagination design should fully utilize these two pieces of 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>

Through this method, users can not only see the specific page navigation, but also obtain a more macroscopic view of the total content and pagination overview, thereby enhancing the usability and user experience of the website.The pagination label of Anqi CMS, through these simple variables, we have gained powerful content display control.

Common Questions (FAQ)

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

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 obtained throughpages.TotalItemsdivided by the number of items displayed per page (i.e., the pagination tag inlimitThe value of the parameter, or the default value, is rounded up. For example, if there are 103 records and 10 records are displayed per page, thenTotalItemsit is 103, andTotalPagesthen `ceil(103 / 10) =