When building a website, a clear and organized content structure is the key to improving user experience and SEO performance.AnQiCMS (AnQiCMS) is able to help us easily implement complex multi-level nested displays with its flexible content model and powerful template engine, and to perform sub-category judgments, thereby creating highly customized navigation and content layouts.
Backend settings: Build category hierarchy
In the background of AnQi CMS, the category management function (usually located under the "Document Category" menu below "Content Management") is the basis for multi-level classification.
Then, create subcategories for these top-level categories.When adding a subcategory, you also need to select a document model, but the key is to point the 'parent category' to its parent category.公司新闻(Level 1) can have行业动态（二级），行业动态下又可以有国内新闻（三级）。系统会妥善管理这些层级关系，为前端展示做好数据准备。
模板中实现多级分类嵌套显示
The Anqi CMS uses a syntax similar to Django template engine, allowing us to operate data in template files in a straightforward manner. To achieve nested display of multi-level classification, we will mainly usecategoryListtags, withforLoops and conditional statements.
Assuming we want to display multi-level categories in the website navigation bar or sidebar. First, we need to retrieve all top-level categories. This can be done bycategoryListLabel and setparentId="0"This can be achieved:
{% 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 above code,categoriesIt is an array containing all top-level categories.forThe loop will iterate over these categories one by one.itemThe variable represents the current category object being iterated.
To display subcategories, we can add a<li>Internal call againcategoryListlabel, and pass theIdasparentIdlist passed to the subcategory to obtain its下属的 subcategories:
{% 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 nested structure can clearly show the hierarchical relationship of categories. You can increase or decrease the nested levels according to your actual needs.
Determine if there is a subcategory 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. The Anqi CMS provides us withitem.HasChildrenThis very practical boolean attribute can be directly judged in the template.
item.HasChildrenThe attribute will tell us whether the current category (item) contains any subcategories. We can combine{% if ... %}Tag to control the display of content.
The example below is more optimized, it not only shows multi-level classification, but also displays some documents under the category when there are no subcategories, or directly displays 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 submenus.When a category does not have subcategories, we choose to display the list of articles below it instead of an empty submenu, which optimizes the user experience and enhances the visibility of the content.
Summary
AutoCMS provides a powerful and flexible template tag set, making it very easy to implement nested display of multi-level categories and subcategory judgment. By using it reasonably,categoryListTags anditem.HasChildrenProperties, you can build highly structured and feature-rich website navigation and content layouts to meet various complex website design requirements.Whether it is to improve user navigation efficiency or optimize search engine crawling, these techniques will give you a helping hand.
Common Questions (FAQ)
Can I display the image or description information of the category at the same time in the multi-level category display?Of course you can. In
categoryListin the loop,itemVariables otherId/Title/LinkandHasChildrenIn addition to the basic properties such asLogo(thumbnail, full image),ThumbThumbnail andDescription（Category Description） fields. You can directly call this information in the template by{{ item.Logo }}or{{ item.Description }}and so on. If the category content contains HTML tags, please remember to use{{ item.Content|safe }}a filter to avoid the content from being escaped.How to limit the number of subcategories displayed at each hierarchical level?You can do this in each nested
categoryListtag.limitparameter to control the display quantity. 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, such aslimit="2,5"to indicate the second