How to implement pagination for article lists in AnQiCMS templates?

Good, as an experienced website operations expert, I am well aware that implementing pagination for the article list in AnQiCMS can not only improve user experience and make content browsing more smooth, but also help with search engine optimization, allowing the website content to be indexed better.Next, I will combine the template mechanism of AnQiCMS and explain in detail how to easily realize this function.

Implement the pagination display function of the article list in the AnQiCMS template

Today with rich website content, how to efficiently display a large number of articles and ensure that users can browse conveniently is a challenge that every website operator needs to face.AnQiCMS as an enterprise-level content management system provides powerful and flexible template functions, making it simple and intuitive to implement pagination for article lists.By reasonably utilizing the built-in tags of the system, you can easily add pagination navigation to your article list, thereby optimizing the user experience and enhancing the overall professionalism of the website.

Understand the template mechanism of AnQiCMS

AnQiCMS's template system adopts syntax similar to the Django template engine, which makes template writing both powerful and easy to learn. In the template file, we mainly operate data and control logic through two methods:

  • Variable: Using double curly braces{{变量名}}to output data.
  • TagUse single curly braces and percentages{% 标签名 参数 %}to perform logical operations, such as loops, conditional judgments, and calling specific functions.

All template files are stored in/templatethe directory, and.htmlend. For article list pages, it is usually used such as{模型table}/list.htmlor{模型table}/list-{分类id}.htmlSuch naming conventions. Understanding these basic rules will help us more effectively implement the pagination feature in subsequent operations.

Core Function: Article list tag (archiveList) and pagination tag (pagination)

AnQiCMS provides us with two key template tags for building article lists and pagination functionality:

  1. archiveListTagThis tag is used to retrieve the list of articles from the database. To implement pagination, we need to pay special attention to its two parameters:

    • type="page"This is the core to enable pagination whentypeis set to"page"then,archiveListIt will not only return the article data of the current page, but also prepare all the information needed for pagination, such aspaginationlabel usage
    • limitThis parameter is used to specify the number of articles displayed per page, for examplelimit="10"means 10 articles per page.

  2. paginationTagThis tag is used to generate the pagination navigation links on the front-end. It accepts a pagination object prepared byarchiveLista tag (usually namedpages），and generate the "Previous page", "Next page", page number" and other navigation elements according to the data."}paginationThe tag supports an important parameter:

    • showThis parameter is used to control the number of page numbers displayed in the pagination navigation, for exampleshow="5"It means that up to 5 consecutive page number links are displayed.

Gradually implement the pagination function

Now, let's implement the pagination display of the article list step by step in the AnQiCMS template through specific code examples.

Suppose we want toarticle/list.htmlDisplay the article list and add pagination on (or any article list page).

Step 1: Obtain the article list data

First, we need to use the template.archiveListtags to obtain the article list. Remember to enable pagination,typeThe parameter must be set to"page".

{# 在模板文件的适当位置，通常是内容区域的顶部或中间 #}
{% archiveList archives with type="page" limit="10" %}
    {# 使用for循环遍历每一篇文章 #}
    {% for item in archives %}
    <div class="article-item">
        <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
        <p class="description">{{item.Description}}</p>
        <div class="meta">
            <span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
            <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
            <span>浏览量：{{item.Views}}</span>
        </div>
        {% if item.Thumb %}
        <a href="{{item.Link}}">
            <img class="thumbnail" alt="{{item.Title}}" src="{{item.Thumb}}">
        </a>
        {% endif %}
    </div>
    {% empty %}
    <p>抱歉，当前分类下还没有任何文章。</p>
    {% endfor %}
{% endarchiveList %}

In this code block:

  • We pass{% archiveList archives with type="page" limit="10" %}Retrieve article data and name itarchivesDisplay 10 articles per page.
  • {% for item in archives %}Loop through the articles obtained and displayed the article title, description, category, publish date, and page views information.
  • {% empty %}the block will bearchivesDisplay a prompt when empty, which is a good user experience practice.
  • {{stampToDate(item.CreatedTime, "2006-01-02")}}Demonstrates how to usestampToDateTags format the article's Unix timestamp into a readable date.

Second step: Add pagination navigation

After the article list is rendered, we need to add pagination navigation next.archiveListlabel's{% endarchiveList %}After that, use it immediatelypagination.

{# 紧接着上面的 archiveList 标签之后 #}
{% archiveList archives with type="page" limit="10" %}
    {# ... 文章列表渲染代码 ... #}
{% endarchiveList %}

{# 分页导航区域 #}
<div class="pagination-nav">
    {% 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 this code block:

  • We use{% pagination pages with show="5" %}To generate the pagination navigation.pagesIsarchiveListThe pagination data object passed from the tag inside,show="5"this means that up to 5 page number buttons are displayed.
  • pagesObjects provide rich properties such asTotalItems(Total number of articles),TotalPages(Total number of pages),CurrentPage(current page), as well asFirstPage/PrevPage/NextPage/LastPageand other page objects, each page object containsLink(Link) andName(display name).
  • pages.Pagesis an array containing all visible page numbers, we traverse it to display specific page numbers.forto display specific page numbers.
  • item.IsCurrentIs a boolean value used to determine whether the current page number is the active page, making it easy for you to add a highlight style through CSS.

Merge these two sections of code into your article list template, and a feature-complete, user-friendly paginated article list will appear.

Points to note

  • Template File Location: Make sure your list template file (such asarticle/list.htmlIt is located in the correct position under the AnQiCMS template directory.
  • type="page"Indispensable: If you forget toarchiveListSet in the labeltype="page",paginationThe label cannot retrieve the correct pagination data, causing the pagination navigation to not display or display incorrectly.
  • CSS style: The above code only provides the HTML structure. To make the pagination navigation look beautiful, you need to add the corresponding CSS styles according to your website design..pagination-navand.page-itemAdd the corresponding CSS styles to the elements such as
  • Custom quantity: You can adjust according to your actual needsarchiveListoflimitParameters (number of articles per page) andpaginationofshowParameters (display page)