How to implement multi-level nested display of categories in the Anqi CMS?

The organization of website content is crucial for user experience and information retrieval efficiency.A clear, logically structured classification system can help visitors quickly find the information they need, and also lay a good foundation for the website's SEO.In the AnQi CMS, implementing the nested display of multi-level categories is a key element in building this efficient content architecture.It is not just a simple listing of categories, but also through the hierarchical relationship, making the content modular and systematic. Whether it is product display, article archive, or service introduction, it can be presented to users in a more intuitive way.

Understanding the classification mechanism of Anqi CMS

Auto CMS provides powerful and flexible category management features.In the background, you can perform operations under "Document Category" in the "Content Management" module.Here, each category is closely associated with a content model (such as an article model or product model), and the system supports creating multi-level subcategories for these categories.This means you can build a complete content tree from a broad category to a subcategory, and then to an even more detailed subclass.For example, a 'product' category can have 'electronic products', and further down are 'cell phones', 'computers', and so on. This structure is clear to users.

Core: UtilizecategoryListTagging to implement nested display

The core of implementing multi-level nested display is to make full use of the Anqi CMS template.categoryListTags. This tag is used to retrieve and display the category list, its strength lies in the ability to flexibly control the hierarchy of the retrieved categories through parameters.

We usually start by obtaining the top-level categories of a website, which are categories without parent categories.categoryListSet in the tags,parentId="0"These top-level categories are often the starting points of the website navigation bar or the main categories on the homepage.

Obtained the top-level category, the next step is how to display their subcategories. The CMS provides each category object with aIdProperties, this is the unique identifier for the category. When you want to get the subcategories of a category, you just need to specify the category'sIdPass tocategoryListTagsparentIdThe parameter is enough. So, every time we loop to a parent category, we can call it againcategoryListThe tag to get its direct child category, thus achieving the effect of layer-by-layer nesting.

To make the hierarchical relationship clearer in the code and to handle different cases such as whether a category has subcategories,categoryListEach category object returned by the tag also includes aHasChildrenProperties. This boolean value tells us whether the current category has subcategories. We can use it to decide whether to continue rendering the list of subcategories, for example, ifHasChildrenresponse fortrueHere, if it renders the child category; otherwise, it may only display the current category itself.

Here we use a simple three-level category nesting example to demonstrate:

{% categoryList categories with moduleId="1" parentId="0" %}
{# 这段代码将获取模型ID为1的所有顶级分类 #}
<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> {# 显示二级分类的链接和标题 #}
                    {% if inner1.HasChildren %} {# 判断当前二级分类是否有子分类 #}
                    <div>
                        {% categoryList subCategories2 with parentId=inner1.Id %} {# 获取当前二级分类的子分类 #}
                        <ul>
                            {% 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 %}

In this code, we first usecategoryListGottenmoduleIdAll top-level categories with the value of 1 (parentId="0"）。接着，在每个顶级分类的循环内部，我们通过{% if item.HasChildren %}判断它是否存在子分类。如果存在，就再次调用categoryList again, but this time weparentIdSet to the current top-level categoryId(parentId=item.IdThus, you can retrieve and render the second-level category.Similarly, for the second-level category, we can also judge and obtain its third-level category.By this recursive or nested calling method, you can display any depth of classification levels according to your actual needs.

Considerations in practical application

In practical operation, embedding the above code into your security CMS template file is the first step.通常，分类列表会放置在网站的导航区域、侧边栏或者内容列表页的筛选区域。{模型table}/list.htmlIf you need to customize a template for a specific category ID, you can also use{模型table}/list-{文档分类ID}.html.

The code provides a multi-level classification structure, but to make it aesthetically pleasing and easy to use on the front-end, it is also necessary to combine CSS styles to define the visual effects of different levels such as indentation, background, font, and possibly use JavaScript to implement some interactive effects, such as displaying the submenu on mouse hover and expanding/collapsing on click.Remember that the template code only provides the skeleton, and the beautiful 'outerwear' needs to be designed by you.

Also,