How to implement nested category display with multiple levels and how to judge if there is a subcategory in the template?
When building a website, a clear and organized content structure is crucial for enhancing user experience and SEO performance.AnQiCMS (AnQiCMS) relies on its flexible content model and powerful template engine to help us easily implement complex multi-level nested display of categories, perform subcategory judgments, and thus create highly customized navigation and content layouts.
Backend settings: Build category hierarchy
In the Anqi CMS backend, the category management feature (usually located under the 'Document Category' menu below 'Content Management') is the foundation for implementing multi-level classification.
First, we will create the top-level category. When adding a new category, you need to select a 'document model' (such as 'article model' or 'product model'), and make sure that the 'parent category' is selected as 'top-level category'.This defines the main structure of your website content.
Continue, create subcategories for these top-level categories. When adding subcategories, you also need to select a document model, but the key is to point the 'parent category' to its parent category.The AnQi CMS allows you to create multi-level nested categories as needed, for example:公司新闻The (first-level) can have行业动态(Second level),行业动态There can also be国内新闻(Third level). The system will properly manage these hierarchical relationships, preparing data for front-end display."),
Implement multi-level classification nesting display in the template.
Our AnQi CMS adopts a syntax similar to the Django template engine, allowing us to operate data in a straightforward manner within template files. To achieve nested display of multi-level categories, we mainly usecategoryListtags, with the help offorLooping and conditional judgment.
Suppose we want to display multi-level categories in the website navigation bar or sidebar. First, we need to get all the top-level categories. This can be done bycategoryListtags and setparentId="0"to achieve:
{% categoryList categories with moduleId="1" parentId="0" %}
<ul>
{% for item in categories %}
<li>
<a href="{{ item.Link }}">{{ item.Title }}</a>
{# 这里我们将判断是否有子分类并显示 #}
</li>
{% endfor %}
</ul>
{% endcategoryList %}
In the code above,categoriesThis is an array containing all the top-level categories.forThe loop will iterate through these categories one by one.itemThe variable represents the current category object being looped over.
To display subcategories, we can add tags to each parent category's<li>Call internallycategoryListand pass the list of parent categories to the subcategories so that we can obtain their下属 subcategories:IdasparentId下属的子分类：
{% 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 %}
Such a nested structure can clearly demonstrate the level hierarchy of categories. You can increase or decrease the nested levels according to your actual needs.
Determine if there are subcategories in the template.
In the display of multi-level categories, we often hope to render the submenu structure only when a category indeed has subcategories, otherwise, it may only display a simple link. Anqi CMS provides us withitem.HasChildrenThis is a very practical boolean attribute, which can be directly used for judgment in the template.
item.HasChildrenThe attribute will tell us whether the current category (item) contains any subcategories. We can combine{% if ... %}Label to control the display of content.
This is an optimized example that not only shows hierarchical categories, but also displays some documents under the category when there are no subcategories, or directly shows a category link:
{% categoryList topCategories with moduleId="1" parentId="0" %}
<nav>
<ul>
{% for topCat in topCategories %} {# 遍历一级分类 #}
<li>
<a href="{{ topCat.Link }}">{{ topCat.Title }}</a>
{% if topCat.HasChildren %} {# 判断当前一级分类是否有子分类 #}
<ul class="sub-menu">
{% categoryList subCategories with parentId=topCat.Id %}
{% for subCat in subCategories %} {# 遍历二级分类 #}
<li>
<a href="{{ subCat.Link }}">{{ subCat.Title }}</a>
{% if subCat.HasChildren %} {# 判断当前二级分类是否有子分类 #}
<ul class="sub-sub-menu">
{% categoryList thirdCategories with parentId=subCat.Id %}
{% for thirdCat in thirdCategories %} {# 遍历三级分类 #}
<li>
<a href="{{ thirdCat.Link }}">{{ thirdCat.Title }}</a>
</li>
{% endfor %}
{% endcategoryList %}
</ul>
{% else %}
{# 如果二级分类没有子分类，可以显示该分类下的热门文档 #}
<ul class="category-articles">
{% archiveList articles with type="list" categoryId=subCat.Id limit="5" %}
{% for article in articles %}
<li><a href="{{ article.Link }}">{{ article.Title }}</a></li>
{% endfor %}
{% endarchiveList %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endcategoryList %}
</ul>
{% else %}
{# 如果一级分类没有子分类，可以直接显示该分类下的最新文档 #}
<ul class="category-articles">
{% archiveList articles with type="list" categoryId=topCat.Id limit="5" %}
{% for article in articles %}
<li><a href="{{ article.Link }}">{{ article.Title }}</a></li>
{% endfor %}
{% endarchiveList %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
{% endcategoryList %}
In this example, we usetopCat.HasChildrenandsubCat.HasChildrenPrecisely controlled the display of the submenu. When a category does not have subcategories, we choose to display the list of articles below it instead of an empty submenu, thus optimizing the user experience and improving the visibility of the content.
Summary
AnQi CMS provides a powerful and flexible template tag, which makes it very simple to implement nested display of multi-level categories and judgment of subcategories. By reasonable use ofcategoryListTags anditem.HasChildrenAttribute, you can build highly structured, feature-rich website navigation and content layout to meet various complex website design requirements.In order to improve user navigation efficiency or optimize search engine crawling, these techniques will help you a lot.
Frequently Asked Questions (FAQ)
Can I display category images or description information in multi-level category display at the same time?Of course. In
categoryListthe loop,itemVariables are used toId/Title/LinkandHasChildrenIn addition to basic attributes, it also includesLogo(Thumbnail, full image),,Thumb(Thumbnail) andDescription(Category description) fields. You can directly use them in the template through{{ item.Logo }}or{{ item.Description }}in this way to call this information. If the category content contains HTML tags, remember to use{{ item.Content|safe }}filter to prevent content from being escaped.How to limit the number of subcategories displayed at each category level?You can control the display quantity at each nested
categoryListthe tag withlimitparameter. For example,{% categoryList subCategories with parentId=topCat.Id limit="5" %}Only the first 5 subcategories will be displayed. If you need to start from a certain position, you can also uselimit="offset,count"Pattern, for examplelimit="2,5"which means starting from the second