As an experienced security CMS website operations personnel, I know how crucial the flexibility of content organization and presentation is for attracting and retaining users.The site classification structure is not only the skeleton of content, but also an important path for users to explore and discover information.Today, let's delve deeply into the two core template tags of Anqi CMS—categoryListandcategoryDetailHow they help us efficiently obtain and display category lists and detailed information of individual categories.

Flexible construction of category navigation:categoryListPractical application of tags

In AnQi CMS,categoryListTags are a powerful tool for building various types of category navigation and content aggregation modules.As an operations manager, we are well aware that the clarity of website navigation and content organization is crucial for user experience and search engine optimization.Through this tag, you can easily control the display hierarchy, quantity, and filtering conditions, whether it is articles, products, or other custom content models,categoryListCan accurately pull the required categories.

UsecategoryListThe basic syntax of the tag is:{% categoryList 变量名称 with 参数... %}...{% endcategoryList %}Here, you can assign the obtained list of categories to a custom variable, for example,categoriesThen loop through these category data inside the tag.

categoryListThe core parameters and their operational value.

categoryListProvided with a variety of parameters, allowing you to finely control the classified data you obtain, which is particularly important in different operation scenarios:

  • moduleId: Specify the content model.This parameter allows you to explicitly specify the classification list of the content model you want to retrieve. For example, setmoduleId="1"You can retrieve the classification of the article model, andmoduleId="2"It may correspond to a product model. This is crucial for operating multiple content modules on a website (such as having both news and product showcases), to maintain clear separation of content.

  • parentId: Control category level parentIdThe parameter is the core of building hierarchical navigation. When building the main navigation, we usually only need the top-level categories, at this time, setparentId="0"Can meet the needs. And in the sidebar or dropdown menu, we may need to display the subcategories under a specific category, at which point we can useparentIdSet the target category ID to easily achieve it. Even when we need to display its同级分类on the specific category page, parentId="parent"The flexibility becomes apparent, it will automatically identify the parent category of the current category and retrieve all sibling categories under it, which is very helpful for optimizing user experience and internal link structure.

  • all: Get all categoriesWhen you need to retrieve all categories at once, without considering their hierarchy or parent-child relationships, for example, on a website's category archive page or site map generation,all=trueWill be very practical. If specified at the same timemoduleIdit will get all categories under the specified model.

  • limit: Limit the number of displayed items.On the homepage or in the sidebar and other locations, we usually don't want to display too many categories to avoid information overload.limit="10"This setting can help you control the number of items displayed. In addition, it also supportsoffsetpatterns, such aslimit="2,10"You can start getting ten data items from the third category, which is very flexible under certain special layout requirements.

  • siteId: Multi-site data callFor those who manage multiple sites in Anqi CMS, siteIdThe parameter is the key to implementing cross-site data calls. You can specifysiteIdto obtain category data from other sites, which provides great convenience when building content alliances or sharing resources.

Traverse and display category data

When you go throughcategoryListGet the category list and assign it to a variable (for examplecategories) After that, you can useforLoop to traverse these categories and useitemVariable accesses the detailed information of each category.itemThe variable contains rich classification fields, such as:

  • Id: The unique identifier ID of the category.
  • Title: The display name of the category.
  • LinkThis is the access link for the category, which is the basis for building navigation and content jump.
  • DescriptionThis is a brief description of the category, often used to enhance SEO effect or as supplementary information for navigation.
  • Content: Detailed introduction of the category.
  • ParentId: Parent category ID used to determine the hierarchy.
  • Logo/Thumb: A category image or thumbnail, which can be used for visual navigation or as a small banner on the category page.
  • HasChildrenA boolean value indicating whether the category has subcategories, which is very useful for dynamically generating menu structures.
  • ArchiveCount: The number of documents included in this category, which can intuitively display the richness of the category content.

Code example: Build multi-level category navigation

The following example shows how to build a classification navigation with up to three levels, which is very practical for e-commerce website product categories or information website column structures.

{% categoryList categories with moduleId="1" parentId="0" %}
{# 一级分类 #}
<ul>
    {% for item in categories %}
    <li>
        <a href="{{ item.Link }}">{{item.Title}}</a>
        <div>
            {% categoryList subCategories with parentId=item.Id %}
            {# 二级分类 #}
            <ul>
                {% for inner1 in subCategories %}
                <li>
                    <a href="{{ inner1.Link }}">{{inner1.Title}}</a>
                    <div>
                        {% categoryList subCategories2 with parentId=inner1.Id %}
                        {# 三级分类 #}
                        <ul>
                            {% for inner2 in subCategories2 %}
                            <li>
                                <a href="{{ inner2.Link }}">{{inner2.Title}}</a>
                            </li>
                            {% endfor %}
                        </ul>
                        {% endcategoryList %}
                    </div>
                </li>
                {% endfor %}
            </ul>
            {% endcategoryList %}
        </div>
    </li>
    {% endfor %}
</ul>
{% endcategoryList %}

This example goes through nestedcategoryListTag, has implemented the display of multi-level classification.HasChildrenAlthough the field is not directly used here, it can help you judge whether a submenu needs to be rendered in more complex dynamic menu logic.

Precisely present category details:categoryDetailDetailed analysis of tags:

When we want to display the detailed information of a category page on its own, or call the complete data of its category on a document detail page,categoryDetailTags are indispensable tools. They can help us obtain all metadata for a single category, thereby building richer and more attractive category pages.

categoryDetailThe basic usage of the label is:{% categoryDetail 变量名称 with name="字段名称" id="1" %}. AndcategoryListSimilarly, you can assign the obtained single category data to a variable, or directly throughnameParameters to obtain the value of a specific field.

categoryDetailcore parameters

categoryDetailThe parameter design focuses on obtaining details of specific categories:

  • idortoken: Specify the category preciselyBy default, when you use this tag on the category page, it will automatically identify the current category. But if you need to get information about other specific categories, by specifying itsid(Category ID) ortoken(URL alias) can be used to call accurately.tokenEspecially useful in pseudo-static URLs, you can directly get data through category aliases.

  • siteId: Multi-site data callwithcategoryListSame,siteIdThe parameter also supports calling the classification details of other sites in a multi-site environment.

Get and display the details of the classification.

categoryDetailTags mainly throughnameThe parameter is used to specify the classification field to be retrieved. The available fields include:

  • Id/Title/Link/Description/ParentId/ArchiveCountThese fields are similar tocategoryListofitemused to obtain basic information, URL, and content statistics.
  • Content: Detailed content of the categoryThis field contains the rich text content you enter when editing categories in the background. It supports Markdown rendering, and if your category content is in Markdown format, you can set it byrender=trueAutomatically converted to HTML.
  • Logo/Thumb: Cover image or thumbnail of the categoryThese fields are usually used to display prominent images at the top of the category page, as a visual guide.LogoMay be used for a larger Banner image,Thumbwhich may be a thumbnail version.
  • **Images: Category Banner