How to filter and display related article lists on the front page according to the specified category ID?

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

AnQi CMS with its efficient and flexible features makes content management and display easy.No matter whether you are operating an enterprise website, an industry information station, or a personal blog, you may encounter the need to display a list of articles based on a specific category.For example, display articles from a certain "Hot Recommendations" category on the homepage, or concentrate on specific "Product Cases" on a special topic page.Today, let's talk about how to accurately implement this feature in the front-end template of 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 'Content Management' menu under 'Document Category'.Here, you can clearly see all the categories created and their details.

Generally, each category name will have a numeric ID next to it, or it can also be found in the address bar when editing the categoryid=XSuch parameters, thisXThis is the category ID you need. For example, the ID of a category named 'Industry News' might be15Please note this number, we will use it in the template code later.

Step two: Select the appropriate template file for editing

Next, you need to decide where to display these article lists. Common scenarios include:

  • Category list pageIf you want to display articles under a category page (such as the 'Industry News' list page), you will usually edit the template file corresponding to that category. The default category list template path of Anqi CMS is{模型table}/list.htmlFor example, the article model would bearticle/list.htmlMore finely, 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 or other custom pageIf 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 directly edit these template files.

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

Third step: usearchiveListTags to retrieve article data

AnQi CMS provides powerful functionsarchiveListThe tag is specifically used to retrieve document lists. This tag allows you to filter and sort by various parameters.

The core parameter is to filter articles by category ID.categoryId.

Assuming 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 label:

  • articlesThis is a custom variable name, you can name it freely, it will carry the article data list obtained from the tag. InforWe can go through the looparticle(Here isarticlesTo access the details of each article, use the individual item ()on 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 Anqin CMS,1usually represents "article model",2represents the 'Product Model'. Make sure you enter the correct model ID, otherwise you may not be able to retrieve the data.
  • type="list": means we want to get a simple article list without pagination functionality. If you want the article list to be paginated, you need to set it astype="page", and work with it below the article listpaginationlabel usage
  • limit="10"Limit the number of articles displayed, here showing the latest 10 articles.
  • order="id desc"Specify the sorting method of the articles.id descRepresents sorting by article ID in descending order (usually meaning the most recently published articles are at the top). You can also useviews descto sort by reading views in descending order (popular articles at the top), orsort desc(sorted by