How to set the display quantity and offset for the `archiveList` tag in AnQiCMS to achieve pagination?

As an experienced website operations expert, I am well aware that an efficient and flexible list display method is crucial for user experience and website performance.AnQiCMS (AnQiCMS) has provided us with great convenience with its powerful template tag system.archiveListLabel, cleverly set the display quantity and offset to achieve smooth pagination effects.

Mastering AnQi CMS'sarchiveListLabel: The art of efficient pagination and content presentation.

In AnQiCMS,archiveListLabels are undoubtedly the core of content display.It can help us retrieve a list of various types of documents such as articles, products from the database, and sort, filter, and display them according to our needs.archiveListSeveral key parameters of the tag, especiallytypeandlimit.

archiveList: The foundation of content acquisition and the number of items displayed per page

First, let's understandarchiveListHow labels work.When you need to display a series of documents on a page, this tag is your helpful assistant.It defines the range and characteristics of the content you want to retrieve through a series of parameters.

The most critical step to achieve pagination effect is to ensurearchiveListlabel'stypethe parameter is set to"page". Whentypeis set to"page"at this time, AnQiCMS understands that you want to get a paginated collection of documents, rather than a simple static list.

Next,limitThe parameter plays a role in setting the number of items displayed per page. By means oflimit="10"Such settings, we inform the system to display only 10 documents per page. When the user switches to the second page, the system will use thislimitThe value and the current page number, automatically calculate how many documents need to be skipped (i.e., the offset) and retrieve the next page's content. This means that when usingtype="page"When paginating, we usually do not need to manually calculate or specify an offset; the system will handle it intelligently for you.

It is worth mentioning,limitThe parameter also has the function of "offset" in non-paging scenarios. If you just want to display a static list on a single page and want to skip the first few data, you canlimitis set to"offset,count"The form, for examplelimit="2,10".This indicates starting from the 2nd data (index starts from 0, which is actually the 3rd), and fetching the next 10 data.But in the context of pagination, we mainly use it to define the "number of items per page".

excepttypeandlimit,archiveListIt also provides rich filtering and sorting features, such as throughmoduleIdSpecify the content model, throughcategoryIdSpecify the category, or throughorder="views desc"Arrange according to the number of views in descending order, all of these can help you more accurately control which content is displayed.

paginationTo visualize pagination navigation:

Just pass through.archiveListThe pagination data is not enough, we also need an intuitive navigation interface that allows users to easily jump between different pages. At this time, AnQiCMS'spaginationThe label appears. It can generate page information according toarchiveListAutomatically render "Previous page

paginationThe most commonly used parameter is for the tagshowIt determines how many page number links are displayed at the same time in page navigation. For example, setshow="5"Can make the navigation display 5 page numbers around the current page, such as '1 2 [3] 4 5'.This helps maintain the conciseness of pagination navigation, avoiding the display of a long dense string of page numbers when the content is vast.

CombinearchiveListandpaginationWe can build a complete, dynamic pagination list. Below is a typical template code example showing how these two tags work together:

{# 假设这是文章列表页模板，moduleId="1"代表文章模型 #}
<div>
    {# 使用 archiveList 获取分页文档列表 #}
    {% archiveList archives with type="page" moduleId="1" limit="10" order="id desc" %}
        {% for item in archives %}
        <div class="article-item">
            <a href="{{item.Link}}">
                <h3>{{item.Title}}</h3>
                <p>{{item.Description}}</p>
                <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>浏览量：{{item.Views}}</span>
            </a>
            {% if item.Thumb %}
            <a href="{{item.Link}}">
                <img src="{{item.Thumb}}" alt="{{item.Title}}">
            </a>
            {% endif %}
        </div>
        {% empty %}
        <p>当前分类下暂无内容。</p>
        {% endfor %}
    {% endarchiveList %}

    {# 使用 pagination 渲染分页导航 #}
    <div class="pagination-nav">
        {% pagination pages with show="5" %}
            {# 显示总页数和当前页信息 #}
            <span class="page-info">共 {{pages.TotalItems}} 条，{{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页</span>

            {# 首页链接 #}
            <a class="page-link {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
            
            {# 上一页链接 #}
            {% if pages.PrevPage %}
            <a class="page-link" href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
            {% endif %}
            
            {# 中间页码链接 #}
            {% for item in pages.Pages %}
            <a class="page-link {% if item.IsCurrent %}active{% endif %}" href="{{item.Link}}">{{item.Name}}</a>
            {% endfor %}
            
            {# 下一页链接 #}
            {% if pages.NextPage %}
            <a class="page-link" href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
            {% endif %}
            
            {# 尾页链接 #}
            <a class="page-link {% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
        {% endpagination %}
    </div>
</div>

By the above code, you can not only clearly display each page of the document, but also provide the user with complete page navigation.This pagination strategy not only improves the organization of website content, but also optimizes the process of users obtaining information, having a positive impact on the website's SEO performance and user retention.A reasonable pagination setting can allow search engines to better crawl and index your content, avoiding the problem of slow page loading caused by loading too much content at once.

Frequently Asked Questions (FAQ)

1. Ask: Why did I setlimitParameters, but the pagination navigation is not displayed on the page?Answer: This is because to implement a complete web pagination effect, in addition toarchiveListin the labellimitsetting the number of items displayed per page, it is more critical thattypeThe parameter must be set to"page", that istype="page"IftypeThe parameter is kept at default"list"or not set,limitIt will only limit the total number of items displayed, without enabling pagination functionality, thereforepaginationThe tags will not generate navigation links. Be sure to check.archiveListintypeParameter settings.

2. Question: I want to display a 'Latest Articles' block on the page, showing only the most recent 5 articles without pagination, how should I set it up?archiveList?Answer: In this non-paginated static list scenario, you do not need to settype="page". You just need to specifyarchiveListUsed in tagslimitthe number of items to display, for example{% archiveList archives with limit="5" order="id desc" %}If you want to skip the first 2 articles and display 5 articles starting from the third, you can set it tolimit="2,5"Thus,archiveListit will directly retrieve and display the specific number of documents you need.

3. Ask: My website has a lot of content, and every time I navigate through pagination, it shows ten or more page number links, which looks unattractive. What methods can be used to optimize it?Of course you can. You can adjustpaginationlabel'sshowthe parameters to control the number of pages displayed. For example, if{% pagination pages with show="5" %}is modified to{% pagination pages with show="3" %}you set it, the pagination navigation will only display 3 page links around the current page, such as... 2 [3] 4 ...This will make the pagination navigation look simpler and more professional, enhancing the user experience.