How to use the `categoryList` tag to get and loop through the category list under the specified content model?

As an expert who has been deeply involved in the content operation of AnQiCMS for a long time, I fully understand the importance of the category list in website structure and user experience. Flexible usecategoryListTags, which can help us efficiently organize content, build a clear navigation system, and provide readers with a more accurate path to content discovery. Below, I will elaborate on how to usecategoryListLabel to get and loop to display the category list under the specified content model.

Using AnQiCMS'scategoryListLabel to get and loop to display the category list under the specified content model.

In the template development of AnQiCMS,categoryListTags are the core tools used to obtain website classification data.It allows us to accurately extract and display category information based on different needs, such as content models, hierarchical relationships, etc.This is crucial for building dynamic navigation, category list page sidebars, content filters, and other functions.

UnderstandingcategoryListThe core function of the tag

categoryListThe main function of the label is to retrieve classification data that meets specific conditions from the database.It supports various parameters to finely control the data retrieval range and method, and returns the results in a reusable and iterable object format, which is convenient for rendering in templates.categoryListwe usually combine{% for ... in ... %}loop tags to iterate over and retrieve the category data obtained.

Key parameter parsing: specifies content model and hierarchical control

To implement the retrieval of the category list under a specified content model,moduleIdthe parameters are the core. At the same time,parentIdthe parameters are used to control the hierarchical relationship of categories, helping us build multi-level category navigation.

moduleIdSpecify the unique identifier of the content model

moduleIdParameters are used to filter out categories belonging to a specific content model.In AnQiCMS, the content model is the basis of our custom content structure, such as the 'Article' model, 'Product' model, etc.Each content model has a unique ID.

  • Example of usage: moduleId="1"ormoduleId="2"If the "Article" model ID is 1 and the "Product" model ID is 2, thenmoduleId="1"only the article categories will be retrievedmoduleId="2"and only the product categories will be retrieved.
  • Application scenario: When we need to display different content model categories in different areas of the website (such as showing article categories in the sidebar of the article list page, and product categories in the sidebar of the product list page), this parameter is indispensable.

parentId: Control the hierarchy of categories.

parentIdParameter used to control the level of the category we want to get.

  • Get top-level category:SetparentId="0"Get all the top-level categories under the content model. This is very useful when building the main navigation menu.
  • Get the subcategories:When traversing the parent category, we can use the current parent category'sIdas the child category'sparentId, thereby realizing the nested display of multi-level categories.
  • Get sibling categories:toparentIdset"parent"(Valid only when the current page is a category list page), it can get the sibling categories of the current category.

limit: Control the number of items displayed and the offset

limitParameters used to limit the number of categories returned. It supports two modes:)

  • Fixed number:) limit="10"Indicates that up to 10 categories will be displayed.
  • Offset mode: limit="2,10"[en]Starting from the 2nd record, retrieve 10 categories of data. This is very useful in certain special layouts where it is necessary to skip the first few records.

[en]Other auxiliary parameters

  • allGet all levels of categoriesWhenall=truewhencategoryListWill get the specifiedmoduleIdall categories under it, regardless of their levels. This is very useful when it is necessary to display all categories comprehensively without concerning about the level structure.
  • siteId: Data call for multiple sitesFor users who use the AnQiCMS multi-site management feature,siteIdThe parameter allows us to specify from which site to obtain category data. Generally, if only managing one site, this parameter does not need to be filled in.

Loop traversal and data access

categoryListTags return a collection of iterable objects (usually namedcategoriesor any variable name you define). We use{% for ... in ... %}Access each category item in a loop. Within the loop, each category item is typically nameditem, and provides various fields for us to call.

itemCommon fields of an object:

  • Id:Category ID, a unique identifier.
  • Title:Category name, used for display on the frontend.
  • Link:URL link corresponding to the category, for easy navigation.
  • Description:Introduction or description of the category.
  • ParentId:ID of the parent category.
  • Logo/Thumb:The large image or thumbnail image address for category, which can be used as icons or backgrounds for category navigation.
  • Spacer:The prefix for indentation used to display the hierarchical relationship (e.g.,)--), which is used in conjunction with the multi-level category display effect.
  • HasChildren:Boolean value indicating whether the current category has subcategories. This is very useful when building dynamic menus.
  • IsCurrent:Boolean value indicating whether the current category is the category of the current page. It can be used to highlight the current navigation item.
  • ArchiveCount:The number of documents contained under the current category.

Practical Application Example

1. Retrieve all top-level categories under the "Article" model

The following code retrieves all top-level categories under the content model with ID 1 (assuming it is the 'article' model) and prints out their names and links.

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

2. Implement multi-level category navigation (take the 'Product' model as an example)

This example demonstrates how to build a two-level navigation, where the top-level categories come from the 'Product' model (assumingmoduleId="2"),and display its direct subcategories below.

<ul class="product-menu">
    {% categoryList productRootCategories with moduleId="2" parentId="0" %}
        {% for rootCategory in productRootCategories %}
            <li {% if rootCategory.IsCurrent %}class="active"{% endif %}>
                <a href="{{ rootCategory.Link }}">{{ rootCategory.Title }}</a>
                {% if rootCategory.HasChildren %}
                    <ul class="submenu">
                        {% categoryList productSubCategories with parentId=rootCategory.Id %}
                            {% for subCategory in productSubCategories %}
                                <li {% if subCategory.IsCurrent %}class="active"{% endif %}>
                                    <a href="{{ subCategory.Link }}">{{ subCategory.Title }}</a>
                                </li>
                            {% endfor %}
                        {% endcategoryList %}
                    </ul>
                {% endif %}
            </li>
        {% endfor %}
    {% endcategoryList %}
</ul>

3. Combine the document list to implement the content display under the category.

This scenario is common on the homepage or specific column pages, where it is necessary to display each category and the latest documents under the category. Suppose we have an article model (moduleId="1").

<section class="latest-articles">
    <h2>最新文章</h2>
    {% categoryList mainArticleCategories with moduleId="1" parentId="0" %}
        {% for category in mainArticleCategories %}
            <div class="category-block">
                <h3><a href="{{ category.Link }}">{{ category.Title }}</a></h3>
                <ul class="article-list">
                    {% archiveList articlesInCategory with type="list" categoryId=category.Id limit="5" %}
                        {% for article in articlesInCategory %}
                            <li>
                                <a href="{{ article.Link }}">
                                    {% if article.Thumb %}<img src="{{ article.Thumb }}" alt="{{ article.Title }}" />{% endif %}
                                    <h4>{{ article.Title }}</h4>
                                    <p>{{ article.Description|truncatechars:80 }}</p>
                                    <span class="date">{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
                                </a>
                            </li>
                        {% endfor %}
                    {% else %}
                        <li>该分类下暂无文章。</li>
                    {% endarchiveList %}
                </ul>
            </div>
        {% endfor %}
    {% endcategoryList %}
</section>

Summary

categoryListTags are a powerful and flexible tool in the AnQiCMS template system. It allows for precise