How to implement nested list display of multi-level categories in AnQiCMS templates?

The navigation structure of the website is the core of user experience, a clear and organized multi-level classification list can not only help users quickly find the content they need, but also effectively improve the website's SEO performance.In AnQiCMS, with its flexible template tag system, achieving intuitive and efficient nested list display of multi-level categories becomes straightforward.

Understand the AnQiCMS category structure

On the AnQiCMS backend management interface, you will find that the category function allows you to create categories with hierarchical relationships.This means you can set a main category (top-level category) and its subcategories under it for articles, products, or other content models, forming a tree structure.For example, a "product" model can have "electronic products" as a top-level category, with "mobile phones" and "computers" as secondary categories, and "mobile phones" can further have "Android mobile phones", "Apple mobile phones", and so on as third-level categories.This structure is passed in the templateparentIdThis parameter is used to associate and display.

Core:categoryListTag

The key to achieving multi-level nested list classification lies in the AnQiCMS provided.categoryListTemplate tag. This tag is used to retrieve and display category information and supports controlling the retrieval of child categories under a specified parent category by parameters. Combined with the template engine'sparentIdfunction.forLooping and conditional judgments, we can easily construct arbitrarily deep categorized nested lists.

While usingcategoryListWhen labeling, you need to pay attention to several important parameters:

• moduleId: Specify the content model category you want to retrieve.For example, if your article category belongs to article model with ID 1, and product category belongs to product model with ID 2, you need to specify it here.
• parentIdThis is the core of implementing multi-level classification.
  • When set to"0"At this time, it will retrieve all top-level categories.
  • When set to the ID of a specific category (for exampleparentId=item.IdIt will retrieve all subcategories under the category with this ID.
• HasChildren: In each category object obtained in the loop, there is aHasChildrenThe attribute is a boolean (true/false) value used to determine if the current category has child categories.This is very useful for deciding whether to continue to the next level of nesting.

Step-by-step implementation of nested list display of multi-level categories

Below, we will demonstrate how to implement the nested display of three-level categories in AnQiCMS template.This logic can be extended to more levels, just repeat the same pattern.

First, assume we have a content model ID of1article model and have set multi-level categories for it.

1. to get the top-level categories (first-level categories)

   We first useparentId="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 %}
   

2. Nested loop subcategory (second level category)

   Within the loop of the top-level category, we judgeitem.HasChildrento determine whether we need to get the subcategory. Ifitem.HasChildrenWithtrue, then call againcategoryListlabel, and the currentitem.IdasparentIdEnter to get the second-level category.

   {% categoryList categories with moduleId="1" parentId="0" %}
       <ul>
           {% for item in categories %}
           <li>
               <a href="{{ item.Link }}">{{item.Title}}</a>
               {% if item.HasChildren %} {# 判断是否有子分类 #}
               <div>
                   {% categoryList subCategories with parentId=item.Id %} {# 获取二级分类 #}
                   <ul>
                       {% for inner1 in subCategories %}
                       <li>
                           <a href="{{ inner1.Link }}">{{inner1.Title}}</a>
                           {# ... 这里将嵌套获取三级分类 ... #}
                       </li>
                       {% endfor %}
                   </ul>
                   {% endcategoryList %}
               </div>
               {% endif %}
           </li>
           {% endfor %}
       </ul>
   {% endcategoryList %}
   

3. Further nesting (third-level category and more)

   Continue the logic of the second step, we judge again inside the loop of the second-level categoryinner1.HasChildrenif it istrueCall againcategoryList, willinner1.IdasparentIdPass in to get the third-level classification. This pattern can be repeated indefinitely to meet any hierarchical depth required.

The code example for implementing a three-level nested list in a complete AnQiCMS template is as follows:

<nav class="main-navigation">
    {% categoryList categories with moduleId="1" parentId="0" %}
    {# 顶级分类（一级分类）列表 #}
    <ul>
        {% for item in categories %}
        <li class="category-level-1">
            <a href="{{ item.Link }}">{{item.Title}}</a>
            {% if item.HasChildren %} {# 如果当前分类有子分类 #}
            <div class="sub-menu-container">
                {% categoryList subCategories with parentId=item.Id %} {# 获取二级分类 #}
                {# 二级分类列表 #}
                <ul class="category-level-2">
                    {% for inner1 in subCategories %}
                    <li>
                        <a href="{{ inner1.Link }}">{{inner1.Title}}</a>
                        {% if inner1.HasChildren %} {# 如果二级分类有子分类 #}
                        <div class="sub-menu-container">
                            {% categoryList subCategories2 with parentId=inner1.Id %} {# 获取三级分类 #}
                            {# 三级分类列表 #}
                            <ul class="category-level-3">
                                {% for inner2 in subCategories2 %}
                                <li>
                                    <a href="{{ inner2.Link }}">{{inner2.Title}}</a>
                                </li>
                                {% endfor %}
                            </ul>
                            {% endcategoryList %}
                        </div>
                        {% endif %}
                    </li>
                    {% endfor %}
                </ul>
                {% endcategoryList %}
            </div>
            {% endif %}
        </li>
        {% endfor %}
    </ul>
    {% endcategoryList %}
</nav>

In the code above, we useditem/inner1/inner2Variables should be used to distinguish between categories of different levels. You can name them according to your actual situation.<ul>or<li>tagsclassProperties, in order to control styles through CSS, for example.category-level-1,category-level-2,category-level-3To distinguish between menu items of different levels.

Common Techniques and Precautions

• Control Display Level: If you only want to display two levels of categories, just delete the part of obtaining the third-level category from the above code. Throughitem.HasChildrenThe judgment, you can accurately control whether each category displays its subcategory list.
• Handling empty statesInforCan be used in the loop,{% empty %}Labels to handle the situation when the list is empty, for example, displaying prompts such as 'No categories' to optimize the user experience.
• Current active status: AnQiCMS category object (such asitem/inner1) usually containsIsCurrentA property used to determine whether the current category is the one being accessed by the user. You can use{% if item.IsCurrent %}active{% endif %}This logic adds a special CSS style to the currently active category to highlight it.

By this structured method, AnQiCMS allows you to flexibly build user interfaces that are both in line with content logic and aesthetically pleasing, thereby enhancing the overall navigation experience and content discoverability of the website.