In the AanQi CMS, the website category list is the foundation for building clear navigation, enhancing user experience, and optimizing search engine rankings.Whether it is to establish a classification system for articles, products, or other content models, AnQiCMS provides flexible and powerful tools to easily obtain and display these classifications.

One of the core concepts of AnQiCMS is to make content management efficient.It organizes content into different "content models", such as common article models and product models.Each content model can have its own classification system.Understanding this is the first step in obtaining the category list, as it determines which type of content category you want to display.

core tools:categoryListTag Explanation

To get and display the category list on the website front-end page, we mainly rely on the AnQiCMS template system.categoryListLabel. This label is designed to be very intuitive, allowing you to flexibly filter and present classified data according to different needs.

categoryListThe basic usage of the label is usually like this:

{% categoryList categories with 参数 %}
    {# 在这里循环展示分类数据 #}
{% endcategoryList %}

Among them,categoriesThis is a variable name you specify for this category list, and you can access and operate category data through this variable within the label.参数Part is used to precisely control which categories you want to retrieve.

Let's take a detailed look.categoryListCommon parameters of tags:

  • moduleIdThis is one of the most important parameters. It is used to specify which content model category you want to retrieve. For example, the default article model of a website usually corresponds tomoduleIdYes1, while the product model may correspond to2。You need to set this value according to the actual content model of your website.
  • parentId：This parameter is used to control the hierarchical relationship of categories.
    • If you want to get allTop-level category(which means there is no parent category), it can beparentIdset0.
    • If you are on a category page, you want to getthe subcategories of the current category, it can usually be omittedparentIdParameters, the system will automatically identify the current category and retrieve its direct children.
    • If you want to getthe sibling categories of the current category(i.e., other categories that belong to the same parent category as the current one), which can beparentIdsetparent.
  • all: If it is set totrue,all=true, it will obtain the specifiedmoduleIdall categories under it, regardless of the level.
  • limit：Used to limit the number of categories returned. For examplelimit="10"will only display 10 categories. It also supportsoffsetpattern, such aslimit="2,10"indicating starting from the 2nd category and getting 10 categories.
  • siteIdIn the multi-site management environment, if you need to retrieve category data from other sites, you can specify the site ID through this parameter. Generally, it does not need to be set.

categoryListThe label will return a collection of data objects for a category (or commonly referred to as an array). Within the label, you can accessforLoop through this collection and access the details of each category. Each category object contains the following common fields:

  • Id: The unique identifier of the category.
  • Title: The name of the category.
  • Link: The URL address of the category page.
  • Description: The description information of the category.
  • ParentId：The ID of the parent category.
  • Logo：The address of the large image or main image of the category.
  • Thumb: The thumbnail address of the category.
  • HasChildrenA boolean value indicating whether there is a subcategory under the current category. This is very useful for building interactive effects of multi-level dropdown menus.trueorfalse），indicating whether the category has subcategories.
  • IsCurrent：An boolean value indicating whether the current category is the category on the current page.
  • ArchiveCount：The number of documents (articles or products, etc.) included under the category.

Practice: Displaying Various Classification Lists

MasteredcategoryListWith the label and its parameters, we can start implementing various classification lists on the website.

1. Obtain and display all top-level classifications

This is the most basic usage, commonly used for website main navigation or home page category entry.

<nav class="main-nav">
    <ul>
    {% categoryList topCategories with moduleId="1" parentId="0" %}
        {% for item in topCategories %}
        <li class="nav-item">
            <a href="{{ item.Link }}" title="{{ item.Title }}">{{ item.Title }}</a>
        </li>
        {% empty %}
        <li class="nav-item">当前内容模型下没有顶级分类。</li>
        {% endfor %}
    {% endcategoryList %}
    </ul>
</nav>

This code will retrievemoduleIdresponse for1All top-level categories (usually article models) are displayed in an unordered list. If there are no categories, it will display a prompt message.

二、Show multi-level classification (nested structure)

For category systems with many levels, we usually need to display them in the form of nested lists to help users clearly understand the structure. AnQiCMS allows you tocategoryListInternal call againcategoryListTo implement multi-level nesting.

<div class="category-sidebar">
    {% categoryList level1Categories with moduleId="1" parentId="0" %}
    <ul class="level-1">
        {% for category1 in level1Categories %}
        <li>
            <a href="{{ category1.Link }}">{{ category1.Title }}</a>
            {% if category1.HasChildren %} {# 判断当前分类是否有子分类 #}
                {% categoryList level2Categories with parentId=category1.Id %} {# 获取当前分类的子分类 #}
                <ul class="level-2">
                    {% for category2 in level2Categories %}
                    <li>
                        <a href="{{ category2.Link }}">{{ category2.Title }}</a>
                        {% if category2.HasChildren %}
                            {% categoryList level3Categories with parentId=category2.Id %} {# 更多层级可以继续嵌套 #}
                            <ul class="level-3">
                                {% for category3 in level3Categories %}
                                <li><a href="{{ category3.Link }}">{{ category3.Title }}</a></li>
                                {% endfor %}
                            </ul>
                            {% endcategoryList %}
                        {% endif %}
                    </li>
                    {% endfor %}
                </ul>
                {% endcategoryList %}
            {% endif %}
        </li>
        {% endfor %}
    </ul>
    {% endcategoryList %}
</div>

By checkingitem.HasChildrenfield, we can intelligently judge whether to render the next level category list, thus constructing a clear tree-like structure.

Three, dynamically display the subcategories or sibling categories of the current category

In the category details page or content details page sidebar, you may want to dynamically display its subcategories or peer categories based on the current page category.

<div class="related-categories">
    <h3>当前分类的子分类</h3>
    <ul>
    {% categoryList subCategories %} {# 默认获取当前页面的子分类 #}
        {% for item in subCategories %}
        <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
        {% empty %}
        <li>暂无子分类。</li>
        {% endfor %}
    {% endcategoryList %}
    </ul>

    <h3>同级分类</h3>
    <ul>
    {% categoryList siblingCategories with parentId="parent" %} {# 获取当前分类的兄弟分类 #}
        {% for item in siblingCategories %}
        <li {% if item.IsCurrent %}class="active"{% endif %}><a href="{{ item.Link }}">{{ item.Title }}</a></li>
        {% empty %}
        <li>暂无同级分类。</li>
        {% endfor %}
    {% endcategoryList %}
    </ul>
</div>

HereparentId="parent"The usage makes it possible to get siblings on the category page