The organization of website content is crucial for user experience and information retrieval efficiency.An clear classification structure can not only help visitors quickly find the information they need, but also effectively improve the professionalism of the website and the retention rate of users.In AnQiCMS, the flexible template tag system makes it very easy to display a list of subcategories of a specified category.
Core Tools:categoryListThe magic use of tags
To implement the display of a specified category's subcategory list in the Anqi CMS, we mainly usecategoryListTemplate tags. This tag is specifically used to retrieve the classification data of the website and accurately locate the required subcategories through its powerful parameter configuration.
The template syntax of Anqi CMS is similar to the Django template engine, variables are enclosed in double curly braces{{变量}}Define logic control tags likeif/forUse single curly braces and percent signs{% 标签 %}Define.
Understand key parameters:moduleIdWithparentId
When usingcategoryListWhen labeling, there are two core parameters that you need to understand in depth:
moduleId(Model ID):Auto CMS supports flexible content models, such as article models, product models, etc. Each category belongs to a specific content model.moduleIdParameter used to specify the content model category you want to get.- You can view or create models in the "Content Management" -> "Content Model" section of the AnQi CMS backend, and find the corresponding model ID. In most cases, the article model ID is
1，Product model ID is2. If you are unsure, check the model details.
- You can view or create models in the "Content Management" -> "Content Model" section of the AnQi CMS backend, and find the corresponding model ID. In most cases, the article model ID is
parentId(Parent category ID):This is a key parameter for controlling the hierarchy of classification.- When
parentIdset0whencategoryListIt will obtain all top-level categories under the specified model. - When
parentIdWhen set to a specific category ID (for exampleparentId="123"), it will obtain all direct subcategories represented by that ID. - Also,
parentIdIt can also be set asparentThis is particularly useful on a category detail page, as it retrieves the sibling categories of the current category (i.e., other categories that share the same parent category as the current category).
- When
Now, we focus on the topic of 'How to display the child category list of a specified category in the AnQi CMS', and illustrate it specifically through actual template code practice.
Practice exercise: Display the subcategory list of the specified category
Assuming you have a category with a known ID (such as obtained through URL parameters, hard-coded in a template, or via other tags), you want to display all direct child categories of this category.
The following is an example of template code to achieve this goal:
{# 假设您要获取ID为X的分类（例如文章模型下ID为5的分类）的子分类列表 #}
{# 首先，如果需要动态获取指定分类的ID，可以使用 categoryDetail 标签 #}
{% categoryDetail parentCategory with id="5" %} {# 这里的 "5" 就是您要指定的分类ID #}
{% if parentCategory %}
<div class="subcategory-section">
<h3>{{ parentCategory.Title }} 的子分类:</h3>
<ul>
{# 使用 categoryList 标签，通过 parentId 参数指定父分类ID #}
{% categoryList subCategories with parentId=parentCategory.Id %}
{% for item in subCategories %}
<li>
<a href="{{ item.Link }}" title="{{ item.Title }}">
{{ item.Title }}
{# 如果需要显示子分类下有多少篇文章，可以使用 item.ArchiveCount #}
{% if item.ArchiveCount > 0 %}
({{ item.ArchiveCount }})
{% endif %}
</a>
</li>
{% empty %}
<li>目前没有子分类。</li>
{% endfor %}
{% endcategoryList %}
</ul>
</div>
{% else %}
<p>抱歉，未找到您指定的父分类。</p>
{% endif %}
In this code block:
- We first use
{% categoryDetail parentCategory with id="5" %}Label to get the specified ID (here is5）的分类详情。这样做的好处是，即使您只知道一个ID，也可以获取到分类的标题 (parentCategory.Title) 用于展示，并获取到分类ID (parentCategory.Id) Used for the next step. - Next,
{% categoryList subCategories with parentId=parentCategory.Id %}Is the core. It tells the security CMS to look forparentCategory.IdAll child categories as the parent category. {% for item in subCategories %}Loop through each child category obtained.{{ item.Link }}Will output the access link to the subcategory.{{ item.Title }}Will output the name of the subcategory.{{ item.ArchiveCount }}Can display how many documents are under this subcategory (if your business needs it).{% empty %}A block is a very practical feature, whensubCategoriesWhen the list is empty, it will execute its content to avoid a blank page.
Advanced: Nested display of multi-level subcategories.
If your website's category structure is complex and you need to display multi-level subcategories, you can use nestedcategoryList标签并结合item.HasChildrenattribute to achieve.item.HasChildrenis a boolean value used to determine whether the current category has any subcategories.
{# 假设我们想显示文章模型（moduleId="1"）下的所有顶级分类及其两级子分类 #}
{% categoryList level1Categories with moduleId="1" parentId="0" %}
<ul class="main-categories">
{% for level1 in level1Categories %}
<li>
<a href="{{ level1.Link }}">{{ level1.Title }}</a>
{% if level1.HasChildren %} {# 判断一级分类是否有下级分类 #}
<ul class="sub-categories level-2">
{% categoryList level2Categories with parentId=level1.Id %} {# 获取当前一级分类的子分类 #}
{% for level2 in level2Categories %}
<li>
<a href="{{ level2.Link }}">{{ level2.Title }}</a>
{% if level2.HasChildren %} {# 判断二级分类是否有下级分类 #}
<ul class="sub-categories level-3">
{% categoryList level3Categories with parentId=level2.Id %} {# 获取二级分类的子分类 #}
{% for level3 in level3Categories %}
<li><a href="{{ level3.Link }}">{{ level3.Title }}</a></li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endcategoryList %}
This code demonstrates how to build multi-level category navigation through recursive calls (although it is explicitly nested here).categoryListIt ensures that the corresponding category will only be rendered when there are subcategories.item.HasChildrenIt guarantees that only when there are subcategories will the corresponding category be rendered.<ul>List, thus keeping the page structure tidy.
Practical Tips
- Template organization:To improve readability and maintainability, you may consider encapsulating complex category list logic into separate template fragments (for example,
partial/sub_category_list.html)，then use{% include %}Labels should be introduced at the required locations. This can avoid the main template file from being too bulky. - Performance considerations:Theoretically, you can nest any number of layers, but in practical applications, excessively deep category levels and too many nested loops may affect page loading performance.Suggest to design reasonably according to the actual website structure and performance requirements.
- [en] Style beautification:The code above only provides the HTML structure.You need to combine CSS to style these lists, for example, add indentation, icons, hover effects, etc., to enhance the visual presentation.
- Dynamically specify the category ID:In actual scenarios, the 'Category ID you specify' may not be a fixed value, but instead dynamically obtained from the URL, or automatically retrieved through the current page context (such as on the category detail page). AnQi CMS will automatically identify category information based on the current page URL, and you can omit it directly on the category detail page.
idparameters,categoryDetailIt will automatically retrieve the information of the current category.
Through these flexible template tags and parameters, AnQi CMS can help you easily build clear and powerful category navigation, effectively enhancing the content organization capability and user experience of the website.
Common Questions (FAQ)
Q1: How can I display the list of all child categories that the current article belongs to on the article detail page?
A1: You can go througharchiveDetailTag gets the current article's category ID and then uses this ID asparentIdPass the parameter to `category