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

Calendar 👁️ 77

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

Related articles

How to implement user-friendly pagination navigation display for the article list?

The article list is the core display area of the website content, and its user experience directly affects the visitor's stay time and willingness to revisit.When the number of articles is large, a reasonable page navigation design is particularly important.AnQiCMS (AnQiCMS) provides powerful and flexible template tags to help us easily implement user-friendly article list pagination functions, making content management and display more efficient.

2025-11-08

How does AnQiCMS display the latest article list and its publication time on the front end?

In website operation, displaying the latest published content to visitors in a timely manner can not only effectively improve user experience but also enhance the activity of the website.AnQiCMS (AnQiCMS) provides an intuitive and powerful template tag feature, allowing you to easily display the latest article list and its publication time on the website front page. ### Understanding Anqi CMS Article Display Mechanism Anqi CMS uses template tags to call and display website data.

2025-11-08

How to accurately display the field data of a custom content model on the front-end page?

In AnQiCMS, we often need to create various types of content according to the actual needs of the website.AnQiCMS's powerful custom content model feature is designed to meet this flexibility.It allows us to define dedicated fields for different types of content (such as articles, products, cases, etc.), thus enabling more precise management and display of information.How can we accurately call and display these custom field data on the website's front page?

2025-11-08

How to customize the content display layout of the article detail page in AnQi CMS

AnQi CMS has excellent flexibility in content display, especially for article detail pages, it provides multi-level customization options, allowing us to finely control the layout of content display according to specific needs, whether it is for the entire model, specific categories, or an independent article.This not only involves adjustments in appearance, but also includes in-depth customization of the page content structure and information presentation.

2025-11-08

How to display the links to the previous and next articles at the bottom of the article detail page?

In website content operation, improving user reading experience is a key link.After a reader has finished browsing an excellent article, if they can immediately see a link to the next related or sequential article, it will undoubtedly greatly increase the likelihood that they will continue to stay on the website.This design not only optimizes the user experience, helps guide users to delve deeper into the website's content, but also effectively reduces the bounce rate and enhances the website's SEO performance, allowing search engines to better understand the structure of your website's content.

2025-11-08

How to aggregate and display a list of selected articles under multiple categories on a single page?

In website operation, we often encounter such needs: on the homepage or a special topic page, we can display selected articles from different categories, which can enrich the page content and guide users to discover more interesting information.AnQiCMS provides very flexible and powerful features, allowing us to easily achieve this goal without complex programming knowledge.

2025-11-08

How does AnQiCMS provide visitors with language switching options for content display?

In today's globally interconnected digital age, websites have become a basic need to provide content for users of different languages.No matter whether your business is aimed at the global market or simply wants to cover users in different dialect regions within the country, a website that supports multilingual switching can significantly improve user experience and brand influence.AnQiCMS (AnQiCMS) fully understands this need and provides an efficient and flexible solution to help your website seamlessly switch between multilingual content.

2025-11-08

How to customize the top navigation menu of a website and control its display?

The top navigation menu of the website is the first barrier for users to interact with content, and it directly affects users' understanding of the website structure and content.A well-designed, easy-to-operate navigation menu can significantly improve user experience and website professionalism.AnQiCMS (AnQiCMS) provides flexible and powerful features to help us easily customize and control the top navigation menu of the website to meet different design and operational needs.

2025-11-08