How to loop through and output the article list in AnQiCMS template?

AnQiCMS provides a powerful and flexible template system for website content management, among which, looping through and outputting the article list is an indispensable core function for building a dynamic website.No matter if you need to display the latest articles, category lists, or implement advanced filtering and pagination, AnQiCMS's template tags can help you complete these tasks efficiently.

Core Function: UnderstandingarchiveListtags

In AnQiCMS templates, the key to obtaining and displaying the article list is to usearchiveListLabel. This label is a powerful data extraction tool, allowing you to filter, sort, and limit the output of articles based on various conditions.

archiveListThe basic syntax structure of the label is{% archiveList 变量名称 with 参数... %}...{% endarchiveList %}。You need to specify a variable name for the article list you get (for examplearchives)，the subsequentwithkeywords are used to pass various filtering parameters.

CommonarchiveListThe parameters include:

  • moduleIdSpecify the content model ID of the article you want to retrieve. For example, if you want to retrieve a list of ordinary articles, you would usually setmoduleId="1"(The default ID of the article model); if a product list is needed,moduleId="2".
  • categoryIdBased on the category ID of the article, a filter is applied. You can specify a single category ID, or use multiple IDs separated by commas, for examplecategoryId="1,3,5"Get articles from multiple categories. If you want to get articles from the current page category, it is usually not necessary to specify this parameter, the system will intelligently judge; but if you explicitly do not want to read the current category, it can be set tocategoryId="0".
  • limit：Control the number of articles displayed in the list. For examplelimit="10"Only 10 articles will be displayed. It also supportsoffsetmode, specifying the starting item and the number of items to retrieve by separating with commas, such aslimit="2,10"English: 表示从第 3 条文章开始获取 10 条。
  • typeEnglish: 定义列表的类型，这对于分页功能尤其重要。type="list"English: 将按照limitEnglish: 参数指定的数量直接输出列表；而type="page"It means you want to enable the pagination feature, which will be used with subsequent pagination tagspaginationUsed together.
  • order: Set the sorting rules for the articles. Common sorting methods include:order="id desc"（Sorted by ID in descending order, i.e., the most recent release）、order="views desc"（Sorted by view count in descending order, i.e., the most popular）、order="sort desc"（Sorted by custom sorting on the backend, the default value is）。
  • q：Used for keyword search. Whentype="page"Effective immediately, you can specify a search keyword to filter the article list, for exampleq="SEO优化". If the URL containsq=关键词query parameters, the system will also automatically recognize and apply them.
  • siteId: In a multi-site environment, if you need to retrieve data from other sites, you can do so by specifyingsiteIdto achieve.

Loop traversal and content output: Gradually implement the article list

When we go througharchiveListLabel successfully obtained the article dataset, and the next step is to use{% for ... in ... %}Loop through the labels and display these data one by one on the page.

假设我们希望在首页展示一个最新的文章列表，每篇文章包含标题、链接、简介、缩略图，并显示其所属分类和发布日期。以下是一个实现此功能的代码示例：

<div class="latest-articles">
    <h2>最新文章</h2>
    <ul>
        {% archiveList archives with moduleId="1" type="list" order="id desc" limit="10" %}
            {% for item in archives %}
            <li class="article-item">
                <a href="{{ item.Link }}" class="article-link">
                    {% if item.Thumb %}
                        <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumb">
                    {% endif %}
                    <div class="article-info">
                        <h3 class="article-title">{{ item.Title }}</h3>
                        <p class="article-description">{{ item.Description }}</p>
                        <div class="article-meta">
                            <span class="article-category">分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
                            <span class="article-date">发布于：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                            <span class="article-views">浏览量：{{ item.Views }}</span>
                        </div>
                    </div>
                </a>
            </li>
            {% empty %}
            <li class="no-content">
                目前还没有任何文章发布，敬请期待！
            </li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</div>

In this example:

  1. We first usearchiveListTag, set the article model (moduleId="1") under the latest 10 articles (order="id desc" limit="10") to assign.archivesa variable.
  2. Next,{% for item in archives %}The loop will iterate over thearchivesAssign each article in it, and assign the data of the current article toitema variable.
  3. In the loop, we can access the various properties of the article, such asitem.字段名the wayitem.Titleto get the title,item.LinkGet link,item.DescriptionGet the overview.
  4. item.Thumbprovided the thumbnail path of the article, we take it as<img>Tagssrcthe attribute, and combine{% if item.Thumb %}Perform judgment to avoid a placeholder image when there is no thumbnail.
  5. Article publish dateitem.CreatedTimeIt is a timestamp, we use{{ stampToDate(item.CreatedTime, "2006-01-02") }}辅助标签将其格式化为易读的日期字符串（AnQiCMS 使用 Go 语言的日期格式化标准，”2006-01-02” 是一个常用的格式化模板）。
  6. To obtain the name of the category to which the article belongs, we made use ofitem.CategoryId, and passed it as a parameter to{% categoryDetail with name="Title" id=item.CategoryId %} tags, so that the category name is displayed in the article list.
  7. Finally,{% empty %}Tags provide a graceful way to handle the case where the article list is empty, it will displayarchivesa preset prompt message when there is no content instead of a blank page.

Advanced Application: List Filtering and Pagination

For scenarios requiring more interactivity and data volume, AnQiCMS also provides a comprehensive solution.

If you want users to be able to browse multi-page articles instead of loading all the content at once, you canarchiveListoftypeparameter settingstype="page". At this point, you need additional cooperationpaginationtags to generate page navigation:

`twig {# 假设这是文章列表页模板 article/list.html #}

{% archiveList archives with moduleId="1" type="page" order="id desc" limit="10" %}
    {# 循环输出文章列表内容，结构与上面示例类似 #}
    {% for item in archives %}
        <li class="article-item">
            <a href="{{ item.Link }}" class="article-link">
                {% if item.Thumb %}
                    <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumb">
                {% endif %}
                <div class="article-info">
                    <h3 class="article-title">{{ item.Title }}</h3>
                    <p class="article-description">{{ item.Description }}</p>
                    <div class="article-meta">
                        <span class="article-category">分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
                        <span class="article-date">发布于：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                        <span class="article-views">浏览量：{{ item.Views }}</span>
                    </div>
                </div>
            </a>
        </li>
    {% empty %}
        <li class="no-content">
            目前还没有任何文章发布，敬请期待！
        </li>
    {% endfor %}
{% endarchiveList %}

{# 分页导航区域 #}
<div class="pagination-nav">
    {% pagination pages with show="5" %}
        <ul>
            <li class="page-item {% if pages.FirstPage.IsCurrent