In website content management, it is crucial to organize and present information efficiently. AnqiCMS provides a powerful template tag system, wherecategoryListThe label is a core tool for flexibly displaying 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 handle it with ease.

KnowcategoryListtags

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

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

Here,categoriesis a custom variable name used to store the data of each category when looping inside the tag.withThe keyword is 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 flexibly filter and organize classification information according to your actual needs.

  1. Filter by content model (moduleId)AnqiCMS one of its major features is its flexible content model.Each category must belong to a specific content model, such as "Article Model" or "Product Model".moduleIdThe parameter comes into play.

    • To display all categories under the 'Article Model', it is usually set tomoduleId="1".
    • To display all categories under the 'Product Model', it is usually set tomoduleId="2"For example, 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 Hierarchical Structure ()parentId)Website navigation is often multi-level,parentIdThe parameter is designed to meet this need.

    • Display top-level categories:SetparentId="0"Only the top-level categories under the specified content model will be retrieved.
    • 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 obtain its subcategories.
    • Display the sibling categories of the current category:If you want to display all the sibling categories at the same level of a certain category page (i.e., sibling categories), you can:parentIdsetparentId="parent"This is usually used in content list pages in combination 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, for example, in the background management interface or when building a complete sitemap. At this point, you canallparameter settingstrue.

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

  4. 控制显示数量 (English)limit)If you only want to display a fixed number of categories, you can uselimit参数来限制返回的条目数量。例如 (English)limit="10"将只显示前10个分类。您还可以使用 (English)offsetpattern, such aslimit="2,10"Represents starting from the 2nd category and getting 10 categories.

  5. 多站点兼容 (English)siteId)AnqiCMS supports multi-site management. If you have deployed multiple sites and want to call the data of a specific site,siteIdThe parameter is used to specify the site ID. Generally, if you only manage one site, this parameter does not need to be set.

Get and display category information:itemVariable Explanation

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

  • {{ item.Id }}The unique ID of the category.
  • {{ item.Title }}: The display name of the category.
  • {{ item.Link }}：分类页面的访问链接，AnqiCMS 会根据伪静态规则自动生成。
  • {{ item.Description }}The introduction or description of the category.
  • {{ item.ParentId }}：当前分类的上级分类ID。
  • {{ item.HasChildren }}An English value indicating whether the current category contains subcategories. This is very useful for building dynamic nested navigation.
  • {{ item.Spacer|safe }}：An extremely useful field, it automatically generates indentation or prefix based on the level of the category, making it easy to visually display the hierarchical relationship in the list (for example:├─/└─)。Remember to use|safeFilter to ensure that HTML characters are rendered correctly.
  • {{ item.Logo }}and{{ item.Thumb }}The address of the large image and thumbnail of the category.
  • {{ item.ArchiveCount }}The total number of documents under this category (including subcategories).

Practice Session: Flexible Construction of Classification Navigation

Now, let's demonstrate through several practical scenarioscategoryListFlexible Application of Tags.

Scenario One: Display Top-Level Categories Under a 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 outmoduleIdresponse for1(article model) andparentIdresponse for0All categories under the top-level category, displayed in an unordered list with their names and links.

Scenario two: Building multi-level nested category navigation

It is more common to build a navigation menu with a multi-level structure, such as having multiple product series under "Product Center", and specific product types under each series. At this time, nested menus can be used.categoryList标签并结合HasChildrenproperties.

`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模板引擎可以很好地