How to limit the display quantity of each subcategory level when nesting multi-level categories?

AnQiCMS as an efficient and flexible content management system excels in building structured content, especially its multi-level classification function, which helps us clearly organize website content.However, when displaying multi-level category nesting, we often encounter a challenge: how to elegantly control the display quantity of each sub-category level to avoid the page being too long or the load being too heavy?As an experienced website operations expert, I fully understand the importance of this requirement, and today I will delve deeply into the exquisite ways to achieve this goal in AnQiCMS.

Understanding the importance of multi-level categorization and display restrictions

In website operation, a clear navigation structure is crucial for user experience (UX) and search engine optimization (SEO).Multi-level classification can help users quickly locate the information they need and also allows search engines to better understand the content structure of the website.However, if each category level displays all subcategories without limitation, especially in the case of a large number of categories, the page may become very bulky, not only affecting the aesthetics but also increasing the loading time of the page and distracting the user's attention.Therefore, fine control over the display quantity at each level is a key factor in improving website usability and efficiency.

The core tool in AnQi CMS:categoryListTag

In AnQi CMS, we mainly use powerful template tags to achieve dynamic content calls and display. For the call of category lists,categoryListTags are undoubtedly our core tool. They allow us to flexibly obtain and display classified data according to different business needs.

categoryListThere are several key parameters to consider when using tags.

• moduleId: Used to specify which content model (such as article model, product model, etc.) category list to retrieve.
• parentIdThis parameter is crucial, it determines which child category under which parent category we obtain. When set to"0"it means to get the top-level category; when we pass in a certain category'sIdIf, then get the direct subcategories under the category.
• limit: This is the key to solving the problem we are facing today!limitThe parameter allows us to specify eachcategoryListThe maximum number of calls to display. For example,limit="5"Only the top 5 categories will be displayed.

It is worth mentioning,limitThe parameter also supportsoffsetmode, namely,limit="2,10"This indicates starting from the second data item and fetching 10 items. This is also very useful in certain specific scenarios, such as when you want to skip the first few popular categories and display the subsequent ones.

Implement a strategy for limiting the number of hierarchical category levels

To limit the display quantity of each subcategory level when nesting multiple-level categories, our strategy is to clearly state in each level ofcategoryListthe label, usinglimitParameters to define the maximum number of categories to be displayed at this level.

Let's go through a specific example to demonstrate how to operate. Suppose we have a multi-level article classification system, we want:

• Only the top 3 categories are displayed.
• Only the top 5 subcategories under each top category are displayed.
• Only the top 2 subcategories under each second-level category are displayed.

The following is the template code structure for achieving this effect:

{# 假设我们有一个文章模型，其moduleId为1 #}

{# 第一层级分类：限制只显示前3个顶级分类 #}
<ul class="top-categories">
    {% categoryList topCategories with moduleId="1" parentId="0" limit="3" %}
        {% for topCat in topCategories %}
        <li>
            <a href="{{ topCat.Link }}">{{ topCat.Title }}</a>

            {# 第二层级分类：在每个顶级分类下，限制只显示前5个子分类 #}
            {% if topCat.HasChildren %} {# 检查是否有子分类 #}
            <ul class="sub-categories">
                {% categoryList subCategories with parentId=topCat.Id limit="5" %}
                    {% for subCat in subCategories %}
                    <li>
                        <a href="{{ subCat.Link }}">{{ subCat.Title }}</a>

                        {# 第三层级分类：在每个二级分类下，限制只显示前2个子分类 #}
                        {% if subCat.HasChildren %} {# 再次检查是否有子分类 #}
                        <ul class="third-level-categories">
                            {% categoryList thirdLevelCategories with parentId=subCat.Id limit="2" %}
                                {% for thirdCat in thirdLevelCategories %}
                                <li>
                                    <a href="{{ thirdCat.Link }}">{{ thirdCat.Title }}</a>
                                    {# 可以在这里继续嵌套更深层级的分类，并再次应用limit #}
                                </li>
                                {% endfor %}
                                {% empty %} {# 如果没有第三级分类，可以显示提示信息 #}
                                <li class="no-category">暂无子分类</li>
                            {% endcategoryList %}
                        </ul>
                        {% endif %}
                    </li>
                    {% endfor %}
                    {% empty %} {# 如果没有二级分类，可以显示提示信息 #}
                    <li class="no-category">暂无子分类</li>
                {% endcategoryList %}
            </ul>
            {% endif %}
        </li>
        {% endfor %}
        {% empty %} {# 如果没有顶级分类，也可以显示提示信息 #}
        <li class="no-category">暂无顶级分类</li>
    {% endcategoryList %}
</ul>

In the above code, you can see that by using eachcategoryListtag flexiblylimitParameters, we precisely control the display quantity of different hierarchical categories.parentIdParameters ensure eachcategoryListcan correctly obtain the direct subcategories under their parent category. At the same time,{% if ... HasChildren %}Such condition judgment can also help us display content more intelligently, avoiding the display of empty sub-category lists.

Further optimization and precautions

1. Distinguish between the number of categories and the number of documents: Please note,categoryListlabel'slimitThe parameter limits arethe number of subcategories. If you need to limit thethe number of documents (articles, products, etc.) displayed under each categorythen you should limit the correspondingarchiveListUse its labellimitparameters. These are different concepts, but they are often used together. For example, within the above three-level classification of<li>you can add more insidearchiveListDisplay the documents under this category and apply themlimit.
2. Performance considerations:Although the backend of AnQiCMS in Go language is excellent in performance, it has too deep levels, and each level is deep.limitA very large nested query may still exert some pressure on the database.When designing category structures and display quantities, it is recommended to weigh user experience and system performance, and avoid unnecessary redundant display.
3. The maintainability of the template:For particularly deep nesting, the code may become relatively complex. Appropriate comments and modularization (such as encapsulating the rendering logic of a subcategory intomacroorincludeFiles can effectively enhance the maintainability of templates.

By following these strategies and techniques, you can easily master the display quantity limit of multi-level categories in AnQiCMS, providing your website visitors with an aesthetically pleasing and efficient content browsing experience.

Frequently Asked Questions (FAQ)

Q1:categoryListin the labellimitWhat is limited by the parameter, the number of categories themselves, or the number of documents under the categories? A1: categoryListlabel'slimitThe parameter is used specifically to limitThe display quantity of subcategories (i.e., sub-level directories).limit="5"It means that only up to 5 direct subcategories will be displayed. If you want to limitthe number of documents (articles, products, etc.) contained in each categoryyou need to usearchiveListLabel and configure it insidelimitParameter.

Q2: If there are no subcategories under a parent category, how can I display a prompt like 'No subcategories available'? How can I achieve this? A2:IncategoryListOutside the loop, you can use