How to display the subcategory list under a specified category in AnQiCMS template?

When building a website with AnQiCMS, clearly organizing content and conveniently displaying it on the page is the key to enhancing user experience.Especially for content with multi-level classification structure, how to flexibly display the subcategory list under a specified category in the template is a need that many users may encounter.categoryListTags provide us with an elegant and efficient solution.

Understanding AnQiCMS classification structure

Before delving into templates, it is essential to understand how AnQiCMS manages categories.In AnQiCMS, each category belongs to a specific content model (such as article model, product model, etc.), and clear parent-child relationships can be established between categories, forming a multi-level nested tree structure.This means that a category can have its own subcategories, and these subcategories can also have further subcategories at a lower level, and so on.This structure provides the foundation for displaying subcategories under specified categories.

Core Tools:categoryListTag Explanation

To display the classification list in AnQiCMS template, we mainly use a powerful tag:categoryListThis tag allows us to retrieve classified data based on various conditions and display it in a list on the page.

categoryListThe common usage of the tag is like this:{% categoryList categories with moduleId="1" parentId="0" %} ... {% endcategoryList %}

Let's parse several key parameters:

• moduleIdThis is a very important parameter.Since AnQiCMS's categories are bound to content models, we need to specify the ID of the content model it belongs to when we want to get any category list.moduleId="1"may represent the article model, whilemoduleId="2"May represent the product model. You can find the corresponding ID by setting the content model on the back end.
• parentIdThis parameter is the key to controlling which level of category we obtain.
  • When set toparentId="0"When this is set, the tag will obtain the specifiedmoduleIdAll top-level categories under.
  • When set to a specific category ID (for exampleparentId="123"It will get all direct subcategories under the category with ID 123.
  • If you are on the category list page and want to get the sibling categories (brother categories) of the current category, you can useparentId="parent".

categoryListThe label inside will usually be accompanied by oneforA loop is used to traverse the obtained category data. In the loop, each category object (in our example isitemAll contain some useful properties, such as:

• item.IdThe unique ID of the category.
• item.Title: The name of the category.
• item.Link: The access link of the category.
• item.Description: The description of the category.
• item.ParentId: The ID of the parent category.
• item.HasChildrenAn English value, indicating whether the category has subcategories, which is very useful when building multi-level menus.
• item.IsCurrentAn English translation: A boolean value indicating whether the current loop category is the category of the current page, which can be used for highlighting.

Practice: Display the list of subcategories under the specified category

Now, let's look at a specific example to see how to display a list of child categories under a specified category in a template. Suppose we want to display the article model (moduleId="1"）Under all top-level categories and their second-level subcategories.

Firstly, we retrieve all top-level categories:

{# 获取文章模型下所有顶级分类 #}
{% categoryList topCategories with moduleId="1" parentId="0" %}
<nav class="main-category-nav">
    <ul>
        {% for category in topCategories %}
        <li class="{% if category.IsCurrent %}active{% endif %}">
            <a href="{{ category.Link }}">{{ category.Title }}</a>
            {# 检查当前分类是否有子分类 #}
            {% if category.HasChildren %}
            <ul class="sub-category-list">
                {# 获取当前顶级分类的直接子分类 #}
                {% categoryList subCategories with parentId=category.Id %}
                {% for subCategory in subCategories %}
                <li class="{% if subCategory.IsCurrent %}active{% endif %}">
                    <a href="{{ subCategory.Link }}">{{ subCategory.Title }}</a>
                </li>
                {% endfor %}
                {% endcategoryList %}
            </ul>
            {% endif %}
        </li>
        {% endfor %}
    </ul>
</nav>
{% endcategoryList %}

In the above code snippet, we first usecategoryListThe tag obtained all top-level categories under the article model and named them.topCategories。Then, we useforto traverse these top-level categories and generate a link for each category.

The key point is {% if category.HasChildren %}This judgment. It allows us to render the next level only when the current category indeed has subcategories.<ul>List. Inside thecategoryListtags, we willparentIdset the parameter to the current top-level category.category.IdSo that we can accurately obtain all the direct subcategories under this top-level category. Similarly, we traverse these subcategories again and generate links for them.

By this nestedcategoryListTags andforThe combination of loops allows us to flexibly display any level of subcategory lists in the AnQiCMS template.

Some practical tips and considerations

• Implementation of multi-level nestingIf your classification structure exceeds two levels, you only need to nest in the child category'sforwithin the loopif subCategory.HasChildrenJudgment andcategoryListtags, andparentIdsetsubCategory.Idto achieve multi-level depth of child category display.
• list limitIf the number of subcategories is too many, you can uselimitparameter to limit the number of categories displayed at each level, for examplelimit="10". You can even uselimit="2,10"To specify starting from the 2nd category and getting 10 categories, which is very practical in some display scenarios.
• Performance optimization：Although AnQiCMS has a high tag parsing efficiency, over-nesting or unrestrictedly obtaining a large amount of data in complex templates may still affect the page loading speed. Make reasonable use oflimitparameters withitem.HasChildrenPerform on-demand loading to effectively improve performance.
• Style and layoutThe above code only shows the basic HTML structure, you need to combine CSS to beautify and layout these category lists so that they match the overall design style of the website.
• Highlight of the current page:item.IsCurrentProperties can help you identify the category of the current page you are visiting, so that you can add a specific CSS class (such asactive), and highlight it visually.

The template system of AnQiCMS provides sufficient flexibility, allowing you to easily build various complex classification navigation and content display structures according to your actual needs. As long as you are familiar withcategoryListTags and parameters, displaying the list of subcategories under a specified category will become very simple.

---

Common Questions (FAQ)

Q1: How to display a list that only shows categories without subcategories (i.e., the bottom-level categories)?

A1：You can usecategoryListofforit inside the loopif not item.HasChildrento filter out categories without subcategories. This way, only the lowest-level categories will be displayed.

{% categoryList categories with moduleId="1" parentId="0" %}
    <ul>
        {% for category in categories %}
            {% if not category.HasChildren %} {# 只显示没有子分类的分类 #}
            <li><a href="{{ category.Link }}">{{ category.Title }}</a></li>
            {% endif %}
        {% endfor %}
    </ul>
{% endcategoryList %}

Q2：How can I get all categories under a certain content model, regardless of whether they are top-level or sub-levels?

A2：You can usecategoryListTagsall="true"parameters. Combined withmoduleIdIt will retrieve all categories under the specified model. In the loop,item.Spacerthe property can help you display the hierarchical relationship of categories, for example, by adding indentation before the name of the subcategory.

{% categoryList allModelCategories with moduleId="1" all="true" %}
    <ul>
        {% for category in allModelCategories %}
            <li><a href="{{ category.Link }}">{{ category.Spacer|safe }}{{ category.Title }}</a></li>
        {% endfor %}
    </ul>
{% endcategoryList %}

Q3：I am currently browsing a category page, how can I only display the direct subcategories under this category?

A3：When you are on the category page,categoryListTags are not specifiedparentIdIn such cases, it will automatically retrieve the direct child categories of the current category. So, you just need to use it as shown below:

{# 假设当前页面是某个分类详情页，会自动识别其ID #}
{% categoryList directSubCategories %}
    {% if directSubCategories %} {# 只有当存在子分类时才显示 #}
    <ul class="current-category-sub-list">
        {% for subCategory in directSubCategories %}
            <li class="{% if subCategory.IsCurrent %}active{% endif %}">
                <a href="{{ subCategory.Link }}">{{ subCategory.Title }}</a>
            </li>
        {% endfor %}
    </ul>
    {% else %}
    <p>当前分类没有直接子分类。</p>
    {% endif %}
{% endcategoryList %}