How to get the article list under a specified category and implement pagination in AnQiCMS?

In website content operation, we often need to display articles under specific categories and provide pagination functions for these lists to enhance user experience and website loading efficiency.The AnQiCMS (AnQiCMS) can easily meet this requirement with its flexible template engine and powerful tag system.

AnQiCMS's template system uses syntax similar to Django template engine, using double curly braces{{变量}}referencing variables, as well as single curly braces with a percentage sign{% 标签 %}Invoke tag. This makes the customization of content display very intuitive. To get the list of articles in a specified category and implement pagination, two core tags are mainly used:archiveListandpagination.

Core Tag Parsing

First, let's understand the two key tags required to achieve the goal:

  1. archiveListDocument list labelThis tag is the core to obtain document data such as articles, products, etc.It is very flexible and can filter and sort documents according to different parameters.archiveListPlaying the role of the data source.

    • categoryId：Used to specify which category of articles to retrieve. You can directly pass the category ID, for examplecategoryId="1". If you are on a category page, it is usually not necessary to specify explicitly,archiveListThe label will attempt to retrieve the category ID of the current page by default. If you need to retrieve articles from multiple categories, you can separate multiple category IDs with a comma.,Separate multiple category IDs with a comma.
    • moduleId：Specify the content model ID of the document, for example, article model (usually ID 1), product model (usually ID 2).This helps to accurately filter out the required type of documents.
    • type="page"This is a key parameter for implementing pagination.typesetpagewhenarchiveListIt will not only return the list of articles on the current page but also generate all the necessary data for pagination.paginationauto tag to use.
    • limit：Used to specify the number of articles displayed per page, for examplelimit="10"This means 10 articles are displayed per page.
    • order：Define the sorting method of the articles, common ones include sorting by the most recent publishedorder="id desc"or by view countorder="views desc".
    • In addition, there arechild（Whether to include articles in subcategories）、flag[Recommended attribute],q(Search keywords) and other parameters can be flexibly applied according to specific requirements.

  2. paginationPagination tabThis tag is responsible for generating page navigation. It will receivearchiveListGenerated pagination data and render it into user-friendly page link, including home page, previous page, next page and last page, etc.

    • show: Control the number of visible page numbers in pagination navigation, for exampleshow="5"The maximum number of page numbers displayed will be 5.

Implementation steps and example code

To collaborate these tags, it usually follows the following steps:

Step 1: Determine the Category ID and Model ID

In the "Content Management10，and it belongs to the "Article Model" (model ID is1), then you can use this information in the template.

Step 2: UsearchiveListTag to get article data

in your category list page template (for examplelist.htmlorarticle/list.html), you can usearchiveListuse the tag to retrieve article data.

{# 假设当前页面是分类列表页，分类ID将自动获取。
   如果需要指定特定分类，可设置 categoryId="你的分类ID"。
   moduleId通常为文章模型ID，默认为1。
   type="page" 开启分页功能，limit="10" 每页显示10篇文章。 #}
{% 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|truncatechars:100 }}</p> {# 截取文章描述前100个字符 #}
        </a>
        <div class="meta">
            <span>发布时间：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
            <span>浏览量：{{ item.Views }}</span>
            {# 可以在这里添加文章缩略图等 #}
            {% if item.Thumb %}
                <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumb">
            {% endif %}
        </div>
    </div>
    {% empty %}
    <p>该分类下暂无文章。</p>
    {% endfor %}
{% endarchiveList %}

In the above code, we defined a namedarchivesUse a variable to store the article list obtained.stampToDatetag to format timestamps into readable dates.truncatechars:100is a filter used to truncate article descriptions, keeping the page neat.

Third step: Integrate pagination navigation

NextarchiveListAfter the tag, we can usepaginationTag to display pagination navigation.

{# 分页导航区域 #}
<div class="pagination-container">
    {% 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 page_item in pages.Pages %}
        <li class="page-item {% if page_item.IsCurrent %}active{% endif %}">
            <a href="{{ page_item.Link }}">{{ page_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>
    <p class="pagination-info">总计 {{ pages.TotalItems }} 篇文章，共 {{ pages.TotalPages }} 页，当前第 {{ pages.CurrentPage }} 页。</p>
    {% endpagination %}
</div>

Here, we define a namedpagesto receivearchiveListTag to pass pagination information. By traversingpages.PagesCan output the middle page number and use.IsCurrentHighlight the current page with properties.FirstPage/PrevPage/NextPage/LastPageProvided convenience in navigation.

Complete example code

Combine the above two parts of code to achieve the list display and pagination function of specified category articles in the Aq CMS template.

`twig {# Article list area #} {% 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|truncatechars:100 }}</p>
    </a>
    <div class="meta">
        <span>发布时间：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
        <span>浏览量：{{ item.Views }}</span>
        {% if item.Thumb %}
            <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumb">
        {% endif %}
    </div>
</div>
{% empty %}
<p>该分类下暂无文章。</p>
{% endfor %}

{% endarchiveList %}

{# Pagination navigation area #}

{% pagination pages with show="5" %}
<ul>
    <li class="page