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

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

Basic category management in AnQiCMS

In the AnQiCMS backend, you can create and organize your website categories under the 'Content Management' module's 'Document Category'.When creating a category, you can specify the content model it belongs to (e.g., articles, products, etc.), and set its parent category to build a clear hierarchical relationship.For example, you can have a primary category of 'News Center', and then create secondary categories such as 'Company Dynamics' and 'Industry Information'.This hierarchical structure is the foundation for multi-level nested display on the front-end.

Core: UnderstandingcategoryListtags

The core tool used to obtain category data in AnQiCMS templates iscategoryListTags. This tag is very flexible, and by adjusting its parameters, you can precisely control which categories to display and how they are displayed.

When usingcategoryListWhen using it, several key parameters need to be understood:

• moduleIdSpecify the content model category you want to retrieve. For example, if your article model ID is 1 and product model ID is 2, by settingmoduleId="1"you can only retrieve article categories.
• parentIdThis is the key parameter for implementing 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 canparentIdSet the category obtained in the loop.Idproperties.
• limit: Controls the number of categories returned.
• siteId: If you have enabled the multi-site feature, you can specify from which site to get the category data with this parameter.

IncategoryListTagsforIn 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.HasChildren：A boolean value indicating whether the current category contains subcategories, which is crucial for building dynamic nested menus.

Build the first-level category list

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 by settingparentId="0"to retrieve 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 %}

Implement multi-level nested category display

To implement multi-level nested category lists, you can utilizecategoryListthe nested properties of tags anditem.HasChildrenattributes. Inside the loop of each category, ifitem.HasChildrenresponse fortrue, call it againcategoryListTag to get its subcategories, andparentIdSet as the current category'sitem.Id. This allows you to delve deeper layer by layer, building any nested structure of arbitrary depth.

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

[en]`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 %}