How to display the category list in AnQiCMS and support multi-level nested display?

The classification navigation of the website is the foundation of user experience and information architecture.A clear, easy-to-navigate category list, especially one that can support multi-level nesting, can greatly improve the efficiency of users searching for information and optimize the search engine's understanding of the website structure.AnQiCMS provides powerful and flexible template tags, allowing you to easily meet this requirement.

Basic category management in AnQiCMS

On the AnQiCMS backend, you can create and organize your website categories under the "Content Management" module.When creating a category, you can specify the content model it belongs to (such as articles, products, etc.), and set its parent category to build a clear hierarchy.For example, you can have a top-level category such as "News Center", and then create secondary categories such as "Company News", "Industry Information", etc.This kind of hierarchical structure is the foundation for multi-level nested display in front-end.

Core: UnderstandingcategoryListTag

The core tool used to retrieve category data in AnQiCMS templates iscategoryListThe label is very flexible. By adjusting its parameters, you can precisely control which categories to display and how they are displayed.

While usingcategoryListWhen, several key parameters need to be understood:

• moduleId: Specify the category of the content model you want to retrieve. For example, if your article model ID is 1, and your product model ID is 2, by settingmoduleId="1"you can only retrieve article categories.
• parentIdThis is the key parameter for achieving multi-level nesting. When you set it to0it will return all top-level categories. If you want to get the subcategories of a specific category, you can setparentIdSet the category obtained in the loopIdProperty.
• limit: Controls the number of categories returned
• siteId: If you have enabled the multi-site feature, you can specify which site to get the category data from using this parameter

IncategoryListlabel'sforIn the loop, each category item (usually nameditem), will provide some useful properties, such as:

• item.Id: The unique identifier of the category.
• item.Title: The display name of the category.
• item.Link: The link address of the category page.
• item.HasChildrenA boolean value indicating whether the current category contains subcategories, which is crucial for building dynamic nested menus.

Build a list of top-level categories

The simplest application is to display all top-level categories, which usually constitutes the main navigation of your website. You can usemoduleIdto specify the content model, and setparentId="0"to get all top-level categories.

{% categoryList categories with moduleId="1" parentId="0" %}
    <ul>{# 这将是一个无序列表，包含所有顶级分类 #}
        {% for item in categories %}
            <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
        {% endfor %}
    </ul>
{% endcategoryList %}

to achieve multi-level nested category display

To implement a multi-level nested category list, you can utilizecategoryListthe nested properties of tagsitem.HasChildrenattributes. Within the loop of each category, ifitem.HasChildrenWithtrue, callcategoryListtag again to get its child categories, andparentIdSet to the current category ofitem.Id. This can be used to build nested structures of any depth.

Here is an example of a nested three-level classification code, you can add or reduce levels according to your actual needs:

`twig {% categoryList categories with moduleId=“1” parentId=“0” %}

<ul class="main-category-list">{# 一级分类列表 #}
    {% for item in categories %}
        <li>
            <a href="{{ item.Link }}">{{ item.Title }}</a>
            {% if item.HasChildren %}
                <ul class="sub-category-list">{# 二级分类列表 #}
                    {% categoryList subCategories with parentId=item.Id %}
                        {% for subItem in subCategories %}
                            <li>
                                <a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
                                {% if subItem.HasChildren %}
                                    <ul class="third-category-list">{# 三级分类列表 #}
                                        {% categoryList thirdCategories with parentId=subItem.Id %}
                                            {% for thirdItem in thirdCategories %}
                                                <li><a href="{{ thirdItem.Link }}">{{ thirdItem.Title }}</a></li>
                                            {% endfor %}
                                        {% endcategoryList %}
                                    </ul>
                                {% endif %}
                            </li>
                        {% endfor %}
                    {% endcategoryList %}