When building website categories, we often need to display a clear, hierarchical structure to allow users to intuitively understand the classification of the website content.AnQiCMS provides powerful template tag features, fully supporting the display of multi-level nested tree structures in category lists, helping you easily create a user-friendly navigation system.
The core of achieving this effect lies in the clever use of Anqi CMScategoryListTemplate tags and their built-in hierarchical judgment features. By looping in the template, you can dynamically render a beautiful tree structure based on the parent-child relationship of the categories.
Understand the classification system of AnQi CMS
To display these classification levels in the front-end template, we will mainly rely oncategoryListTemplate tags. This tag can retrieve a list of categories under specified conditions and provides rich properties for each category item, whereParentId(Parent Category ID) andHasChildren[Is there a subcategory] is the key to building nested structures.
Step-by-step implementation of multi-level nested tree structure
Implement a multi-level nested tree structure, which usually requires the use of recursion or multiple layers of loops to construct. Here, we will adopt the method of multiple nested loops, and gradually demonstrate how to implement it.
First Step: Backend Category Settings
Firstly, make sure that your security CMS backend has created categories with parent-child relationships.When adding or editing categories in 'Content Management' -> 'Document Categories', set their hierarchical relationships through the 'Parent Category' option, and select a suitable 'Document Model'.
- Top Category:Electronics (ParentId: 0)
- Second Level Category:Phone (ParentId: Electronics ID)
- Third-level Category: Android Phone (ParentId: Phone ID)
- Third-level Category: Apple Phone (ParentId: Phone ID)
- Second Level Category:Computer (ParentId: Electronic Product ID)
- Third-level Category: Laptop (ParentId: Computer ID)
- Third-level Category: Desktop Computer (ParentId: Computer ID)
- Second Level Category:Phone (ParentId: Electronics ID)
Step 2: Write template code
Next, in your front-end template file (for example,list.htmlOr any page that needs to display category navigation), you can write the code in the following structure:
We first callcategoryListtags to get the top-level category list. To get the top-level categories, we willmoduleIdSpecify your content model ID (for example, the article model is usually1, the product model is usually2), and willparentIdparameter settings"0".
When iterating over these top-level categories, we check if each category item has a subcategory. This can be determined by usingitem.HasChildrenthe attribute. IfHasChildrenTrue, indicating that there are still subcategories under the current category, we can call it again internally.categoryListto get and render these subcategories. To get the correct subcategories, this timecategoryListofparentIdThe parameter needs to be set to the current parent category'sitem.Id. This pattern can continue to be nested according to your category depth requirements.
In addition,item.SpacerProperties can help you visually indent categories at different levels, making them look more like a tree. Please note,SpacerThe value usually contains HTML entities, so it needs to be used with|safea filter to ensure correct parsing.
The following is an example of nested three-level classification code, you can adjust the nesting level according to your actual needs:
{% categoryList categories with moduleId="1" parentId="0" %} {# 获取顶级分类，moduleId根据实际内容模型ID填写 #}
{# 一级分类开始 #}
<ul>
{% for item in categories %}
<li>
<a href="{{ item.Link }}">
{{ item.Spacer|safe }}{{ item.Title }} {# 使用Spacer进行缩进，并显示分类名称 #}
</a>
{# 判断是否有二级分类 #}
{% if item.HasChildren %}
{% categoryList subCategories with parentId=item.Id %} {# 获取当前一级分类的子分类 #}
{# 二级分类开始 #}
<ul>
{% for inner1 in subCategories %}
<li>
<a href="{{ inner1.Link }}">
{{ inner1.Spacer|safe }}{{ inner1.Title }} {# 使用Spacer进行缩进 #}
</a>
{# 判断是否有三级分类 #}
{% if inner1.HasChildren %}
{% categoryList subCategories2 with parentId=inner1.Id %} {# 获取当前二级分类的子分类 #}
{# 三级分类开始 #}
<ul>
{% for inner2 in subCategories2 %}
<li>
<a href="{{ inner2.Link }}">
{{ inner2.Spacer|safe }}{{ inner2.Title }} {# 使用Spacer进行缩进 #}
</a>
</li>
{% endfor %}
</ul>
{# 三级分类结束 #}
{% endcategoryList %}
{% endif %}
</li>
{% endfor %}
</ul>
{# 二级分类结束 #}
{% endcategoryList %}
{% endif %}
</li>
{% endfor %}
</ul>
{# 一级分类结束 #}
{% endcategoryList %}
In this code,item.LinkIt will output the access link of the classification,item.Titlewhich is the name of the classification. Through multiple layers<ul>and<li>Tags, combineditem.Spacerwith indentation, a clear hierarchical classification structure can be presented.
Optimization and expansion suggestions
- CSS style beautification:The code above only provides the basic HTML structure. You can add CSS styles to customize different levels of
<ul>and<li>Add different margins, background colors, font sizes, etc., to make the tree structure more visually appealing and readable. For example, you can use CSS selectorsul ulAdjust styles for nested lists. - Interactive collapse menu:If the category hierarchy is deep, expanding all at once may cause the page to be long.You can combine JavaScript (such as jQuery or other frameworks) to add a collapse/expand function to the category list.When the parent category is clicked, its child categories can be dynamically displayed or hidden, enhancing the user experience.
- Performance considerations:For websites with a vast number of categories and deep levels, excessive nested loops may have a slight impact on page loading speed.In most cases, the performance of Anqi CMS is sufficient.But if faced with extreme situations, consider whether it is necessary to appropriately limit the display quantity or depth of the categories.
By using the above method, you can achieve a multi-level nested tree structure display in the category list of Anqi CMS, providing your website visitors with a clearer and more convenient navigation experience.
Common Questions (FAQ)
1. Why is my classification not displaying a hierarchical relationship and is all flattened?This is usually because you did not correctly specify the 'parent category' when setting up categories in the background, resulting in all categories being recognized as top-level categories.Please check if the 'Parent Category' field for each category under 'Content Management' -> 'Document Categories' is configured as expected.categoryListTagsparentIdThe parameter settings are correct, for example, to get the top-level category, it should be set toparentId="0"When fetching subcategories, it should be set to the parent category'sitem.Id.
2.item.Spacer|safeof|safeWhat is the function, can it be removed?
|safeIt is a filter, its function is to tell the template engine,item.SpacerThe content in the variable is safe HTML and does not require escaping.item.SpacerTypically contains HTML entities used for indentation (such as), if removed|safeThese HTML entities may be displayed directly as text instead of being parsed by the browser to create indentation effects, thereby destroying the visual hierarchy. Therefore, it is not recommended to remove them.|safe.
How to limit the display depth of the category tree, for example, to only show two levels of categories?To limit the display depth, you can control the number of loop levels in the template code. For example, in the above code, if you only want to display up to the second level of categories, you just need to delete or comment out the third levelcategoryList subCategories2You can control the display depth of the category tree by modifying the conditional judgment and loop structure in the template.