How to retrieve and display the list of AnQiCMS articles or product categories using the `categoryList` tag?

Build a feature-rich and content-rich website in AnQiCMS, categories are an indispensable part of organizing content.Whether it is to display articles, products, services, or build navigation menus, a clear classification structure can greatly enhance user experience and website maintainability.Today, let's take a deep dive into a very practical and flexible tag in AnQiCMS -categoryListIt can help you easily retrieve and display a list of articles or product categories.

categoryListThe tag is a powerful tool in the AnQiCMS template engine, its main function is to extract the required category data from the database according to the specified conditions, and display it in a list form on the front-end page.By reasonably using this tag, you can build various complex classification navigation, content aggregation modules, making the content organization of the website orderly.

categoryListOverview of tags: easily navigate category data

The basic usage format of this tag is very intuitive:

{% categoryList 变量名称 with 参数 %}
    {# 在这里循环输出分类数据 #}
{% endcategoryList %}

You need to specify a category list for变量名称for examplecategories/productCategoriesetc.), so within the tag, you can access the specific information of each category through this variable.witha series of keywords followed by参数These parameters are the key to filtering and customizing the category list.

Next, we will explain in detail.categoryListSeveral core parameters of the tag, allowing you to flexibly obtain classification data according to your actual needs.

Core parameter parsing: customize your classification list.

1. moduleIdSpecify the content model to accurately locate the classification sourceIn AnQiCMS, content can be attributed to different "models", such as article models (usually with ID of1）、product model（usually ID is for2) and so on.moduleIdThe parameter is to informcategoryListWhich model's classification do you want to get.

   • Example:
     • moduleId="1"：Get all article categories.
     • moduleId="2"：Get all product categories.

   If you are unsure of a model's ID, you can check it in the AnQiCMS backend under 'Content Management' -> 'Content Model'.

2. parentIdBuild hierarchical relationships, flexibly control the depth of categoriesCategories are often multi-level,parentIdThe parameter is used to control the position of the category you want to obtain in the hierarchical structure.

   • parentId="0"Get top-level categoriesThis is the most common usage, for example, used for the main navigation menu of a website. It lists all the first-level categories under the specified model.
     • Example:{% categoryList categories with moduleId="1" parentId="0" %}
   • DefaultparentId: Get the subcategories of the current categoryWhen you are on a category detail page or a category list page and do not specifyparentIdit will automatically obtain all the direct subcategories of the current category. This is very suitable for building secondary/third-level navigation for the sidebar.
     • Example:{% categoryList subCategories %}(Assuming the current page is a category page)
   • parentId="parent": Get the sibling categories of the current categoryThis parameter is very useful in some specific scenarios, such as when you want to display all同级 categories on a certain category page.This parameter is only valid when the current page is a category list page or detail page.
     • Example:{% categoryList brotherCategories with parentId="parent" %}

3. all: Get all categories, regardless of hierarchyIf you need to list all categories under a specified model, regardless of their level, you can useall=true. This may be used on some aggregation pages or in the global site map.

   • Example:{% categoryList allCategories with moduleId="1" all=true %}

4. limit: Control the number of displayed items, optimize the page layoutSometimes you don't need to display all categories, but only want to display the first few popular categories or a specified number of categories.limitThe parameter can help you achieve this goal. It supports two modes:

   • Single number:limit="10", indicating the display of the first 10 categories.
   • "Offset, count":limit="2,5"This indicates starting from the second category (index starts from 0, so it's actually the third), displaying 5 categories.
   • Example:{% categoryList topCategories with moduleId="1" parentId="0" limit="5" %}

5. siteId: Application in multi-site scenarios.If your AnQiCMS has deployed multiple sites and you want to call the category data of another site from one site, you can do so bysiteIdParameters are used to specify the ID of the target site. This is very useful when integrating data across sites. Generally, if you have only one site, you can ignore this parameter.

   • Example:{% categoryList otherSiteCategories with moduleId="1" parentId="0" siteId="2" %}

Master the classification of data:itemTreasure in the variables

WhencategoryListAfter the tag successfully retrieves the classification list, you can iterate through it by loop变量名称(such ascategoriesTo access the details of each category. In the loop, each category object is usually nameditem(You can customize, such ascategoryIt contains rich fields, for you to display in the template:

• item.Id: The unique identifier ID of the category.
• item.Title: Category name, this is the most commonly displayed content.
• item.Link: Category access link, used to build clickable navigation.
• item.Description: A brief description of the category, which may be used for SEO or displayed in the category list.
• item.Content: Detailed content of the category (if filled in back-end), which may be displayed on the category detail page.
• item.ParentId: The parent category ID of the current category, used to determine the hierarchy relationship.
• item.Logo: The address of the large image or Banner image of the category.
• item.Thumb: Category thumbnail address, often used to display small icons or images in lists.
• item.SpacerA special prefix, usually used to generate indentation in multi-level classification lists to visually distinguish levels.
• item.HasChildrenA boolean value (trueorfalse), indicates whether the current category has subcategories. This is very critical for building dynamic menus or displaying different content based on whether there are subcategories.
• item.IsCurrentA boolean value indicating whether the current category is the category of the current page. Often used to add in navigation.activeClass name, highlighted.
• item.ArchiveCount: The number of documents (articles or products) included in the current category.

Practical exercise:categoryListusefulness

After mastering the parameters and fields, let's take a look at some common practical scenarios:

1. Display the top-level navigation of the website (top categories)

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

This example shows how to get all top-level categories under the article model and add them to the current category.activeStyle.

2. Build a multi-level category menu in the sidebar

<aside class="sidebar-nav">
    <h3>产品分类</h3>
    <ul>
        {% categoryList productMainCategories with moduleId="2" parentId="0" %}
            {% for mainCat in productMainCategories %}
                <li class="{% if mainCat.IsCurrent %}active{% endif %}">
                    <a href="{{ mainCat.Link }}">{{ mainCat.Title }}</a>
                    {% if mainCat.HasChildren %}
                        <ul>
                            {% categoryList subCategories with parentId=mainCat.Id %} {# 获取当前主分类的子分类 #}
                                {% for subCat in subCategories %}
                                    <li class="{% if subCat.IsCurrent %}active{% endif %}">
                                        <a href="{{ subCat.Link }}">{{ subCat.Title }}</a>
                                    </li>
                                {% endfor %}
                            {% endcategoryList %}
                        </ul>
                    {% endif %}
                </li>
            {% endfor %}
        {% endcategoryList %}
    </ul>
</aside>

This example utilizesHasChildrenand nestedcategoryListtags to dynamically build a two-level product category menu.

3. Display the latest articles or products under different categories on the homepage

This is a common content aggregation method, allowing visitors to see the latest dynamic of the website at a glance.

{% categoryList featuredCategories with moduleId="1" parentId="0" limit="3" %}
    {% for cat in featuredCategories %}
        <section class="category-section">
            <h3><a href="{{ cat.Link }}">{{ cat.Title }}</a></h3>
            <p>{{ cat.Description }}</p>
            <ul class="article-list">
                {% archiveList latestArticles with type="list" categoryId=cat.Id limit="5" %}
                    {% for article in latestArticles %}
                        <li>
                            <a href="{{ article.Link }}">
                                <img src="{{ article.Thumb }}" alt="{{ article.Title }}">
                                <h4>{{ article.Title }}</h4>
                                <time>{{ stampToDate(article.CreatedTime, "2006-01-02") }}</time>
                            </a>
                        </li>
                    {% empty %}
                        <li>该分类暂无文章。</li>
                    {% endfor %}
                {% endarchiveList %}
            </ul>
        </section>
    {% endfor %}
{% endcategoryList %}

This example shows how to first obtain 3 top-level article categories, and then througharchiveListLabels get the latest 5 articles under each category.

Some tips:

• Label closure: Make sure to{% categoryList %}with the tag and{% endcategoryList %}Appear in pairs, otherwise it will cause template parsing errors.
• Variable names should be consistentIn{% categoryList 变量名称 %}The variable names defined in it should be consistent with the internal{% for %}When using the variable names to loop or directly access fields, they should be consistent.
• CombinecategoryDetailIf you need to obtain more detailed information for a specific category, such as its banner image or custom fields, you can use them together inside the loopcategoryDetailto pass the tag,item.IdJust do it.
• Performance consideration: AlthoughcategoryListVery flexible, but excessive nesting or a large number of calls on a single page may affect page loading speed. When designing complex structures, please pay attention to optimizing query and page rendering efficiency.

By the above introduction, you should have gained an understanding of AnQiCMS'scategoryList