When building a fully functional website, a clear and easy-to-navigate categorization system is crucial for enhancing user experience and optimizing content structure.AnQiCMS as an efficient enterprise-level content management system, provides flexible template tags to meet diverse content display needs.categoryListTag is the core tool for implementing multi-level classification navigation nesting display.
UnderstandingcategoryListBasic functions of tags
First, let's understandcategoryListThe basic use of the tag. It is mainly used to obtain the carefully set classification data from the AnQiCMS backend, whether it is article classification, product classification, or other custom content model classifications.categoryListCan be easily invoked. This tag is usually paired withmoduleIdparameters to specify which content model's categories to retrieve, for examplemoduleId="1"may represent the article model, whilemoduleId="2"represents the product model.
To build multi-level category navigation, the parameters become particularly important. When we need to retrieve the top-level categories, we willparentIdput theparentIdset"0"Once the top-level category is obtained, the secret of 'nested display' lies in how to use the data of these top-level categories to further query their subcategories.
A clever implementation of nested logic for multi-level classification
The template system of AnQiCMS, whose syntax style is similar to Django, making nested logic implementation very intuitive. Its core idea is: to call again in a loop of a category list.categoryListTag, and use the current loop item's ID (i.e.,item.Id) as the next call'sparentId. This way, every nested call can accurately obtain the subcategories of the current level category.
In order to make the navigation structure more intelligent and beautiful,categoryListeach category object returned by the label (we usually name it in theforloop) contains a very useful property:item)}HasChildrenThis boolean property helps us determine if the current category has any subcategories.HasChildrenresponse fortrueWhen that time comes, we can conditionally render a submenu container and continue to nest calls within it.categoryListTags are used to display the next level of categories; otherwise, if there are no subcategories, there is no need to render an empty submenu to keep the interface neat.
Imagine we are building a three-level category navigation for a website, which is commonly a moderate depth in web 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 subcategories (category.HasChildrenresponse fortrue), we callcategoryList again, but this time weparentIdsetcategory.IdThus, obtain the second-level subcategory under this top-level category. This process can be repeated to easily achieve the display of classification nesting up to three levels or more.
Practical suggestions and precautions
In practical applicationscategoryListWhen building multi-level category navigation tags, there are still some aspects that are worth considering:
FirstlyMaintenance of background categories.Under the 'Content Management' module in the AnQiCMS backend, you can intuitively create, edit, and adjust the hierarchical relationship of categories.A clear backend management is the foundation for 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.
ThenUser Experience. AlthoughcategoryListLabels can be nested to any depth, but in actual website design, it is usually recommended that the navigation levels do not exceed three to avoid confusion when users are 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,【en】SEO friendlinessAnQiCMS emphasizes this as one of its key strengths.By setting up pseudo-static rules and category aliases through the backend, we can generate clear and meaningful URLs for each level of category, which is crucial for improving the website's performance in search engines.
PasscategoryListThe flexible combination of tags and templates with loops and 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 not only greatly enhances the discoverability of content, but also provides users with a more smooth and efficient browsing experience.
Common Questions and Answers (FAQ)
1. Q: How to only display the category navigation for specified content models (such as articles or products)?
A:When usingcategoryListwhen tagging, you can go throughmoduleIdSpecify the parameter to get the category under which the content model is located. For example,moduleId="1"It is usually used to get the article category,moduleId="2"Used to obtain product categories. You can view the specific IDs of each model in the "Content Model" management on the AnQiCMS backend.
2. Q: Why is my subcategory not displaying, even though it has been set in the backend?
A:Please check the following points: First, make sure that the externalcategoryListloop, pass to the internalcategoryListofparentIdThe parameter is correct, as it uses the current parent category'sitem.IdNext, confirm that you have specified the correct in the child category'scategoryListcall as well.moduleIdFinally, don't forget to check whether the parent category'sHasChildrenattribute istrueIf not, it may mean that there are indeed no direct subcategories under this category.
3. Q:item.HasChildrenWhat determines whether there are articles or subcategories under the category?
A: item.HasChildrenProperties are used to judge whether the current category isHas a lower-level subcategoryIt is not about whether articles or other content have been published under this category. Even if a large number of articles have been published under a category without any subcategories,HasChildrenthe attribute will still befalseIf you need to determine if there is content under a category, you can.categoryListCombine within a loop.archiveListUse tags, or utilizeitem.ArchiveCount(To judge based on the field in the category detail tag and the item in the category list tag)