How to obtain and display article, product category information for the category list label `categoryList`?

Manage and display website content in AnQiCMS, where category information plays a crucial role.Whether it is organizing product catalogs or arranging article topics, a clear classification structure can greatly enhance user experience and the navigation efficiency of the website.categoryListThe label is a powerful tool provided by AnQiCMS, which helps us flexibly obtain and display these classification information.

categoryListThe main function of tags isRetrieve and cyclically display the classification data in your website.It can fetch top-level categories, subcategories, and even all categories under specific content models (such as articles or products) based on your needs, and display these data on the website page.

How to usecategoryListGet category information

to usecategoryListLabel, you first need to specify it in the template file, and it is usually paired with a loop structure to traverse the obtained category data. Its basic structure is as follows:

{% categoryList 变量名称 with 参数 %}
    {% for item in 变量名称 %}
        {# 在这里显示每个分类的详细信息 #}
    {% endfor %}
{% endcategoryList %}

Among them,变量名称This is a name you have customized for the category list you have obtained, for example,categoriesorproductCategories.参数This is a key you use to filter and control which categories are obtained.

Next, let's take a look at some commonly used parameters, which will determine what kind of classification list you get:

  1. moduleIdSpecify the content modelThis is one of the most core parameters.AnQiCMS supports various content models (such as, the default article model and product model), you need to explicitly tell the system which model's categories you want to retrieve.

    • If you want to getArticle categoriesusually will,moduleIdset1.
    • If you want to getProduct Categoriesusually will,moduleIdset2.moduleId="1"will only retrieve all classifications under the article model.

  2. parentId: Control the hierarchical relationshipThis parameter is used to specify the parent category ID of the category you want to retrieve, thus realizing the display of multi-level categories.

    • To retrieve allTop-level category,parentIdset0. This is a common way to build the main navigation menu.
    • To retrieve the content of a specific categorySubcategory，you can refer toparentIdto the parent categoryId[for example]parentId=item.Id, this is usually used in a loop to display secondary or multi-level menus).
    • If you want to display the content of the current category pagesibling category(i.e., same-level other categories), can be setparentId="parent".

  3. allGet all categoriesIf you need to get a certainmoduleIdall categories under it, regardless of the level, can be setallparameter settingstrue. For example:all=true. If you specify bothmoduleIdIt will retrieve all categories under the model.

  4. limit: Control the display quantity.If you only want to display a fixed number of categories, you can uselimitparameter to limit. For examplelimit="5"will only display the first 5 categories. It also supports more advancedoffsetMode, for examplelimit="2,10"Represents starting from the 2nd category and getting 10 categories.

  5. siteId: Data call for multiple sitesIn the multi-site management scenario, if you need to call data from other sites, you cansiteIdspecify it. Generally, there is no need to set this parameter.

Which category information can you display?

In the loop traversalcategoryListObtained for eachitem(i.e., each category) you can access various attributes to display the detailed information of the category, such as:

  • IdThe unique ID of the category.
  • Title: The name of the category, usually used to display in navigation or list.
  • Link：分类的URL链接，直接点击可跳转到该分类页面。
  • Description：分类的简短描述。
  • Content：分类的详细内容，可能包含HTML格式，显示时可能需要|safeFilter.
  • ParentId：The parent category ID of this category.
  • Logo: The thumbnail large image address of the category.
  • Thumb: The thumbnail address of the category.
  • HasChildren：A boolean value indicating whether this category has subcategories, very suitable for dynamic menu expansion/collapse judgment.
  • IsCurrentAn English translation of 'auto' is 'English'. The value has been translated accordingly.
  • ArchiveCountThe number of articles or products under this category (including subcategories).

Actual application example

Example 1: Retrieve and display the top-level category list of the article model.

If you want to display several main categories of the article model at the top navigation of the website:

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

This code will retrieve the top 5 categories under the article model with ID 0 (i.e., the top level) and add them to the current page's categoriesactivestyles can be added.

Example 2: Display the two-level category menu of the product model

If you have a product center, you need to display the main categories and their subcategories under it:

<div class="product-menu">
    {% categoryList mainProductCategories with moduleId="2" parentId="0" %}
        {% for mainCat in mainProductCategories %}
            <div class="main-category">
                <h3><a href="{{ mainCat.Link }}">{{ mainCat.Title }}</a></h3>
                {% if mainCat.HasChildren %}
                    <ul class="sub-categories">
                        {% categoryList subProductCategories with parentId=mainCat.Id %}
                            {% for subCat in subProductCategories %}
                                <li class="sub-item">
                                    <a href="{{ subCat.Link }}">{{ subCat.Title }} ({{ subCat.ArchiveCount }})</a>
                                </li>
                            {% endfor %}
                        {% endcategoryList %}
                    </ul>
                {% endif %}
            </div>
        {% endfor %}
    {% endcategoryList %}
</div>

Here, we first retrieve all top-level categories under the product model. In the loop, bymainCat.HasChildrenDetermine if there is a subcategory, if so, use it againcategoryListand pass inmainCat.Idto get the second-level category and display the number of products under each subcategory.

Example 3: Display the list of articles under the current category on the category page

On a list page of an article category (such as)/category/news/），You may want to display the current category description at the top of the page, and then list the articles under this category.

<article>
    <h1 class="category-title">{% categoryDetail with name="Title" %}</h1>
    <div class="category-description">{% categoryDetail with name="Description" %}</div>

    <ul class="article-list">
        {% archiveList articles with type="page" limit="10" %} {# categoryId参数会智能读取当前页面分类ID #}
            {% for article in articles %}
                <li>
                    <a href="{{ article.Link }}">
                        <h2>{{ article.Title }}</h2>
                        <p>{{ article.Description }}</p>
                        <span class="date">{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
                    </a>
                </li>
            {% empty %}
                <li>当前分类下没有文章。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
    {# 如果是分页列表，别忘了加上分页标签 #}
    {% pagination pages with show="5" %}
        {# 分页HTML结构 #}
    {% endpagination %}
</article>

In this example,{% categoryDetail with name="Title" %}and{% categoryDetail with name="Description" %}It will intelligently obtain the current page's category title and description.archiveListTags intype="page"In the mode, the article list will be automatically retrieved based on the current page's category ID.

Summary

categoryListLabels are an indispensable part of AnQiCMS template development, allowing you to display the site's category structure in a highly flexible manner. By using them reasonably,moduleId/parentIdParameters, combined with various category attributes, you can build a user-friendly and powerful navigation and content organization system.

Common Questions (FAQ)

1. I want to get all article categories and product categories in the template without distinguishing the levels, what should I do?

You can use two separate tagscategoryListto specify the article and product modelsmoduleId，and thenallparameter settingstrue. For example:

{# 获取所有文章分类 #}
{% categoryList allArticleCategories with moduleId="1" all=true %}
    {% for cat in allArticleCategories %}
        <a href="{{ cat.Link }}">{{ cat.Title }}</a>
    {% endfor %}
{% endcategoryList %}

{# 获取所有产品分类 #}
{% categoryList allProductCategories with moduleId="2" all=true %}
    {% for cat in allProductCategories %}
        <a href="{{ cat.Link }}">{{ cat.Title }}</a>
    {% endfor %}
{% endcategoryList %}

2. In a category detail page, how to only display the subcategories of the current category instead of all subcategories of the model?

On the category details page, AnQiCMS will automatically identify the category ID of the current page. You can use this feature to,parentIdThe parameter is set to the current category ID to get its direct subcategories.

{# 假设当前页面是某个父分类的详情页 #}
<ul class="sub-category-list">
    {% categoryList subCategories with parentId=category.Id %} {# 这里的 category.Id 会自动指向当前分类的ID #}
        {% for subCat in subCategories %}
            <li><a href="{{ subCat.Link }}">{{ subCat.Title }}</a></li>
        {% endfor %}
    {% empty %}
        <li>当前分类没有子分类。</li>
    {% endcategoryList %}
</ul>

Please note that when you arecategoryListcall from outside the tag{{category.Id}}whencategoryIt usually refers to the category object in the current page context. If there is no explicitcategoryobject, you may need to usecategoryDetailfirst to get the current category information.

3. How to set custom fields for categories and display them in templates?

In AnQiCMS backend, you can add custom fields to the content model categories (such as article model or product model). Once added and filled with data, these custom fields can be directly used in the template through categoriesitemAccess through an object, or bycategoryDetailyou can get it by tag.

For example, if you have added a category namedbanner_imagewith a name:

{# 在 categoryList 循环中直接访问 #}
{% categoryList categories with moduleId="1" parentId="0" %}
    {% for item in categories %}
        <a href="{{ item.Link }}">
            {{ item.Title }}
            {% if item.banner_image %}
                <img src="{{ item.banner_image }}" alt="{{ item.Title }} Banner">
            {% endif %}
        </a>
    {% endfor %}
{% endcategoryList %}

{# 或者在分类详情页通过 categoryDetail 标签访问 #}
{% categoryDetail currentCategory with name="banner_image" %}
{% if currentCategory %}
    <img src="{{ currentCategory }}" alt="Current Category Banner">
{% endif %}

Make sure the name of the custom field (such asbanner_image) is consistent with the "Field Name" set in the background.