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.AnQiCMS (AnQiCMS) with its powerful template tag system provides us with great flexibility, making it easy to achieve various complex classification display requirements.Today, let's delve into a common and practical scenario: how to retrieve and display the list of all direct child categories under the current page category.

Understand the classification system of Anqi CMS

In Anqi CMS, the core of content organization lies in its flexibility,Content modelsuch as articles, products, etc.), and based on these models,Category. 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 allows us to create dedicated classification 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.

clear 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 the category.For example, if the current category is "News Center", we may want to display subcategories such as "Company News" and "Industry Dynamics";If the current is 'Product Category', we want to list 'Electronic Products', 'Home 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.

The first step: obtain the identity identifier of the current category - Category ID

In the template design of Anqi CMS, to obtain the detailed information of the current page category, we can take advantage of the powerfulcategoryDetailLabel. This label is specifically used to retrieve detailed data for a specified category, and if we do not provide it withidortokenparameters, it will very intelligently automatically identify and retrieve 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 assign the ID of the current category to a template variable like this:

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

here,currentCategoryIdIs 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.

The second step: ridecategoryListLabel, list direct subcategories

With the current category ID, the next step is to use it to find its direct subcategories. At this point,categoryListthe label comes into play.categoryListTags allow us to retrieve category lists based on specific conditions (such as the content model, parent category ID, etc.).

Its core parameters include:

  • moduleId: Specify the content model belonging to the category. For example, the article model usually corresponds to the ID is1, the product model may correspond2. This parameter is very important because it specifies the content model from which we want to retrieve the classification.If you are unsure of the specific model ID, you can check it in the "Content Management" -> "Content Model" in the backend.
  • parentId: This is the key to achieving our goal. We just gotcurrentCategoryIdAssign toparentId, can accurately tell the system: "Please list the direct subcategories under the category with IDcurrentCategoryId!"}
  • limit: Controls the number of subcategories returned, you can limit the number of displayed items as needed, for examplelimit="10".
  • siteIdIf your AnQiCMS has deployed multiple sites and you want to get the category of a specific site, you can specify this parameter.In most cases, if you only manage one site, it is not necessary to fill in.

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 usecategoryDetailRetrieve the category ID of the current page and store it incurrentCategoryIdthe variable.
  2. Next, we callcategoryList, specifymoduleIdWith1(assuming we are dealing with article categories), and assignparentIdis set tocurrentCategoryIdThus,childCategoriesthe variable will contain all direct subcategories of the current category.
  3. By{% for item in childCategories %}Loop, we iterate through these subcategories one by one and can utilizeitem.LinkGet the category link,item.TitleGet the category name, and easily build a subcategory navigation list.
  4. We have also added a{% if item.HasChildren %}The judgment, this is very practical.item.HasChildrenIt will return a boolean value indicating whether the current subcategory has any further subcategories (i.e., grandchild categories).This allows you to decide whether to further display a deeper level of classification structure.
  5. Finally,{% empty %}The tag provides a friendly user experience, and it will display a prompt when no subcategories are found, avoiding a blank page.

Optimization and Expansion Suggestions

  • Style beautification: The above code only demonstrates the logical structure, you can beautify the display style of these sub-categories according to your design needs through CSS.
  • Hierarchical DisplayIf you need to display multi-level subcategories, you can in{% if item.HasChildren %}nested inside againcategoryListthe tag and use it.parentIdis set toitem.IdThis pattern can be used to implement an infinite-level classification navigation. However, for the user experience, it is usually not recommended to display too deep levels.
  • Flexible control of the display quantity: Make good use of `limit