How to display the subcategory list under a specified category in AnQiCMS template?

When building a website using AnQiCMS, clearly organizing content and conveniently displaying it on the page is crucial for enhancing user experience.Especially for content with multi-level classification structures, how to flexibly display the list of sub-classifications under a specified classification in the template is a need many users may encounter.AnQiCMS's powerful template tag system, especiallycategoryListTags have provided us with elegant and efficient solutions.

Understand the AnQiCMS category structure

Before delving into the template, it is first necessary to understand how AnQiCMS manages categories.In AnQiCMS, each category belongs to a specific content model (such as article model, product model, etc.), and clear parent-child relationships can be established between categories, forming a multi-level nested tree structure.This means a category can have its own subcategories, and these subcategories can have further subcategories below them, and so on.This structure provides the foundation for displaying subcategories under a specified category.

Core Tool:categoryListTag explanation

To display the category list in the AnQiCMS template, we mainly use a powerful tag:categoryListThis tag allows us to retrieve classified data based on multiple conditions and display it in a list on the page.

categoryListThe common usage of the tag is as follows:{% categoryList categories with moduleId="1" parentId="0" %} ... {% endcategoryList %}

Let's parse several key parameters:

• moduleIdThis is a very important parameter. Since AnQiCMS categories are bound to content models, when we want to get any category list, we need to specify the content model ID it belongs to. For example,moduleId="1"may represent the article model, andmoduleId="2"It may represent a product model. You can find the corresponding ID based on the background content model settings.
• parentIdThis parameter controls which level category we retrieve.
  • When set toparentId="0"At this time, the tag will retrieve the specifiedmoduleIdAll top-level categories under it.
  • When set to a specific category ID (for exampleparentId="123"It will get all direct subcategories under the category with ID 123.
  • If you are on the category list page and want to get the同级分类(sibling categories) of the current category, you can useparentId="parent".

categoryListTags are often used in combination with oneforLoop to iterate over the obtained category data. In the loop, each category object (in our example isitemThese all contain some useful properties, such as:

• item.IdUnique ID of the category.
• item.Title: Category name.
• item.Link: Category access link.
• item.Description: Description of the category.
• item.ParentId: ID of the parent category.
• item.HasChildrenA boolean value indicating whether the category has subcategories, which is very useful when building multi-level menus.
• item.IsCurrentA boolean value indicating whether the current loop category is the category of the current page, which can be used to highlight it.

Practice exercise: Display the subcategory list under the specified category.

Now, let's look at a specific example of how to display a list of child categories under a specified category in a template. Suppose we want to display the article model (moduleId="1"Under all top-level categories and their second-level subcategories.

Firstly, we get all the top-level categories:

{# 获取文章模型下所有顶级分类 #}
{% categoryList topCategories with moduleId="1" parentId="0" %}
<nav class="main-category-nav">
    <ul>
        {% for category in topCategories %}
        <li class="{% if category.IsCurrent %}active{% endif %}">
            <a href="{{ category.Link }}">{{ category.Title }}</a>
            {# 检查当前分类是否有子分类 #}
            {% if category.HasChildren %}
            <ul class="sub-category-list">
                {# 获取当前顶级分类的直接子分类 #}
                {% categoryList subCategories with parentId=category.Id %}
                {% for subCategory in subCategories %}
                <li class="{% if subCategory.IsCurrent %}active{% endif %}">
                    <a href="{{ subCategory.Link }}">{{ subCategory.Title }}</a>
                </li>
                {% endfor %}
                {% endcategoryList %}
            </ul>
            {% endif %}
        </li>
        {% endfor %}
    </ul>
</nav>
{% endcategoryList %}

In the above code snippet, we first usecategoryListThe tag got all the top-level categories under the article model and named them.topCategoriesAfter that, we useforLoop through these top-level categories to generate a link for each category.

The key point is{% if category.HasChildren %}This judgment. It allows us to render the next level only when the current category indeed has subcategories.<ul>List. Inside the.categoryListIn the tag, we willparentIdThe parameter is set to the current top-level category ofcategory.IdThis can accurately obtain all direct subcategories under the top-level category. Similarly, we traverse these subcategories again and generate links for them.

Through this nestedcategoryListTags andforThe combination of loops allows us to flexibly display any level of subcategory lists in the AnQiCMS template.

Some practical skills and considerations

• The implementation of multi-level nesting: If your category structure exceeds two levels, you just need to nest in the sub-category'sforloop again insideif subCategory.HasChildrenJudgment andcategoryListLabel, andparentIdis set tosubCategory.Id, to achieve multi-level sub-category display.
• list limitIf the number of subcategories is too many, you can uselimitto limit the number of categories displayed at each level, for examplelimit="10". You can even uselimit="2,10"Specify to start getting 10 categories from the second one, which is very practical in some display scenarios.
• Performance optimization: Although AnQiCMS has a high efficiency in tag parsing, over-nesting or unbounded acquisition of a large amount of data in complex templates may still affect page loading speed. Make reasonable use oflimitParameters anditem.HasChildrenLoad on demand, it can effectively improve performance.
• Style and layoutThe above code only shows the basic HTML structure, you need to combine CSS to beautify and lay out these category lists so that they match the overall design style of the website.
• Highlighting the current page:item.IsCurrentThe attribute can help you identify the category of the current page you are visiting, so that you can add a specific CSS class (such asactive), highlighting it visually.

The AnQiCMS template system provides sufficient flexibility, allowing you to easily build various complex classification navigation and content display structures according to your actual needs. As long as you are familiar withcategoryListTags and parameters, displaying the list of subcategories under a specified category will become very simple.

Frequently Asked Questions (FAQ)

Q1: How to display a list of categories without subcategories (i.e., leaf-level categories) only?

A1: You cancategoryListofforUse within the loop,if not item.HasChildrenfilter out those categories without subcategories. In this way, only the lowest-level categories will be displayed.

{% categoryList categories with moduleId="1" parentId="0" %}
    <ul>
        {% for category in categories %}
            {% if not category.HasChildren %} {# 只显示没有子分类的分类 #}
            <li><a href="{{ category.Link }}">{{ category.Title }}</a></li>
            {% endif %}
        {% endfor %}
    </ul>
{% endcategoryList %}

Q2: How do I get all categories under a content model, whether they are top-level or sub-levels?

A2: You can usecategoryListlabel'sall="true"Parameters. Combined.moduleIdIt will get all categories under the specified model. In the loop,item.Spacerthe property can help you display the hierarchical relationship of categories, for example, by adding indentation before the name of the subcategory.

{% categoryList allModelCategories with moduleId="1" all="true" %}
    <ul>
        {% for category in allModelCategories %}
            <li><a href="{{ category.Link }}">{{ category.Spacer|safe }}{{ category.Title }}</a></li>
        {% endfor %}
    </ul>
{% endcategoryList %}

Q3: I am currently browsing a category page, how can I only display the direct subcategories under this category?

A3: When you are on the category page,categoryListTag without specifyingparentIdIn this case, it will automatically retrieve the direct subcategories of the current category. So, you just need to use it like this:

{# 假设当前页面是某个分类详情页，会自动识别其ID #}
{% categoryList directSubCategories %}
    {% if directSubCategories %} {# 只有当存在子分类时才显示 #}
    <ul class="current-category-sub-list">
        {% for subCategory in directSubCategories %}
            <li class="{% if subCategory.IsCurrent %}active{% endif %}">
                <a href="{{ subCategory.Link }}">{{ subCategory.Title }}</a>
            </li>
        {% endfor %}
    </ul>
    {% else %}
    <p>当前分类没有直接子分类。</p>
    {% endif %}
{% endcategoryList %}