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 dynamic websites.No matter whether you need to display the latest articles, category lists, or implement advanced filtering and pagination, AnQiCMS template tags can help you complete tasks efficiently.

Core function: understandarchiveListTag

The key to obtaining and displaying the article list in the AnQiCMS template lies in usingarchiveListThe tag is a powerful data extraction tool that allows you to filter, sort, and limit the output of articles based on various conditions.

archiveListThe basic syntax structure of the tag is{% archiveList 变量名称 with 参数... %}...{% endarchiveList %}. You need to specify a variable name for the list of articles you have obtained (for examplearchives), followed bywithkeywords are used to pass various filtering parameters.

CommonarchiveListThe parameters include:

  • moduleId: Specify the content model ID of the article you want to retrieve. For example, if you want to get a list of ordinary articles, you would usually setmoduleId="1"(The default ID of the article model); it may be for a product listmoduleId="2".
  • categoryId: Filter by the category ID of the article. You can specify a single category ID, or use multiple IDs separated by commas, for examplecategoryId="1,3,5"To get articles from multiple categories. If you want to get articles from the current page category, usually you do not need to specify this parameter, the system will intelligently judge; but if you explicitly do not want to read the current category, you can set it tocategoryId="0".
  • limit: Controls the number of articles displayed. For examplelimit="10"It will only display 10 articles. It also supportsoffsetmode, specifying the starting and number of articles to retrieve by separating with commas, such aslimit="2,10"Indicates fetching 10 items starting from the 3rd article.
  • type: Defines the type of the list, which is particularly important for pagination functionality.type="list"Will be sorted according tolimitThe number of items specified by the parameter will be output directly; whereastype="page"It means you want to enable the pagination feature, which will be followed by the 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 views in descending order, i.e., the most popular),order="sort desc"(Sorted by custom sorting on the backend, the default value).
  • q: Used for keyword search. Whentype="page"生效，可以指定一个搜索关键词来过滤文章列表，例如q="SEO优化"。如果 URL 中包含q=关键词的查询参数，系统也会自动识别并应用。
  • siteIdIn a multi-site environment, if you need to retrieve data from other sites, you can specifysiteIdto achieve.

Loop traversal and content output: Gradually implement the article list

When we go througharchiveListAfter the tag successfully retrieves the article data set, the next step is to use{% for ... in ... %}Loop through the tags and display these data one by one on the page.

Assuming we want to display the latest article list on the homepage, each article includes a title, link, description, thumbnail, and shows its category and publish date. Here is an example code to implement this function:

<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 usearchiveListLabel, set the article model (moduleId="1") under the latest 10 articles (order="id desc" limit="10") assign toarchivesVariable.
  2. Then,{% for item in archives %}The loop will iterate overarchiveseach article, and assign the current article's data toitemVariable.
  3. Within the loop, we can access the various properties of the article byitem.字段名for exampleitem.TitleGet the title,item.LinkGet the link,item.DescriptionGet an overview.
  4. item.Thumbthe thumbnail path provided for the article, we use it as<img>label'ssrcAttribute, and combine{% if item.Thumb %}Make a judgment to avoid a placeholder image appearing when there is no thumbnail.
  5. Article publish dateitem.CreatedTimeIt is a timestamp, we use{{ stampToDate(item.CreatedTime, "2006-01-02") }}The label formats it into a readable date string (AnQiCMS uses the Go language date formatting standard, '2006-01-02' is a commonly used format template).
  6. To obtain the name of the category to which the article belongs, we utilizeditem.CategoryIdand passed it as a parameter to{% categoryDetail with name="Title" id=item.CategoryId %}the tag, 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 willarchivesdisplay a preset 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 canarchiveListoftypethe parameter totype="page". At this point, you need additional coordinationpaginationtags to generate pagination navigation:

This is a template for the article list page 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