Label for category list `categoryList` how to get and display article, product category information?

In AnQiCMS, managing and displaying website content, the role of category information is crucial.Whether it is to organize product catalogs or sort articles, a clear classification structure can greatly enhance user experience and the navigation efficiency of the website. AndcategoryListThe tag is a powerful tool provided by AnQiCMS, helping us flexibly retrieve and display these classification information.

categoryListThe main function of the label isRetrieve and cyclically display the classification data on your website.It can meet your needs, retrieve the top-level categories, subcategories, even all categories under a specific content model (such as articles or products), and display this 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 used 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 the name you customize for the category list you obtained, for examplecategoriesorproductCategories.参数It is the key you use to filter and control which categories to obtain.

Next, let's take a look at some commonly used parameters, which will determine the type of category list you get:

  1. moduleId: Specify the content model.This is one of the most core parameters. AnQiCMS supports various content models (such as the default article model and product model), and you need to explicitly tell the system which model you want to get the categories under.

    • If you want to getArticle Categoryusually willmoduleIdis set to1.
    • If you want to getProduct categoriesusually willmoduleIdis set to2. For example:moduleId="1"will only retrieve all categories under the article model.

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

    • To get alltop-level categories, willparentIdis set to0. This is a common way to build the main navigation menu.
    • To get a specific category undersubcategories, you can placeparentIdto the parent category ofIdfor exampleparentId=item.IdThis is usually used in loops to display secondary or multi-level menus)
    • If you want to display the category on the current category pagesibling category(i.e., other categories at the same level) can be setparentId="parent".

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

  4. limitControl the number of displayed items.If you only want to display a fixed number of categories, you can uselimitParameters to limit. For examplelimit="5"It will only display the first 5 categories. It also supports more advanced features.offsetpatterns, such aslimit="2,10"Starting from the second category, retrieve 10 categories.

  5. siteId: Multi-site data callUnder a multi-site management scenario, if you need to call data from other sites, you can do so bysiteIdspecify this. Generally, there is no need to set this parameter.

What categories of information can you display?

While traversing in a loopcategoryListEach one obtaineditem(i.e., for each category) you can access various properties to display detailed information about the category, such as:

  • IdUnique ID of the category.
  • Title: The name of the category, usually used to display in navigation or lists.
  • LinkThe URL link of the category, click directly to jump to the category page.
  • DescriptionShort description of the category.
  • ContentDetailed content of the category, may contain HTML format, may need to display.|safefilter.
  • ParentIdThe parent ID of the category.
  • LogoThe thumbnail large image address of the category.
  • ThumbCategory thumbnail image address.
  • HasChildrenA boolean value indicating whether the category has subcategories, very suitable for dynamic menu expansion/collapse judgment.
  • IsCurrentA boolean value indicating whether the current category is the category of the current visited page, often used to highlight the current navigation item.
  • 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.

Assuming you want to display several main categories of the article model in 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 retrieves the maximum of 5 categories under the article model with ID 0 (top level) and adds them to the categories of the current pageactiveStyle.

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

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

<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 get all the top-level categories under the product model. In the loop, bymainCat.HasChildrenCheck if there is a subcategory, if there is, 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 an article category list page (for example/category/news/), you may want to display the current category description at the top of the page, followed by listing the articles under the 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 retrieve the category title and description of the current page.archiveListThe tag is intype="page"In mode, it will automatically retrieve the article list based on the category ID of the current page.

Summary

categoryListTags are an indispensable part of AnQiCMS template development, allowing you to display the website's category structure in a highly flexible manner. By using it reasonablymoduleId/parentIdWith parameters, and combining various classification attributes, you can build a user-friendly and powerful navigation and content organization system.

Frequently Asked Questions (FAQ)

1. How do I get all article categories and product categories in the template without distinguishing between levels?

You can use two separatecategoryListtags to specify the article and product models respectivelymoduleIdAnd, toallthe parameter totrue. 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. How to only display the child categories of the current category on a category detail page, rather than all the child categories of the model?

On the category detail page, AnQiCMS will automatically identify the category ID of the current page. You can use this feature toparentIdSet the parameter 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 when you arecategoryListinvoking from outside the tag{{category.Id}}then,categoryIt usually refers to the category object in the current page context. If the current context does not have an explicitcategoryobject, you may need to usecategoryDetailto obtain the current category information.

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

In AnQiCMS backend, you can add custom fields to the content model (such as article model or product model) categories. Once added and filled with data, these custom fields can be directly accessed through categories in the templateitemAccess an object through, or bycategoryDetailtags to obtain.

For example, if you have added a category with the namebanner_image: custom field

{# 在 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) matches the "call field" name set in the back end.