How to implement multi-level category nesting display in Anqi CMS?

The organization of website content is crucial for user experience and information retrieval efficiency.A clear and logical classification system can help visitors quickly find the information they need, and also lay a good foundation for the website's SEO.In AnQi CMS, implementing nested display of multi-level categories is the key to 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 organized, 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

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

Core: utilizingcategoryListLabel implementation of nested display

The core of realizing multi-level classification nested display lies in making full use of the Anqi CMS template.categoryListThe tag is used to retrieve and display the category list. Its strength lies in its ability to flexibly control the hierarchical relationship of the categories obtained through parameters.

We usually start by obtaining the top-level categories of a website, which are categories without parent categories.categoryListIn the tags, by settingparentId="0"You can get the top-level categories under all model IDs. These top-level categories are often the starting points of the website navigation bar or the main categories on the homepage.

After obtaining the top-level category, the next step is to display their subcategories. Anqi CMS provides a category object with aIdProperty, this is the unique identifier of the category. When you want to get the subcategories of a category, you just need to take the category'sIdpass tocategoryListlabel'sparentIdParameters can be used. This way, every time we loop to a parent category, we can call it againcategoryListTag to get its direct subcategory, thus achieving a hierarchical nesting effect.

To make this hierarchical relationship clearer in the code and to handle different situations where there may or may not be subcategoriescategoryListEach category object returned by the tag also contains aHasChildrenProperty. 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, ifHasChildrenWithtrueIf, render the subcategory; 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 usecategoryListWe have obtainedmoduleIdFor all top-level categories with 1 (parentId="0"）。Next, within the loop of each top-level category, we check{% if item.HasChildren %}whether it has a subcategory. If it does, we call it again.categoryListagain, but this time we setparentIdthe current top-level category toId(parentId=item.IdThus, we can retrieve and render the second-level category. Similarly, for the second-level category, we can also judge and retrieve its third-level category.By this recursive or nested calling method, you can display any depth of classification hierarchy according to your actual needs.

Considerations in practical applications.

In actual operation, embedding the above code into your Anqi CMS template file is the first step.Generally, category lists are placed in the navigation area of the website, the sidebar, or the filtering area of the content list page.According to the template design convention of Anqi CMS, the template file of the category list page is usually{模型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 beautiful and easy to use on the front-end, it also needs to combine CSS styles to define the indentation, background, font, and other visual effects of different levels, as well as possibly need JavaScript to implement some interactive effects, such as displaying the submenu on mouse hover, expanding/collapsing on click, etc.Remember, the template code only provides the skeleton, and the beautiful 'outerwear' needs to be designed by yourself.

In addition,