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 desired content but also effectively improve the website's SEO performance.In AnQiCMS, with its flexible template tag system, achieving the intuitive and efficient display of nested lists for multi-level classification becomes straightforward.

Understanding AnQiCMS classification structure

In AnQiCMS backend management interface, you will find that the category feature allows you to create categories with hierarchical relationships.This means you can set a main category (top-level category) and its subcategories for articles, products, or other content models, forming a hierarchical structure.For example, under a "productparentIdAssociate and display with such parameters.

Core:categoryListtags

The key to implementing multi-level nested list classification lies in the classification provided by AnQiCMScategoryListtemplate tags. This tag is specifically used to obtain and display classification information, and supports the use ofparentIdParameters to control the retrieval of child categories under a specified parent category. Combined with the template engine'sforLoop and conditional judgment, we can easily construct a nested category list of any depth.

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

  • moduleId: Specify which content model category you want to retrieve.For example, if your article category belongs to the article model with ID 1, and the product category belongs to the product model with ID 2, you will need to specify it here.
  • parentId: This is the core of implementing multi-level classification.
    • When set to"0"When it comes to it, it will retrieve all top-level categories.
    • When set to the ID of a specific category (for exampleparentId=item.Id)，it will retrieve all subcategories under that ID category.
  • HasChildren: There is one in each category object retrieved in the loop,HasChildrenThe property is a boolean value (true/false) used to determine if the current category has subcategories.This is very useful for deciding whether to proceed with the next level of nesting.

Step-by-step implementation of nested list display for multi-level classification.

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

Firstly, assume we have a content model with an ID of1and have set up multi-level classification for it.

  1. Get top-level category (first-level category)

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

  2. Nested loop subcategory (second-level category)

    Inside the loop of the top-level category, we judge throughitem.HasChildrenTo decide whether to retrieve its subcategory. Ifitem.HasChildrenresponse fortrue，then call againcategoryListlabel, and set the currentitem.IdasparentIdpassed in 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, within the loop of the second-level category, we judge againinner1.HasChildrenif it istruethen continue to callcategoryList,inner1.IdasparentIdEnter to get the third-level classification. This pattern can be repeated infinitely to meet any level depth you need.

Summing up the above steps, the following is an example of code to implement a nested list of three-level categories in a complete AnQiCMS template:

<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 above code, we useditem/inner1/inner2Using variable names to distinguish different levels of classification objects. You can name attributes according to actual situations.<ul>or<li>Label addclassProperties, so that styles can be controlled through CSS, for example.category-level-1,category-level-2,category-level-3To distinguish different levels of menu items.

Common Tips and Precautions

  • Control Display HierarchyIf you only want to display two levels of categories, just delete the part that gets the third-level categories in the above code. Byitem.HasChildrenThe judgment, you can precisely control whether each category displays its subcategory list.
  • Handling empty state: InforIn the loop, you can use{% empty %}Labels to handle the situation when the list is empty, such as displaying prompts like 'No categories' to optimize the user experience.
  • Current active status: AnQiCMS category object (such asitem/inner1English usually containsIsCurrentproperty, 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.

Through this structured approach, AnQiCMS allows you to flexibly build user interfaces that are both logical in content and aesthetically pleasing, thereby enhancing the overall navigation experience and content discoverability of the website.