How to implement nested display of multi-level category navigation with the `categoryList` tag in AnQiCMS?
When building a fully functional website, a clear and easy-to-navigate classification system is the key to improving user experience and optimizing content structure.AnQiCMS as an efficient enterprise-level content management system provides flexible template tags to meet the diverse needs of content display. Among them,categoryListTags are the core tools to achieve nested display of multi-level classification navigation.
UnderstandingcategoryListBasic functions of tags.
Firstly, let's understandcategoryListThe basic purpose of the tag. It is mainly used to retrieve the carefully set category data from the AnQiCMS backend, whether it is article categories, product categories, or other custom content model categories.categoryListCan be easily called. This tag is usually paired withmoduleIdParameters to specify which content model category to retrieve, for examplemoduleId="1"may represent the article model, andmoduleId="2"represents the product model.
And in order to build a multi-level category navigation,parentIdthe parameters become particularly important. When we need to retrieve the top-level category, we willparentIdis set to"0"Once you obtain the top-level category, the secret of the 'nested display' lies in how to use the data of these top-level categories to further query their subcategories.
Skillfully implement nested logic for multi-level classification
The AnQiCMS template system has a syntax style similar to Django, which makes it very intuitive to implement nested logic. Its core idea is to call again within a loop of a category list,categoryListLabel, and use the current loop item's ID (i.e.,item.Id) as the next callparentId. This way, each nested call can accurately obtain the subcategories of the current level category.
To make the navigation structure more intelligent and beautiful,categoryListThe label returns each category object (we usually name it in theforloopitem) all contain a very useful attribute:HasChildrenThis boolean property helps us determine whether the current category has subcategories. WhenHasChildrenWithtruethen we can conditionally render a submenu container and continue to nest calls within itcategoryListLabels to display the next level of classification; conversely, if there are no sub-categories, it is unnecessary to render an empty submenu, maintaining the interface's neatness.
Imagine we are building a three-level classification navigation for a website, which is usually a common depth in website design. We can organize the template code in this way:
<nav class="main-navigation">
<ul class="top-level-menu">
{# 首先，获取所有的顶级分类，moduleId根据你的实际内容模型ID设定，比如文章是1 #}
{% categoryList topCategories with moduleId="1" parentId="0" %}
{% for category in topCategories %}
<li>
<a href="{{ category.Link }}">{{ category.Title }}</a>
{# 判断当前顶级分类是否有子分类 #}
{% if category.HasChildren %}
<ul class="sub-level-menu">
{# 如果有子分类，则再次调用categoryList，将当前分类的ID作为parentId #}
{% categoryList secondLevelCategories with parentId=category.Id %}
{% for subCategory in secondLevelCategories %}
<li>
<a href="{{ subCategory.Link }}">{{ subCategory.Title }}</a>
{# 继续判断第二级分类是否有子分类 #}
{% if subCategory.HasChildren %}
<ul class="third-level-menu">
{# 获取第三级分类 #}
{% categoryList thirdLevelCategories with parentId=subCategory.Id %}
{% for thirdCategory in thirdLevelCategories %}
<li><a href="{{ thirdCategory.Link }}">{{ thirdCategory.Title }}</a></li>
{% endfor %}
{% endcategoryList %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endcategoryList %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endcategoryList %}
</ul>
</nav>
In this code, we first useparentId="0"Obtained all top-level categories. While traversing these top-level categories, if a category has child categories (category.HasChildrenWithtrue), we call it again internallycategoryListagain, but this time we setparentIdis set tocategory.IdThus, you can obtain the second-level subcategories under the top-level category. This process can be repeated to easily implement three-level and even more hierarchical category nesting display.
Practical suggestions and precautions
In practical applicationcategoryListWhen building multi-level category navigation with tags, there are still some aspects that are worth considering:
FirstlyMaintenance of background categories. Under the AnQiCMS backend 'Content Management' module, you can intuitively create, edit, and adjust the hierarchical relationship of categories.A clear backend management is the foundation of front-end presentation, ensuring that your classification structure is reasonable and orderly in the backend, so that the front-end tags can be correctly called and displayed.
Next isUser Experience. AlthoughcategoryListTags can be nested to any depth, but in actual website design, it is usually recommended that the navigation level not exceed three to avoid users feeling confused while searching for information.Deep navigation may not only increase the user's operational burden, but may also affect the crawling efficiency of search engines.
Moreover,SEO-friendlinessIt is always one of the strengths emphasized by AnQiCMS. By setting up the pseudo-static rules and category aliases in the background, we can generate clear and meaningful URLs for each level of category, which is crucial for enhancing the website's performance in search engines.
BycategoryListThe flexible combination of tags and template loops with conditional judgments allows us to easily master the multi-level classification function of AnQiCMS and build a website navigation that is both beautiful and practical.This can greatly enhance the discoverability of the content, as well as provide users with a more smooth and efficient browsing experience.
Frequently Asked Questions (FAQ)
1. Q: How to display only the category navigation of specified content models (such as articles or products)?
A:While usingcategoryListwhen using tags, you can go throughmoduleIdParameters are used to specify which content model category to retrieve. For example,moduleId="1"is usually used to retrieve article categories, andmoduleId="2"Used to get product categories. You can view the specific ID of each model in the "Content Model" management of the AnQiCMS background.
2. Q: Why is my subcategory not displaying even though it has been set up in the backend?
A:Please check the following points: First, make sure the externalcategoryListloop passes to the internalcategoryListofparentIdThe parameter is correct, as it uses the current parent category'sitem.Id. Next, confirm that you have specified the correct one in the child category'scategoryListcall as wellmoduleId. Finally, don't forget to check the parent category'sHasChildrenattribute istrueIf not, it may mean that there are indeed no direct subcategories under this category.
3. Q:item.HasChildrenThe attribute is to determine whether there are articles or subcategories under the category.
A: item.HasChildrenThe attribute is used to determine whether the current category isit has a subcategoryInstead of judging whether articles or other content have been published under this category. If a category has no subcategories, even if a large number of articles have been published under it,HasChildrenthe property will still befalse. If you need to determine whether there is content under the category, you cancategoryListcombine within the looparchiveListlabel, or useitem.ArchiveCount(The field in the category detail label, also present in the item of the category list label) to judge.