How to filter and display the list of related articles according to the specified category ID on the front end?

In the AnQi CMS, it's very simple to filter and display the list of related articles on the front end according to the category ID!

The AutoCMS is characterized by its efficiency and flexibility, making content management and presentation easy.No matter if you are running an enterprise website, an industry information station, or a personal blog, you may encounter the need to display a list of articles based on specific categories.For example, display articles from a certain "Hot RecommendationToday, let's talk about how to accurately implement this feature in the front-end template of the Anqi CMS.

Step 1: Find the category ID you need

To filter articles, you first need to know which category you want to filter.In the Anqi CMS backend, find the "Document Category" under the "Content Management" menu.Here, you can clearly see all the categories created and their detailed information.

Such parameters, thisid=Xsuch parameters, thisXThis is the category ID you need. For example, the ID of a category named 'Industry News' might be15. Please note this number, as we will use it in the template code later.

第二步：选择合适的模板文件进行编辑

接下来，您需要决定在哪里显示这些文章列表。常见的场景有：

• Category list page：If you want to display articles under a category page (such as the "Industry News" list page), you usually edit the corresponding template file for that category. The default category list template path in Anqi CMS is{模型table}/list.htmlFor example, the article model would bearticle/list.htmlMore specifically, you can create custom templates for specific categories, such asarticle/list-15.html(15 is the category ID), so only the category with ID 15 will use this template.
• Home page of the website or other custom pages：If you wish to display articles from a specific category on the homepage or a custom page (such asindex/index.htmlorpage/about.html)，then you can simply edit these template files.

The template files of AnQi CMS use a syntax similar to Django, with a suffix of.htmlstored in/templateThe directory. You can directly edit online in the "Template Design" section in the background, or download it to your local machine using an FTP tool for editing and then upload it back.

Step 3: UsearchiveListtags to retrieve article data

Auto CMS provides powerfularchiveListtags, specifically used to retrieve document lists. This tag allows you to filter and sort by various parameters.

To filter articles by category ID, the core parameter iscategoryId.

Suppose we want to display articles with ID15Under the "Industry News" category, and we want to display 10 articles:

{# 使用 archiveList 标签获取文章数据，并指定 categoryId 为 15 #}
{% archiveList articles with categoryId="15" moduleId="1" type="list" limit="10" order="id desc" %}
    {# 接着，通过 for 循环遍历每一篇文章 #}
    {% for article in articles %}
    <div class="article-item">
        <h3><a href="{{ article.Link }}">{{ article.Title }}</a></h3>
        {% if article.Thumb %}
        <div class="article-thumb">
            <img src="{{ article.Thumb }}" alt="{{ article.Title }}">
        </div>
        {% endif %}
        <p class="article-description">{{ article.Description }}</p>
        <div class="article-meta">
            <span>发布时间：{{ stampToDate(article.CreatedTime, "2006年01月02日") }}</span>
            <span>阅读量：{{ article.Views }}</span>
            {# 如果需要显示文章所属分类的名称，可以使用 categoryDetail #}
            <span>分类：{% categoryDetail with name="Title" id=article.CategoryId %}</span>
        </div>
    </div>
    {% empty %}
        <p>当前分类下暂时没有文章。</p>
    {% endfor %}
{% endarchiveList %}

Let's take a detailed look at several key parameters in this tag:

• articlesThis is a custom variable name, you can name it freely, and it will carry the list of article data obtained from the tags.forIn the loop, we can go througharticle(Here isarticlesTo access the detailed information of each article, use the single element) in the list.
• categoryId="15"This is the key parameter we use to specify the category ID. You can replace it with the actual category ID you want to filter.
• moduleId="1"This parameter is used to specify the content model. In AnQi CMS,1usually represents the "article model",2Represents 'Product Model'. Ensure you enter the correct model ID; otherwise, you may not be able to retrieve the data.
• type="list"：We want to get a simple list of articles without pagination. If you want the article list to be paginated, you need to set ittype="page"，and combine it with the article list belowpaginationUse the label.
• limit="10"：Limit the number of articles displayed here, which is the latest 10 articles displayed.
• order="id desc"：Specify the sorting method of the articles.id descRepresenting sorted by article ID in descending order (usually meaning the most recently published articles are at the top). You can also useviews descto sort by the number of views in descending order (popular articles at the top), orsort desc(sorted by