Build a clear and organized website navigation in AnQiCMS, especially when handling multi-level categories, is the key to improving user experience and website accessibility.categoryListLabels are born for this, they provide powerful functions to help us flexibly display the hierarchical structure of categories and make refined nested calls.

UnderstandingcategoryListThe basics of labels

categoryListLabels are a core component of the AnQiCMS template engine, used to retrieve the list of article or product categories from the background.Its basic usage is simple and clear, but by combining with different parameters, it can achieve extremely rich display effects.

The typical usage is as follows:

{% categoryList categories with moduleId="1" parentId="0" %}
    {# 在这里循环输出分类信息 #}
{% endcategoryList %}

Here are some key parameters:

  • moduleIdThis parameter is very important, it specifies which content model (such as article model or product model) under which you want to get the category.AnQiCMS supports custom content models, each model has its own classification system.
  • parentId: This is the core parameter for controlling the display of classification levels.
    • When set toparentId="0"When, it will retrieve the specifiedmoduleIdAll top-level categories under.
    • When you are in a loop and want to get the subcategories of the current category, you can dynamically.parentIdsetitem.Idwhere,itemIt is the category object in the current loop.
  • limit: It is used to limit the number of displayed categories, for example,limit="10"只会显示10条分类。
  • siteId: 在多站点管理模式下，如果你需要调用其他站点的数据，可以通过这个参数指定站点ID。

In{% for item in categories %}In the loop, we can access the properties of each category, such as:

  • item.Id: Category ID
  • item.Title: Category Name
  • item.Link: Category Link
  • item.ParentId: Parent Category ID
  • item.HasChildren: An English boolean value indicating whether the category has subcategories, which is very useful when performing nested judgments.
  • item.Spacer: A prefix used to visually create hierarchical indentation, convenient for displaying tree structures.

Implement hierarchical display and nested invocation of multi-level classification

The charm of hierarchical classification lies in its ability to present complex website structures in a clear manner. In AnQiCMS, this is achieved through巧妙地在categoryListnested within tagscategoryListLabel, we can easily build any depth of classification levels.

The core idea is:Using an outer layercategoryListLabel to get the top-level classification, and then use it nested within the loopcategoryListLabel, and the inner tagsparentIdSet the parameters to the outer categoryId.In this way, the inner tags will automatically get the subcategories of the outer category.

Let's see an example of a three-level category nesting call implementation:

{# 外层标签：获取所有顶级分类，moduleId="1"代表文章模型 #}
{% categoryList topCategories with moduleId="1" parentId="0" %}
<ul>
    {% for item in topCategories %}
    <li>
        {# 显示一级分类 #}
        <a href="{{ item.Link }}">{{ item.Title }}</a>

        {# 判断当前一级分类是否有子分类，如果有，则继续嵌套显示 #}
        {% if item.HasChildren %}
        <div>
            {# 内层标签1：获取当前一级分类的子分类。parentId=item.Id 是关键 #}
            {% categoryList subCategories1 with parentId=item.Id %}
            <ul>
                {% for inner1 in subCategories1 %}
                <li>
                    {# 显示二级分类 #}
                    <a href="{{ inner1.Link }}">{{ inner1.Title }}</a>

                    {# 判断当前二级分类是否有子分类，如果有，则继续嵌套显示 #}
                    {% if inner1.HasChildren %}
                    <div>
                        {# 内层标签2：获取当前二级分类的子分类 #}
                        {% 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 example:

  1. firstcategoryList(Variable nametopCategories) to the same port of the AnQiCMS application instance (the default is usuallyparentId="0"Get all top-level categories.
  2. IntopCategoriesInside the loop, we use{% if item.HasChildren %}to determine if the current first-level category has subcategories.
  3. If there is a subcategory, the second one is nestedcategoryList(Variable namesubCategories1），at this timeparentIdis dynamically set toitem.Id，which is the ID of the current first-level category, thus obtaining its direct subcategories.
  4. Similarly,subCategories1inside the loop, we judge againinner1.HasChildrenIf it exists, continue to nest the third level.categoryList(Variable namesubCategories2)parentIdIt is set to dynamic again.inner1.IdTo get the subcategories of the second-level category.

In this way, we can flexibly construct a clear and scalable classification navigation structure in the template, which can easily cope with the main navigation, sidebar navigation, or website map of the website.

Actual Application and Advanced Techniques

In addition to pure classification hierarchy display,categoryListit can also be combined witharchiveListand other tags to achieve more powerful functions:

  1. Display document list under classificationIn traversing categories, we may wish to display some articles or products under the category at the same time.

    {% categoryList categories with moduleId="1" parentId="0" %}
<div>
    {% for item in categories %}
    <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
    <ul>
        {# 在每个分类下，调用该分类下的文档列表 #}
        {% archiveList archives with type="list" categoryId=item.Id limit="6" %}
        {% for archive in archives %}
        <li><a href="{{ archive.Link }}">{{ archive.Title }}</a></li>
        {% empty %}
        <li>暂无文档</li>
        {% endfor %}
        {% endarchiveList %}
    </ul>
    {% endfor %}
</div>
{% endcategoryList %}

    This example shows how to get the top-level categories in a loop and display the latest 6 documents under each category, greatly enriching the content display on the page.

  2. UtilizeHasChildrenField optimization display: When building navigation, you can intelligently decide whether to display subcategories or directly display documents under the current category.HasChildrenField intelligently decide whether to display subcategories or directly display documents under the current category.

    {% categoryList productCategories with moduleId="2" parentId="0" %}
<nav>
    {% for item in productCategories %}
    <a href="{{ item.Link }}">{{ item.Title }}</a>
    <ul class="sub-nav">
        {% if item.HasChildren %}
            {# 如果有子分类，则显示子分类 #}
            {% categoryList subCategories with parentId=item.Id %}
            {% for inner in subCategories %}
            <li><a href="{{ inner.Link }}">{{ inner.Title }}</a></li>
            {% endfor %}
            {% endcategoryList %}
        {% else %}
            {# 如果没有子分类，则显示该分类下的产品文档 #}
            {% archiveList products with type="list" categoryId=item.Id limit="8" %}
            {% for inner in products %}
            <li><a href="{{ inner.Link }}">{{ inner.Title }}</a></li>
            {% endfor %}
            {% endarchiveList %}
        {% endif %}
    </ul>
    {% endfor %}
</nav>
{% endcategoryList %}

    This method makes navigation more dynamic, able to automatically adjust the displayed content according to the changes in the classification structure.

By using the above method, you can fully utilize AnQiCMScategoryListThe powerful features of tags, building a multi-level classification navigation that is both beautiful and practical, providing an excellent browsing experience for your website visitors.

Common Questions (FAQ)

  1. How to limit the depth of multi-level classification display?You can control nestingcategoryListThe number of layers of tags to limit the display depth. For example, if you only need to display three levels of categories, like the first example in this article, then you only need to nest two layerscategoryListLabel. If there is no subcategory under a certain category level,item.HasChildrenwill befalsethe inner loop will naturally not be executed, thus avoiding the display of empty levels.

  2. Can I get the parent category information of the category in the category loop?Get it directly in the loop of the child categoryDirect parentAll the information of the category can be obtained throughitem.ParentId字段由自动完成的，但若要获取父级的具体TitleorLink，您需要结合categoryDetailTags, such as{% categoryDetail parentCategory with name="Title" id=item.ParentId %}{{parentCategory}}.

  3. 如果我只想显示特定数量的顶级分类，但其子分类全部显示，该如何操作？You can set the top-level category count in the outermostcategoryListthe label uselimitparameter to limit the number of top-level categories, for example{% categoryList topCategories with moduleId="1" parentId="0" limit="5" %}. The nestedcategoryListtags do not need to be setlimit, they will default to all subcategories that meet the conditions.