The organization of website content is crucial for user experience and information retrieval efficiency.A clear classification structure not only helps visitors quickly find the information they need, but also effectively enhances the professionalism of the website and user retention rate.In AnQiCMS (AnQiCMS), the flexible template tag system makes it very convenient to display the subcategory list of a specified category.
Core Tool:categoryListThe clever use of tags
To implement displaying the child category list of a specified category in AnQi CMS, we mainly usecategoryListTemplate tag. This tag is specifically used to retrieve the classification data of a website, and through its powerful parameter configuration, accurately locate the sub-category we need.
The AnQiCMS template syntax is similar to the Django template engine, variables are enclosed in double braces{{变量}}Define, logic control tags such asif/forthen use single braces and percent signs{% 标签 %}Define.
Understand the key parameters:moduleIdwithparentId
While usingcategoryListWhen labeling, there are two core parameters that you need to understand:
moduleId(Model ID):AnQi CMS supports flexible content models such as article models, product models, etc. Each category belongs to a specific content model.moduleIdThe parameter is used to specify which content model category you want to retrieve.- 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, the product model ID is2. If you are not sure, you can 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 categories.- When
parentIdis set to0then,categoryListIt will retrieve all top-level categories under the specified model. - When
parentIdWhen set to a specific category ID (for exampleparentId="123"), it will retrieve all direct child categories represented by that ID. - In addition,
parentIdCan be set asparentIt 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 are focusing on the topic of 'How to display the subcategory list of a specified category in AnQi CMS' and demonstrate it through actual template code exercises.
Practice exercise: Display the list of child categories of the specified category
Assuming you have a category whose ID is known (such as through URL parameters, or hardcoded in a template, or obtained through other tags), you want to display all the direct subcategories under this category.
This is a template code example that achieves 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" %}Tag to get the specified ID (here is the5The category details. The advantage of this is that even if you only know one ID, you can also get the category title (parentCategory.Title) used for display and obtain the category ID (parentCategory.Id) for the next step. - Then,
{% categoryList subCategories with parentId=parentCategory.Id %}Is the core. It tells Anqi CMS to look up the following.parentCategory.IdAll child categories of the parent category as. {% for item in subCategories %}Loop through each of the child categories obtained.{{ item.Link }}It will output the access link of the subcategory.{{ item.Title }}It will output the name of the subcategory.{{ item.ArchiveCount }}It can display how many documents are under this subcategory (if needed for your business).{% empty %}Block is a very practical feature, whensubCategoriesWhen the list is empty, it will execute its content to avoid a blank page.
Advanced: Display of nested subcategories in multiple levels.
If your website category structure is relatively complex and you need to display multi-level subcategories, you can use nestingcategoryListand tags to combineitem.HasChildrenattributes to achieve this.item.HasChildrenIs a boolean value used to determine whether the current category still has 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 make recursive calls (even though it is explicit nesting).categoryListBuild multi-level category navigation.item.HasChildrenEnsured that the corresponding list will only be rendered when there are child categories.<ul>Thus maintaining the cleanliness of the page structure.
Practical suggestions
- Template organization:In order to improve readability and maintainability, you can consider encapsulating the complex classification list logic into a separate template fragment (for example
partial/sub_category_list.html)，then use{% include %}Introduce tags where needed. This can prevent the main template file from becoming too bulky. - Performance consideration: In theory, you can nest any number of layers, but in practical applications, too deep category levels and too many nested loops may affect page loading performance.Suggest designing reasonably based on the actual website structure and performance requirements.
- Style beautification:This code only provides the HTML structure. You need to combine it with CSS to style these lists, such as adding indentation, icons, hover effects, etc., to enhance the visual presentation.
- Dynamically specify the category ID:In a real-world scenario, the category ID you specify may not be a fixed value, but one that is dynamically retrieved from the URL or automatically obtained from the current page context (such as on a category detail page). AnQi CMS will automatically identify the category information based on the current page URL, and you can omit it directly on the category detail page
idparameter,categoryDetailThe information of the current category will be automatically retrieved.
With these flexible template tags and parameters, Anqicms can help you easily build clear and powerful category navigation, effectively improving the content organization capabilities and user experience of the website.
Frequently Asked Questions (FAQ)
Q1: How can I display the list of all subcategories of the current article category on the article detail page?
A1: You can usearchiveDetailThe tag retrieves the category ID of the current article and then uses this ID asparentIdThe parameter is passed to `category'