How to retrieve the list of articles 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.AnQiCMS (AnQiCMS) with its flexible template engine and powerful tag system can easily meet this requirement.

AnQiCMS 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 the tag. This makes the customization of content display very intuitive. To obtain a list of articles in a specified category and implement pagination, the following two core tags will mainly be used:archiveListandpagination.

Core tag parsing

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

  1. archiveListDocument List TagsThis tag is the core to retrieve data of articles, products, and other documents.It is very flexible and can filter and sort documents according to different parameters.For retrieving the list of articles under a specified category and paginating, archiveListActing as the data source role.

    • categoryId: 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 tag will try to get the category ID of the current page by default. If you need to get articles from multiple categories, you can use a comma to separate multiple category IDs.,Separate multiple category IDs with a comma.
    • moduleIdSpecify 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. Whentypeis set topagethen,archiveListIt will not only return the list of articles on the current page, but also generate all the data required for pagination, includingpaginationtag usage
    • limit：Specify the number of articles displayed per page, for examplelimit="10"means 10 articles per page.
    • order：Define the sorting method of the articles, common ones include sorting by the most recent releaseorder="id desc"or by view countorder="views desc".
    • Additionally, there arechild（Whether to include subcategory articles）、flag(Recommended attribute),qParameters such as (search keywords) can be flexibly applied according to specific requirements.

  2. paginationPagination LabelThis 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 end page, etc.

    • show: Controls the number of visible page numbers in pagination navigation, for exampleshow="5"Display up to 5 page numbers at most.

Implementation steps and example code

To work together these tags, usually follow the following steps:

First step: Determine the category ID and model ID

In the AnQi CMS backend's 'Content Management' module, you can view the ID of each category as well as the ID of the content model. For example, if the ID of your 'News Dynamic' category is10And it belongs to the "Article Model" (model ID is1), then you can use this information in the template.

Second step: usearchiveListTags retrieve article data

On your category list page template (such aslist.htmlorarticle/list.htmlIn it, 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 namedarchivesto store the retrieved article list.stampToDatetag to format timestamps into readable dates.truncatechars:100is a filter used to truncate article descriptions to keep the page tidy.

Step 3: Integrate pagination navigation

ThenarchiveListAfter the tag, we can usepaginationThe tag 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 namedpagesThe variable to receivearchiveListTag to pass the pagination information. By traversingpages.PagesCan output the middle page number and utilizeIsCurrentHighlights the current page attribute.FirstPage/PrevPage/NextPage/LastPageProvides the convenience of navigation.

Complete example code

Combine the above two parts of code to be able to implement the list display and pagination function of specified category articles in the Anqi 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