Manage website content in Anqi CMS, the article list page is usually one of the main entry points for users to browse information.In order to provide a smoother user experience and optimize page loading performance, it is particularly important to implement dynamic pagination and flexible control over the number of items displayed per page.AnQi CMS provides powerful and easy-to-use template tags, allowing us to easily implement these features.

The cornerstone of dynamic pagination and control of items per page

In Anqi CMS, the implementation of dynamic pagination for article lists mainly depends on two core template tags:

  1. archiveListTagresponsible for retrieving article data that meets the conditions from the database. By setting itstype="page"parameters, we can inform the system to generate the pagination information required for these article data. At the same time,limitThe parameter directly controls the number of articles displayed per page.
  2. paginationTag: This tag is used to determine the basis ofarchiveListGenerated pagination data, build and display the actual pagination navigation links, such as "Previous page

These tags work together to make the article list not only display data, but also dynamically load different page content according to the page number and allow users to perform page jumps intuitively.

Preparation: Understand the template structure

In Anqi CMS, the template files for the article list page are usually located in the corresponding directory of the template package you are using. According to the system convention, these files may be named{模型table}/list.htmlor more specific{模型table}/list-{分类ID}.htmlFor example, if you create a category named "news" under the article model, the list page template might bearticle/list.htmlorarticle/list-新闻分类ID.html. Understanding the location of these template files helps you accurately modify and add pagination logic.

Step 1: Get the list of article data (archiveListtags)

Firstly, we need to call the template inarchiveListLabel to retrieve article data. This label has a very flexible function, which can filter articles based on various conditions.

The key to implementing pagination lies in settingtypeparameter assignment to"page"HoweverlimitThe parameter is used to set the number of articles you want to display per page. For example, if you want to display 10 articles per page, you can set it like this:

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            <h5>{{item.Title}}</h5>
            <p>{{item.Description}}</p>
            <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
            <span>浏览量：{{item.Views}}</span>
        </a>
    </li>
    {% empty %}
    <li>暂无文章内容。</li>
    {% endfor %}
{% endarchiveList %}

In the code above:

  • archivesIt is a custom variable name used to store the article list data obtained.
  • type="page"Explicitly inform the system that this is a pagination query, and the system will prepare the data needed for pagination at the same time.
  • limit="10"Set the number of articles displayed per page to 10. You can adjust this number as needed.
  • {% for item in archives %}Loop through and display the title, description, publication date, and view count of each article.

excepttypeandlimit,archiveListTags also support many other useful parameters, such asmoduleId(Specify Model ID),categoryId(specified category ID),order(Specify the sorting method, such asid descSorted by ID in reverse order)q筛选 based on the search keywords in the URL, etc., these parameters can all help you build a more refined list of articles.

Step two: build pagination navigation (paginationtags)

InarchiveListAfter the tag generates the pagination data, we can usepaginationthe tag to render the pagination navigation. This tag will receivearchiveListInternally generated pagination information and converted into a user-friendly link collection.

<div class="pagination-controls">
    {% pagination pages with show="5" %}
    <ul>
        <li>共计：{{pages.TotalItems}}条记录，分为：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>
        {# 首页链接 #}
        <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 the above code:

  • pagesIs a custom variable name used to receivepaginationTags provide our pagination object.
  • show="5"The parameter controls how many page numbers are displayed at one time in the pagination navigation (excluding "Home
  • pagesThe object contains rich pagination information, such asTotalItems(Total number of records),TotalPages(Total number of pages),CurrentPage(Current page number) and the sub-object pointing to each pagination link (FirstPage,PrevPage,NextPage,LastPage) and the page number array (Pages). By traversing these sub-objects and arrays, you can flexibly build various styles of pagination navigation.

Integration Practice: Complete Code Example

Combining the above two tags, an article list page with dynamic pagination and control over the number of items per page is basically completed. The complete template code is roughly as follows:

`twig {# article/list.html or other list template file #} <!DOCTYPE html>

<meta charset="UTF-8">
<title>{% tdk with name="Title" siteName=true %} - 文章列表</title>
<style>
    .article-list ul { list-style: none; padding: 0; }
    .article-list li { margin-bottom: 15px; border-bottom: 1px dashed #eee; padding-bottom: 10px; }
    .article-list li a { text-decoration: none; color: #333; display: block; }
    .article-list li h5 { font-size: 18px; margin-bottom: 5px; }
    .article-list li p { font-size: 14px; color: #666; margin-bottom: 5px; }
    .article-list li span { font-size: 12px; color: #999; margin-right: 10px; }
    .pagination-controls ul { list-style: none; padding: 0; display: flex; justify-content: center; margin-top: 20px; }
    .pagination-controls li { margin: 0 5px; }
    .pagination-controls li a { display: block; padding: 8px 12px; border: 1px solid #ddd; text-decoration: none; color: #333; border-radius: 4px; }
    .pagination-controls li.active a, .pagination-controls li a:hover { background-color: #007bff; color: #fff; border-color: #007bff; }
</style>


<div class="container">
    <h1>最新文章</h1>
    <div class="article-list">
        <ul>
            {% archiveList archives with type="page" limit="10" moduleId="1" order="id desc" %}
                {% for item in archives %}
                <li>
                    <a href="{{item.Link}}">
                        <h5>{{item.Title}}</h5>
                        <p>{{item.Description}}</p>
                        <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                        <span>浏览量：{{item.Views}}</span>
                    </a>
                </li>
                {% empty %}
                <li>暂无文章内容。</li>
                {% endfor %}
            {% endarchiveList %}
        </ul>