how the `categoryList` tag implements nested hierarchical display of multi-level categories?

Good, as an experienced website operations expert, I am happy to delve deeply into the Anqi CMS for youcategoryListHow to implement nested classification display of tags and transform it into an article that is easy to understand and practical.

Security CMScategoryListLabel: Easily implement nested classification display to make the website structure clear and organized

In website operation, a clear classification system is crucial for user experience (UX) and search engine optimization (SEO).A well-structured website can help users quickly find the information they need, while also allowing search engines to better understand the hierarchy of the website's content, thereby improving rankings.categoryListLabel, allowing us to skillfully build complex and layered website classification structures.

Today, let's delve into how to make use ofcategoryListTag, elegantly implement nested display of multi-level classification.

1. UnderstandingcategoryListThe core function of the tag

First, let's reviewcategoryListThe basic role of tags. In Anqi CMS template design,categoryListThe tag is mainly used to obtain the category list under the specified content model (such as articles, products, etc.). Its basic usage form is usually like this:

{% categoryList categories with moduleId="1" parentId="0" %}
    <!-- 在这里遍历分类数据 -->
{% endcategoryList %}

There are two very critical parameters here:

• moduleId: Used to specify which content model category to retrieve. For example,"1"may represent the article model,"2"represents the product model. You need to determine the correct ID according to your backend settings.
• parentIdThis is the core to implement multi-level nested classification.
  • WhenparentId="0"At that time, it will get all top-level categories, i.e., categories without any parent categories.
  • WhenparentIdWhen set to a specific category ID, it will retrieve all direct subcategories under that ID.
  • You can set it when you want to get the sibling categories of the current category in the category list page.parentId="parent".

BycategoryListLabel data obtained from classification, which is usually returned as an array object namedcategories(or a variable name you define)forLoop to traverse this array and access the details of each category, such asitem.Id(Category ID),item.Title(Category name),item.Link(category links) etc. Among them,item.HasChildrenThis field is particularly important, as it helps us determine whether the current category has a subcategory, thereby deciding whether to continue nesting display.

Level two: Implementing multi-level category nesting: step-by-step template construction

To implement nested display of multi-level categories, we usually adopt the strategy of 'outer loop to get parent level, inner loop to get child level'. Below, we will illustrate with an example of a three-level category:

1. Get the top-level category

Firstly, we start from the top level to get all the first-level categories. This is achieved by settingparentId="0"to achieve:

{% categoryList topCategories with moduleId="1" parentId="0" %}
    <ul class="level-1-categories">
        {% for item in topCategories %}
            <li class="category-item-1">
                <a href="{{ item.Link }}">{{ item.Title }}</a>
                <!-- 这里将是嵌套二级分类的地方 -->
            </li>
        {% endfor %}
    </ul>
{% endcategoryList %}

In the code above,topCategoriesThe variable contains all the first-level categories, and we traverse them to generate a link for each category.

2. Nested retrieval of second-level categories

Following that, while traversing the first-level categories,forWithin the loop, we can use it againcategoryListtags to get the subcategories of the current top-level category. At this point,parentIdthe parameter should be set to the current top-level category'sId, that isitem.Id:

{% categoryList topCategories with moduleId="1" parentId="0" %}
    <ul class="level-1-categories">
        {% for item in topCategories %}
            <li class="category-item-1">
                <a href="{{ item.Link }}">{{ item.Title }}</a>
                {% if item.HasChildren %} <!-- 判断当前分类是否有子分类 -->
                    <ul class="level-2-categories">
                        {% categoryList subCategories with parentId=item.Id %} <!-- 获取当前一级分类的子分类 -->
                            {% for inner1 in subCategories %}
                                <li class="category-item-2">
                                    <a href="{{ inner1.Link }}">{{ inner1.Title }}</a>
                                    <!-- 这里将是嵌套三级分类的地方 -->
                                </li>
                            {% endfor %}
                        {% endcategoryList %}
                    </ul>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endcategoryList %}

You can see, by calling the loop again in the parent categorycategoryListand the parent category'sIdpass toparentIdthen we have successfully retrieved and displayed the second-level category.{% if item.HasChildren %}The judgment makes our code more robust, avoiding the generation of empty items under items without subcategories.<ul>.

3. Continue to nest to get three levels and more.

As such, if you need to display a third-level category, simply repeat the above steps within the loop of the second-level category, and setparentIdto the current second-level category'sId(i.e.),inner1.Id):

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

<ul class="level-1-categories">
    {% for item in topCategories %}
        <li class="category-item-1">
            <a href="{{ item.Link }}">{{item.Title}}</a>
            {% if item.HasChildren %}
                <ul class="level-2-categories">
                    {% categoryList subCategories with parentId=item.Id %}
                        {% for inner1 in subCategories %}
                            <li class="category-item-2">
                                <a href="{{ inner1.Link }}">{{inner1.Title}}</a>
                                {% if inner1.Has