How to use the AnqiCMS category list tag to display article/product categories by level or model on the front end?

In website content management, it is crucial to organize and present information efficiently. AnqiCMS provides a powerful template tag system, among whichcategoryListThe tag is a core tool used to flexibly display articles or product categories.By mastering the use of this tag, users can easily build a well-structured and functional classification navigation on the front end, whether it is displayed by level or filtered according to the content model (such as articles, products), they can do so with ease.

Get to knowcategoryListTag

categoryListThe main function of the tag is to obtain the preset category data from the AnqiCMS backend and display it in a list format on the front page. Its basic structure is as follows:

{% categoryList categories with ... %}
    {# 在这里循环输出分类信息 #}
{% endcategoryList %}

Here, categoriesis a custom variable name used to store data for each category when looping within a tag.withKeywords are followed by a series of parameters, used to control which categories to retrieve and how to filter and sort.

Core parameter parsing: Fine-grained control of category display

categoryListThe power of tags lies in their rich parameter options, which allow you to filter and organize classification information flexibly according to your actual needs.

1. Filter by content model (moduleId)AnqiCMS is characterized by its flexible content model.Each category must belong to a specific content model, such as "article model" or "product model".When you want to display a specific type of content category,moduleIdThe parameters come into play.

   • To display all categories under the "Article Model", usually set tomoduleId="1".
   • To display all categories under the "Product Model", usually set tomoduleId="2"。（The specific model ID can be found in the AnqiCMS backend under "Content Management" -> "Content Model".)

   For example, if you only want to list all product categories:

   {% categoryList productCategories with moduleId="2" %}
       {# 循环输出产品分类 #}
   {% endcategoryList %}
   

2. Build a hierarchical structure (parentId)Website navigation is often multi-level,parentIdThe parameter is designed to meet this need.

   • Display top-level categories:settingparentId="0"Only the top-level categories under the specified content model will be obtained.
   • Show the subcategories of the current category:In the category list page or detail page, if you want to display all direct subcategories of the current category, you can omitparentIdThe parameter, the system will automatically identify the current category ID and get its subcategories.
   • Show the sibling categories of the current category:If you want to display all categories at the same level on a category page (i.e., sibling categories), you canparentIdis set toparentId="parent"This is usually used in the content list page combined with the current category.

   For example, to display all top-level categories of articles:

   {% categoryList topArticleCategories with moduleId="1" parentId="0" %}
       {# 循环输出文章顶级分类 #}
   {% endcategoryList %}
   

3. Get all categories (all)In certain specific scenarios, you may need to list all categories under a model without considering their hierarchical relationships, such as in the background management interface or when building a complete website map. At this point, you canallthe parameter totrue.

   {% categoryList allCategories with moduleId="1" all=true %}
       {# 循环输出所有文章分类，不分层级 #}
   {% endcategoryList %}
   

4. Control the display quantity (limit)If you only want to display a fixed number of categories, you can uselimita parameter to limit the number of returned entries. For examplelimit="10"only the first 10 categories will be displayed. You can also useoffsetpattern, such aslimit="2,10"Starting from the second category, retrieve 10 categories.

5. Multi-site compatibility (siteId)AnqiCMS supports multi-site management. If you have deployed multiple sites and want to call data from a specific site, you can do so bysiteIdSpecify the site ID with the parameter. Generally, if you only manage one site, this parameter does not need to be set.

Get and display category information:itemVariable Details

IncategoryListEach in the loop inside the tag,itemVariables contain detailed information about the current category, you can call and display them as needed:

• {{ item.Id }}Unique ID of the category.
• {{ item.Title }}: The display name of the category.
• {{ item.Link }}: The access link of the category page, AnqiCMS will automatically generate according to the pseudo-static rules.
• {{ item.Description }}: The introduction or description of the category.
• {{ item.ParentId }}: The parent category ID of the current category.
• {{ item.HasChildren }}A boolean value indicating whether the current category contains subcategories. This is very useful for building dynamic nested navigation.
• {{ item.Spacer|safe }}A very useful field that automatically generates indentation or prefix based on the level of the category, making it easy to display the hierarchy in a list (for example:├─/└─Remember to use|safeFilter to ensure correct rendering of HTML characters.
• {{ item.Logo }}and{{ item.Thumb }}: The address of the large image and thumbnail of the category.
• {{ item.ArchiveCount }}: The total number of documents under the category (including subcategories).

Practice: Build Flexible Category Navigation

Now, let's demonstrate through several practical scenarioscategoryListFlexible use of tags.

Scenario One: Display Top Categories Under Specific Content Model

Assuming we need to display all top-level categories under the "Article Model" on the homepage as part of the main navigation.

<nav class="main-nav">
    <ul class="category-list-top">
        {% categoryList articleCategories with moduleId="1" parentId="0" %}
            {% for category in articleCategories %}
                <li><a href="{{ category.Link }}">{{ category.Title }}</a></li>
            {% endfor %}
        {% else %}
            <li>暂无文章分类</li>
        {% endcategoryList %}
    </ul>
</nav>

This code will filter outmoduleIdWith1(Article Model) andparentIdWith0All categories of the top-level classification, displayed in an unordered list with names and links.

Scenario two: Building multi-level nested category navigation

The more common requirement is to build a navigation menu with a multi-level structure, such as having multiple product series under "Product Center", and each series having specific product types. In this case, nested menus can be used.categoryListand tags to combineHasChildrenProperty.

`twig

<h3>产品分类</h3>
{% categoryList productCategories with moduleId="2" parentId="0" %}
    <ul class="level-1-categories">
        {% for category in productCategories %}
            <li {% if category.HasChildren %}class="has-submenu"{% endif %}>
                <a href="{{ category.Link }}">{{ category.Title }}</a>
                {% if category.HasChildren %}
                    {# 递归调用子分类，AnqiCMS模板引擎可以很好地