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 the maintainability of the website.categoryListIt can help you easily get and display a list of articles or product categories.
categoryListTags are a powerful tool in AnQiCMS template engine, mainly used to extract classification data that meets your specified conditions from the database and present it in a list format for display on the front-end page.By using this tag reasonably, you can build various complex classification navigation and content aggregation modules, making the content organization of the website well-organized.
categoryListTag Overview: Master category data effortlessly
The basic usage format of this tag is very intuitive:
{% categoryList 变量名称 with 参数 %}
{# 在这里循环输出分类数据 #}
{% endcategoryList %}
You need to specify a category list for变量名称[for example]categories/productCategoriesetc.), so within the tag, you can access the specific information of each category through this variable.withkeywords followed by a series of参数These parameters are the key to filtering and customizing your category list.
Next, we will interpret it in detail.categoryListThe core parameters of the label, allowing you to flexibly obtain classified data according to your actual needs.
Core parameters explanation: Customize your classification list
moduleId指定内容模型，精准定位分类来源在AnQiCMS中，内容可以归属于不同的“模型”，比如文章模型（通常ID为1）、Product Model（usually ID is2）etc.moduleIdParameters are to tellcategoryListWhich model's categories do you want to get.- Example:
moduleId="1"：Get all article categories.moduleId="2"：Get all product categories.
If you are unsure about the ID of a model, you can check it in the 'Content Management' -> 'Content Model' section of the AnQiCMS backend.
- Example:
parentId：Build hierarchical relationships, flexible control over category depth.Categories are often multi-level.parentIdThe parameters are used to control the position of the category you want to obtain in the hierarchical structure.parentId="0"：Get top-level categories.This is the most common usage, for example, used for the main navigation menu of a website. It lists all first-level categories under the specified model.- Example:
{% categoryList categories with moduleId="1" parentId="0" %}
- Example:
- Not specified
parentId: Get the subcategories of the current categoryWhen you are on a category detail page or a category list page, no specificationparentIdwill automatically get all the direct subcategories of the current category. This is very suitable for building the second/third level navigation of the sidebar.- Example:
{% categoryList subCategories %}(Assuming the current page is a category page)
- Example:
parentId="parent": Get the sibling categories of the current categoryThis parameter is very useful in certain specific scenarios, such as when you want to display all the same-level categories on a certain category page.This parameter is only valid on the current page when it is a category list page or a detail page.- Example:
{% categoryList brotherCategories with parentId="parent" %}
- Example:
all: Get all categories without concerning the 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 global site maps.- Example:
{% categoryList allCategories with moduleId="1" all=true %}
- Example:
limit：Control the display quantity, optimize the page layoutSometimes you do not need to display all categories, but only want to display the first few popular categories or a specified number of categories.limitParameters can help you achieve this goal. It supports two modes:- Single number:
limit="10", indicating the display of the first 10 categories. - "Offset, number":
limit="2,5"Indicates starting from the second category (index starts from 0, so it is the third one), displaying 5 categories. - Example:
{% categoryList topCategories with moduleId="1" parentId="0" limit="5" %}
- Single number:
siteIdApplication in multi-site scenariosIf your AnQiCMS has deployed multiple sites and you want to call the category data of another site in one site,siteIdSpecify the target site ID with the parameter. This is very useful when integrating cross-site data. Generally, if you have only one site, you can ignore this parameter.- Example:
{% categoryList otherSiteCategories with moduleId="1" parentId="0" siteId="2" %}
- Example:
Mastering classification data:itemTreasure in variables
WhencategoryListAfter successfully obtaining the classification list, you can iterate through it with a loop变量名称(such ascategories）to access detailed information for each category. Inside the loop, each category object is usually nameditem（You can customize, such ascategoryIt includes a wealth of fields, allowing you to display them in the template:
item.Id: The unique identifier ID of the category.item.Title: The name of the category, which is the most commonly displayed content.item.Link: The access link of the category, used to build clickable navigation.item.Description：Category brief description, may be used for SEO or displayed in category lists.item.Content：Detailed content of the category (if filled in on the backend), may be displayed on the category detail page.item.ParentId：当前分类的上级分类ID，用于判断层级关系。item.Logo：分类的大图或Banner图地址。item.Thumb：Category thumbnail address, commonly used to display small icons or images in lists.item.SpacerAn English translation of 'auto' is 'English'.item.HasChildrenA boolean value indicating whether there is a subcategory under the current category. This is very useful for building interactive effects of multi-level dropdown menus.trueorfalseIndicates 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.IsCurrent：An English boolean value indicating whether the current category is the category on the current page. Often used to add it to navigation.activeClass name, highlighted display.item.ArchiveCount：The number of documents (articles or products) contained under the current category.
Practice Session:categoryListuses
After mastering the parameters and fields, let's take a look at some common practice scenarios:
1. Show 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 categoryactivestyles can be added.
2. Build the sidebar multi-level classification menu
<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 classification menu.
3. Show the latest articles or products under different categories on the homepage
This is a common way to aggregate content, allowing visitors to see the latest updates on 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 demonstrates how to first retrieve 3 top-level article categories, and then througharchiveListget the latest 5 articles under each category with the tag.
Some tips:
- Tag closing: Please make sure that
{% categoryList %}Tags and{% endcategoryList %}Pairs should appear together, otherwise it will cause template parsing errors. - Variable names should be consistent.: In
{% categoryList 变量名称 %}The variable names defined in{% for %}should be consistent with the variable names used when looping or directly accessing fields. - Combine
categoryDetailIf you need to get more detailed information about a specific category, such as its Banner image or custom fields, you can use them in combination within the loop.categoryDetailthe label, passed initem.Id. - Performance considerationsAlthough
categoryListExtremely flexible, but excessive nesting or a large number of calls on a single page may affect page loading speed. Please pay attention to optimizing query and page rendering efficiency when designing complex structures.
Through the above introduction, you should have already understood AnQiCMS'scategoryList