How to implement hierarchical display and nested calling of the `categoryList` tag?

Build a clear and organized website navigation in AnQiCMS, especially when dealing with multi-level categories, is the key to improving user experience and website accessibility.categoryListThe tag is exactly for this, it provides powerful functions to help us flexibly display the classification hierarchy and make fine-grained nested calls.

UnderstandingcategoryListThe foundation of the tag

categoryListThe tag is a core component of the AnQiCMS template engine, used to obtain the list of categories of articles or products from the background.Its basic usage is simple and clear, but by matching different parameters, it can achieve extremely rich display effects.

Typical usage is shown as follows:

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

There are several key parameters:

• moduleId: This parameter is very important, it specifies which content model (such as article model or product model) under the category you want to retrieve.AnQiCMS supports custom content models, each model has its independent classification system.
• parentIdThis is the core parameter controlling the display of category levels.
  • When set toparentId="0"At this time, it will retrieve the specifiedmoduleIdAll top-level categories under it.
  • When you are in a loop and want to get the subcategories of the current category, you can dynamicallyparentIdis set toitem.Idof whichitemis the category object in the current loop.
• limit: Used to limit the number of displayed categories, such aslimit="10"It will only display 10 categories.
• siteIdIn multi-site management mode, if you need to call data from other sites, you can specify the site ID through this parameter.

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

• item.Id: Category ID
• item.Title: Category name
• item.Link: Category link
• item.ParentId: Parent category ID
• item.HasChildren: A 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, which is convenient for displaying tree structures.

Implement hierarchical classification with level display and nested calling

The charm of multi-level classification lies in its ability to present complex website structures to users in a clear manner. In AnQiCMS, it is cleverly nested incategoryListtagscategoryListLabel, we can easily build a classification hierarchy of any depth.

The core idea is:Use an outer layercategoryListLabel to get the top-level classification, then nest it within the loop.categoryListLabel and set the inner label'sparentIdparameters to the outer category'sId.So, the inner label will automatically get the subcategories of the outer category.

Let's see an example of implementing a three-level nested call

{# 外层标签：获取所有顶级分类，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. The firstcategoryList(Variable name)topCategoriesPassedparentId="0"Get all top-level categories.
2. IntopCategoriesIn the loop, we use{% if item.HasChildren %}to determine if the current top-level category has subcategories.
3. If there is a nested category, the second one will be nestedcategoryList(Variable name)subCategories1), at this timeparentIdis set dynamically toitem.Id, which is the ID of the current primary category, thereby obtaining its direct subcategories.
4. Similarly, insubCategories1inside the loop, we judge againinner1.HasChildrenIf it exists, continue to nest the thirdcategoryList(Variable name)subCategories2)parentIdIt is set dynamically againinner1.IdTo get the subcategories of the second-level category.

In this way, we can flexibly build a clear and scalable classification navigation structure, whether it is the main navigation of the website, the sidebar navigation, or the website map, it can easily cope with.

Practical Application and Advanced Techniques

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

1. Document list display under the categoryIn 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 displayIn building navigation, you can decideHasChildrenwhether 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 way makes navigation more dynamic, able to automatically adjust the displayed content according to the changes in the classification structure.

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

Frequently Asked Questions (FAQ)

1. How to limit the depth of multi-level classification display?You can control nestingcategoryListThe number of tag levels to limit the display depth. For example, if you only need to display three levels of classification, 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.HasChildrenit will befalse, the inner loop will naturally not execute, thereby avoiding the display of empty levels.

2. Can I get the parent category information of the category in the category loop?Get itsdirect parentAll information can be obtained throughitem.ParentIdFields are completed, but if you want to get the specific details of the parent level,TitleorLinkyou need to combinecategoryDetailLabel, for example{% categoryDetail parentCategory with name="Title" id=item.ParentId %}{{parentCategory}}.

3. What should I do if I only want to display a specific number of top-level categories, but all the subcategories are displayed?You can specify in the outermost layercategoryListUsed in tagslimitparameters to limit the number of top-level categories, for example{% categoryList topCategories with moduleId="1" parentId="0" limit="5" %}. The nested insidecategoryListtags do not need to be setlimitThey will default to retrieve all matching subcategories.