How to display multi-level category structure and category information with `categoryList` tag of AnQiCMS?

In Anqi CMS, website categories are the foundation for organizing content, whether it's articles, products, or other custom models. A clear category structure can greatly enhance user experience and the SEO effect of the website. Anqi CMS provides powerfulcategoryListLabels, allowing us to flexibly display single or multi-level classification structures and easily obtain detailed information of each classification.

MastercategoryListBasic usage of tags

To display the classification list, we first need to usecategoryListLabel. Its core function is to obtain category data from the background and display it in the form of a list on the front-end page. The basic usage usually specifies which content model to obtain.moduleId）的分类，以及从哪个层级开始（English)parentId).

举个例子，如果我们想展示文章模型（假设English)moduleId为1）的所有顶级分类，我们可以这样编写模板代码（English)

{% categoryList categories with moduleId="1" parentId="0" %}
    <ul>
        {% for item in categories %}
        <li>
            <a href="{{ item.Link }}">{{item.Title}}</a>
        </li>
        {% endfor %}
    </ul>
{% endcategoryList %}

Here,categoriesIt is a custom variable name, which will carry the list of category data obtained from the backend.parentId="0"It indicates that the request is for categories without parent, i.e., the top-level categories.itemIs each category object in the loop, throughitem.Linkanditem.TitleWe can get the link and name of the category separately.

Build a multi-level category structure

Anqi CMS'scategoryListTags are very suitable for building nested multi-level category menus. The key to achieving this lies in calling the loop again within the loop.categoryListTags, and use the current category's ID as the child category'sparentIdat the same time,item.HasChildrenThis field helps us determine if the current category has subcategories, thereby conditionally rendering the submenu.

For example, creating a three-level navigation menu might look like this:

<nav>
    <ul class="main-nav">
        {% categoryList topCategories with moduleId="1" parentId="0" %}
            {% for item in topCategories %}
            <li class="{% if item.HasChildren %}has-dropdown{% endif %}">
                <a href="{{ item.Link }}">{{ item.Title }}</a>
                {% if item.HasChildren %}
                    <ul class="sub-nav">
                        {% categoryList subCategories with parentId=item.Id %} {# 使用当前分类的ID作为父ID #}
                            {% for inner1 in subCategories %}
                            <li class="{% if inner1.HasChildren %}has-dropdown{% endif %}">
                                <a href="{{ inner1.Link }}">{{ inner1.Title }}</a>
                                {% if inner1.HasChildren %}
                                    <ul class="third-nav">
                                        {% categoryList thirdCategories with parentId=inner1.Id %} {# 再次嵌套获取第三级分类 #}
                                            {% for inner2 in thirdCategories %}
                                            <li>
                                                <a href="{{ inner2.Link }}">{{ inner2.Title }}</a>
                                            </li>
                                            {% endfor %}
                                        {% endcategoryList %}
                                    </ul>
                                {% endif %}
                            </li>
                            {% endfor %}
                        {% endcategoryList %}
                    </ul>
                {% endif %}
            </li>
            {% endfor %}
        {% endcategoryList %}
    </ul>
</nav>

This code first retrieves all top-level categories, and then within the loop of each top-level category, ifitem.HasChildrenis true, it will call againcategoryListGet the subcategories. This process can be nested in multiple layers according to actual needs, perfectly presenting the hierarchical structure of the website.

It is worth mentioning that,item.SpacerThis field may contain a prefix for visual indentation when displayed on the backend category list page, such as|--. In the front-end template, if you want to preserve this visual hierarchy, you can use{{item.Spacer|safe}}Output it before the category title.

Display the detailed information of the category

In addition to the name and link, the safety CMS ofcategoryListtags can also let us get many other practical information about the category.forIn the loopitemThe object includes rich data fields that can help us build more diverse classification displays.

Some commonly used classification information includes:

  • item.Id: Classification ID, it is the unique identifier for the classification.
  • item.Description: Brief introduction or description of the classification, often used in page headers or list details.
  • item.Content: The detailed content of the category, if filled in the background, it needs to be used{{ item.Content|safe }}to ensure the correct rendering of HTML content.
  • item.Logo: The thumbnail image address of the category, which can be used for banners or prominent positions.
  • item.Thumb: The thumbnail image address of the category, usually used for list display.
  • item.ArchiveCount: The number of documents under this category, helpful for providing data insights.
  • item.IsCurrent: Determine if the current category is the category of the current page, which can be used to highlight the current navigation item.

For example, we may need to display the introduction and thumbnail of the category next to the category list:

{% categoryList categories with moduleId="1" parentId="0" %}
    <div class="category-grid">
        {% for item in categories %}
        <div class="category-card">
            <a href="{{ item.Link }}">
                {% if item.Thumb %}
                    <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="category-thumb">
                {% endif %}
                <h3 class="category-title">{{ item.Title }}</h3>
            </a>
            {% if item.Description %}
                <p class="category-desc">{{ item.Description }}</p>
            {% endif %}
            <span class="article-count">文档数量: {{ item.ArchiveCount }}</span>
        </div>
        {% endfor %}
    </div>
{% endcategoryList %}

If the category has custom fields, for example, the backend has added a "Category Owner" field, its field name ismanager, you can also go through{{ item.manager }}Get the value directly, or through a loopitem.ExtraGet all custom fields.

By using flexibilitycategoryList标签及其提供的各项字段，我们可以在安企CMS中构建出既美观又实用的多层级分类结构，为网站用户提供直观且高效的导航体验。

Common Questions (FAQ)

1. How to determine whether the current category in the category list is the category of the page being browsed, and highlight it?

IncategoryListin the loop, eachitemAll objects contain aIsCurrentboolean value. Whenitem.IsCurrentresponse fortrueWhen, it indicates that the category is the category of the current page. You can use this property to add CSS classes to achieve highlighting.

For example:

{% categoryList categories with moduleId="1" parentId="0" %}
    <ul>
        {% for item in categories %}
        <li class="{% if item.IsCurrent %}active-category{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
        </li>
        {% endfor %}
    </ul>
{% endcategoryList %}

**2. I want to display categories that belong to different content models, such as displaying article categories and product categories,