How does the AnQiCMS `categoryList` tag display hierarchical category structures and show category information?

In AnQi CMS, website categories are the foundation for organizing content, whether it is 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 about each classification item.

MastercategoryListBasic usage of tags

To display the classification list, we first need to usecategoryListThe label. Its core function is to retrieve category data from the background and display it in a list on the front-end page. The basic usage usually specifies which content model to retrieve.moduleIdThe classification, as well as from which level to start(parentId)

For example, if we want to display the article model (assumingmoduleIdAll top-level classifications for 1, we can write the template code like this:

{% 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 our custom variable name, which carries the category data list obtained from the background.parentId="0"It indicates that the request is for the top-level category without a parent.itemIs each category object in the loop, throughitem.Linkanditem.TitleWe can respectively obtain the link and name of the category.

Build a multi-level category structure

Of Security CMScategoryListThe tag is very suitable for building nested multi-level classification menus. The key to achieving this is to call the loop again inside.categoryListThe tag, and use the current category ID as the subcategory ofparentId. At the same time,item.HasChildrenThis field helps us determine whether 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 inside the loop of each top-level category, ifitem.HasChildrenis true, it will call againcategoryListTo get its subcategories. This process can be nested according to actual needs, perfectly presenting the hierarchical structure of the website.

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

Show the detailed information of the category

In addition to the name and link, the Anqi CMS'scategoryListtags can also help us obtain many other practical information about the category in.forin the loopitemAn object that contains rich data fields, which can help us build richer classification displays.

Common classification information includes:

• item.Id: Category ID, it is the unique identifier for identifying the category.
• item.Description: Brief introduction or description of the category, often used in page headers or list details.
• item.Content: Detailed category content, if filled in the background, it needs to be used{{ item.Content|safe }}to ensure correct rendering of HTML content.
• item.Logo: The category thumbnail large image address, which can be used for banners or prominent positions.
• item.Thumb: The category thumbnail address, usually used for list display.
• item.ArchiveCountThe number of documents in this category, which helps to provide data insights.
• item.IsCurrentDetermine whether 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 category description and thumbnail 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 background adds a field called "category负责人" whose calling field ismanager, then you can also use{{ item.manager }}To directly obtain its value or by loopingitem.ExtraTo obtain all custom fields.

By flexible applicationcategoryListThe tags and fields they provide allow us to build a multi-level classification structure that is both beautiful and practical in AnQi CMS, providing users with an intuitive and efficient navigation experience.

Frequently Asked Questions (FAQ)

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

IncategoryListIn the loop, eachitemAn object contains aIsCurrentboolean value. Whenitem.IsCurrentWithtrueAt the time, it indicates that the category is the category belonging to the current page. You can use this property to add a CSS class and achieve a highlight effect.

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,