As an experienced website operations expert, I am well aware that how to efficiently organize and display the classification structure is crucial when managing a content-rich website.English CMS (EnglishCMS) provides us with great flexibility through its powerful template tag system, making it easy to achieve various complex classification display requirements.Today, let's delve into a common and practical scenario: how to obtain and display the list of all direct child categories under the current page category.

Understand the classification system of AnQi CMS

The core of content organization in Anqi CMS lies in its flexibility.Content Model(such as articles, products, etc.) and based on these modelsCategory.The categories exist in a tree structure, which means each category can have its own parent category and multiple child categories, forming a clear hierarchical relationship.This structure enables us to create exclusive categorization methods for different types of content, greatly enhancing the manageability of content and the convenience of user browsing.Whether it is the main navigation of the website, the sidebar menu, or the breadcrumb navigation, categories play an indispensable role.

Define the goal: obtain the direct subcategories of the current category

Our goal is very clear: when we visit a category page, we hope to dynamically display all the next-level subcategories under that category.For example, if the current category is 'News Center', we may want to display 'Company News', 'Industry Dynamics', and other subcategories; if the current category is 'Product Category', we would like to list 'Electronic Products', 'Household Goods', and other direct subcategories.

To achieve this goal, we need to take two steps: first, determine the category ID of the current page; second, use this ID to query and list its direct subcategories.

第一步：获取当前分类的身份标识——分类ID (English)

In the template design of AnQi CMS, to obtain the detailed information of the current page category, we can make use of the powerfulcategoryDetailLabel. This label is specifically used to obtain detailed data of a specified category, and if we do not provide it with parameters, it will automatically and intelligently identify and obtain the category information of the current page.idortokenParameters, it will be very intelligent and automatically identify and obtain the category information of the current page.

To facilitate subsequent queries for its subcategories, what we need most is the current category'sId. We can do it like this, assign the ID of the current category to a template variable:

{% categoryDetail currentCategoryId with name="Id" %}

Here,currentCategoryIdIt is a variable that contains the current category ID. In this way, no matter where we are on the category page, we can accurately obtain its unique identifier.

第二步：EnglishcategoryList标签，列出直接子分类

有了当前分类的ID，下一步就是利用它来查找其下属的直接子分类了。这时，categoryListLabels come in handy.categoryListLabels allow us to retrieve a list of categories based on specific conditions (such as the content model, parent category ID, etc.).

Its core parameters include:

  • moduleId：This specifies the content model of the category. For example, the article model usually corresponds to ID is1, the product model may correspond2.This parameter is very important, as it specifies which content model we want to retrieve the categories from.If you are unsure of the specific model ID, you can check it in the "Content Management" -> "Content Model" on the backend.
  • parentId：This is the key to achieving our goal. This is what we have just obtained.currentCategoryIdAssign to.parentIdThis can accurately tell the system: "Please list all direct subcategories under the category with IDcurrentCategoryId!"
  • limit：Control the number of returned subcategories, the display quantity can be limited as needed, for examplelimit="10".
  • siteIdIf your AnQiCMS has deployed multiple sites and you want to get the categories of a specific site, you can specify this parameter.Generally, if only one site is managed, no entry is required.

Now, let's combine these two steps to build a complete code snippet:

{% categoryDetail currentCategoryId with name="Id" %}
{% categoryList childCategories with moduleId="1" parentId=currentCategoryId %}
    {% for item in childCategories %}
        <a href="{{ item.Link }}" title="{{ item.Title }}">
            {{ item.Title }}
        </a>
        {# 进一步判断是否有孙子分类，并显示 #}
        {% if item.HasChildren %}
            <ul>
                {% categoryList grandChildCategories with parentId=item.Id %}
                    {% for grandChild in grandChildCategories %}
                        <li><a href="{{ grandChild.Link }}">{{ grandChild.Title }}</a></li>
                    {% endfor %}
                {% endcategoryList %}
            </ul>
        {% endif %}
    {% empty %}
        <p>当前分类暂无直接子分类。</p>
    {% endfor %}
{% endcategoryList %}

In this code block:

  1. We first usecategoryDetailGet the category ID of the current page and store it incurrentCategoryIdthe variable.
  2. Next, we callcategoryList,moduleIdresponse for1(Assuming we are dealing with article categories), and willparentIdsetcurrentCategoryIdlike this,childCategoriesthe variable will contain all direct subcategories of the current category.
  3. Pass{% for item in childCategories %}Loop, we iterate through these subcategories one by one, and we can make use ofitem.LinkGet the category link,item.TitleGet the category name, and easily build a subcategory navigation list.
  4. We also added a{% if item.HasChildren %}judgment, which is very practical.item.HasChildrenIt will return a boolean value indicating whether the current subcategory has a further subcategory (i.e., a grandchild category).So, you can decide whether to further display a deeper level of category structure.
  5. Finally,{% empty %}The label provides a friendly user experience. It displays a prompt message when no subcategories are found, to avoid blank pages.

Optimization and Expansion Suggestions

  • Style beautification：The above code only demonstrates the logical structure, you can beautify the display style of these subcategories according to your design requirements through CSS.
  • Hierarchical displayIf you need to display multi-level subcategories, you can{% if item.HasChildren %}nested inside againcategoryListtag and set itsparentIdsetitem.Id，with more, realize the classification navigation of infinite levels. However, for the user experience, it is usually not recommended to display too deep levels.
  • Flexible control of display quantity：Make good use of `limit