How to retrieve and display the list of all categories on the website?

In AnQi 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 categories.

One of AnQiCMS's core concepts 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 an independent classification system. Understanding this is the first step in obtaining the classification list, as it determines which type of content classification you want to display.

Core tool:categoryListTag explanation

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

categoryListThe basic usage of tags is usually like this:

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

Among them,categoriesThis is the variable name you specify for this category list, you can access and operate on the category data within the tag.参数This is used to precisely control which categories you want to obtain.

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 tomoduleIdIs1and 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 hierarchy of categories.
  • If you want to get alltop-level categories(That is, a category without a parent), it can beparentIdis set to0.
  • If you are on a category page, you want to getthe subcategories of the current category, usually it can be omittedparentIdThe parameter, the system will automatically identify the current category and obtain its direct subcategories.
  • 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), can beparentIdis set toparent.
• all: If set totrue,all=true, it will obtain the specifiedmoduleIdall categories under it, regardless of the level.)
• limitUsed to limit the number of categories returned. For examplelimit="10"It will only display 10 categories. It also supportsoffsetpattern, such aslimit="2,10"This means starting from the 2nd category, 10 categories are retrieved.
• siteIdIn a 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 tag will return a collection of classified object data (or known as an array). Within the tag, you can useforLoop through this collection and access the details of each category. Each category object includes the following common fields:

• Id: The unique identifier of the category.
• Title: Category name.
• LinkCategory page URL address.
• DescriptionCategory description.
• ParentIdParent category ID.
• LogoCategory large image or main image address.
• ThumbCategory thumbnail image address.
• HasChildrenA boolean value (trueorfalseIndicates whether the category has subcategories.
• IsCurrentA boolean value indicating whether the current category is the category of the current page.
• ArchiveCountThe number of documents (articles, products, etc.) included in this category.

Practice exercise: Methods for displaying various category lists.

MasteredcategoryListTags and parameters, we can start implementing various classification lists on the website.

1. Get and display all top-level categories

This is the most basic usage, commonly used as the main navigation or category entry on the homepage.

<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 retrievemoduleIdWith1All top-level categories of the article model, displayed in an unordered list. If there are no categories, it will display a prompt message.

Second, display hierarchical classification (nested structure)

For a classification system with many levels, we usually need to display it in the form of a nested list to help users clearly understand the classification structure. AnQiCMS allows you tocategoryListCall internallycategoryListTo 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, thereby constructing a clear tree structure.

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

On the category detail page or content detail page sidebar, you may want to dynamically display subcategories or同级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 allows to get siblings in the category page