How to implement the pagination display function of the article list in AnQiCMS?

The pagination feature of the article list is crucial for any content management system, as it not only enhances the user browsing experience and avoids the slow loading caused by long content on a single page, but also helps search engines better crawl and index the website content.In AnQiCMS, implementing this feature is both flexible and efficient, thanks to its simple template tag design.

Next, we will together learn how to easily implement pagination for article lists in AnQiCMS.

The core component of the pagination feature in AnQiCMS.

In the AnQiCMS template system, pagination display mainly relies on two key template tags:archiveListandpagination. They work together,archiveListresponsible for fetching and preparing the article data needed for pagination, whilepaginationthen generate and render clickable pagination navigation based on these data.

specific steps to implement article list pagination

First step: usearchiveListTag to get pagination data

Firstly, you need to use in the template file displaying the article list (usuallyarticle/list.htmlor customized according to the categoryarticle/list-ID.htmletc), usingarchiveListLabel to get article data. To enable pagination, you need totypethe parameter to"page"and specify the number of articles to display per page, for examplelimit="10"means 10 articles per page.

This tag intelligently identifies whether the current page contains classification ID, model ID, or search keywords, and filters out the corresponding articles accordingly.For example, if you use this tag on a category page, it will automatically retrieve the articles under that category; if on the search results page, it will filter according to the search keywords.

You can use it like thisarchiveListTags:

{% archiveList articles with type="page" limit="10" moduleId="1" categoryId="0" %}
    {# 循环遍历当前页的文章数据 #}
    {% for item in articles %}
        {# 这里是每篇文章的显示结构，例如标题、简介、发布日期等 #}
        <div class="article-item">
            <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
            <p>{{ item.Description|truncatechars:150 }}</p> {# 截取前150字作为简介 #}
            <div class="meta-info">
                <span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                <span>浏览量：{{ item.Views }}</span>
            </div>
            {% if item.Thumb %}
                <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumb">
            {% endif %}
        </div>
    {% empty %}
        {# 如果没有文章，显示此内容 #}
        <p>当前列表暂无文章。</p>
    {% endfor %}
{% endarchiveList %}

In the code above,articlesIt is a variable name that contains all the article data on the current page.moduleId="1"It is usually used to specify the article model (AnQiCMS default article model ID is 1),categoryId="0"Indicates that the parent category is not limited, if omitted, it will automatically match the articles of the current category.for item in articlesIt will cycle through these articles.{% empty %}It is a very practical syntax, whenarticlesThe list will be automatically displayed when it is empty{% empty %}and{% endfor %}The content between.

Second step: usepaginationThe label renders pagination navigation

InarchiveListAfter the label, you can usepaginationThe label to generate and display pagination navigation. This label will be based onarchiveListThe pagination information has been processed, automatically creating a pagination structure including the home page, previous page, next page, last page, and middle page number links.

paginationTags provide ashowThe parameter is used to control how many numeric page number links are displayed in the pagination navigation, for exampleshow="5"Displays the maximum of 5 page numbers around the current page.

The followingpaginationDetailed usage example of the tag:

`twig

{% pagination pages with show="5" %}
    {# 首先，您可以显示一些总体信息，例如总文章数、总页数和当前页码 #}
    <p>共 {{ pages.TotalItems }} 篇文章，{{ pages.TotalPages }} 页，当前第 {{ pages.CurrentPage }} 页。</p>

    <div class="page-links">
        {# 首页链接，通过 pages.FirstPage 获取 #}
        <a class="page-link {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{ pages.FirstPage.Link }}">首页</a>

        {# 上一页链接，仅当存在上一页时显示 #}
        {% if pages.PrevPage %}
            <a class="page-link" href="{{ pages.PrevPage.Link }}">上一页</a>
        {% endif %}

        {# 中间页码链接，这是通过 pages.Pages 数组循环生成的 #}
        {% for page in pages.Pages %}
            <a class="page-link {% if page.IsCurrent %}active{% endif %}" href="{{ page.Link }}">{{ page.Name }}</a>
        {% endfor %}

        {# 下一页链接，仅当存在下一页时显示 #}
        {% if pages.NextPage %}
            <a class="page-link" href="{{ pages.NextPage.Link }}">下一页</a>
        {% endif %}

        {# 尾页链接，通过 pages.LastPage 获取 #}
        <a class="page-link {% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{ pages.LastPage.Link }}">尾页</a>