In modern web design, a clear and intuitive navigation system not only greatly enhances user experience but is also an indispensable part of search engine optimization (SEO).A multi-level classification menu, especially a three-level nested menu, can effectively organize a large amount of content, allowing users to quickly locate the information they need, and also helps search engines understand the hierarchical structure of the website.As an experienced website operation expert, I am well aware that it is simple and efficient to implement such a function in AnQiCMS (AnQi CMS).AnQiCMS with its flexible template engine and powerful tag system, makes the display of website content very smooth.
Today, let's delve into how to巧妙ly implement nested hierarchical classification display in the AnQiCMS template, taking the three-level menu as an example, to help you create a well-structured, user-friendly website navigation.
Understanding the multi-level classification mechanism of AnQiCMS
AnQiCMS provides powerful classification management functions in content organization.Each document or product must belong to a category, and these categories themselves can establish parent-child relationships to form a hierarchical structure.This hierarchical relationship is the basis for achieving multi-level menus.
In the AnQiCMS backend management interface, you can create and manage these categories by navigating to 'Content Management' -> 'Document Category'.When creating or editing a category, you can specify the 'document model' it belongs to (such as the article model or product model) and select its 'parent category'.When a category's parent category is specified, it naturally becomes a subcategory.If you select 'Top Level Category', then this category is at the top level.
UnderstandingmoduleIdandparentIdThese two core concepts are crucial:
moduleId: Indicates which content model the category belongs to (such as article model ID 1, product model ID 2, etc.).In AnQiCMS, the classifications of different content models are independent of each other.parentId: Defines the parent category of the classification,parentId="0"It usually represents the top-level category. When we get the subcategory, we need to setparentIdit as the parent category ofId.
master the key template tags:categoryList
To implement nested display of multi-level categories, AnQiCMS provides a powerful template tag:categoryList. This tag helps us get the classification list under specified conditions and supports flexible parameter configuration.
categoryListThe basic usage of tags is:{% categoryList 变量名称 with moduleId="1" parentId="0" %}...{% endcategoryList %}.
变量名称: Used to receive the returned classification list data, for example.categoriesorsubCategories.moduleId: Specify which content model's categories to retrieve.parentId: Specify which parent category's subcategories to retrieve. Set it to"0"Retrieve all top-level categories.- In
forLoop throughcategoryListEach category item returned (itemWhenitem.Id: The unique identifier ID of the category.item.Title: Category name.item.LinkThe link address of the category.item.HasChildrenA boolean value indicating whether the current category contains subcategories. This is very useful for determining whether to continue rendering the next level of menu.
MasteredcategoryListTags and parameters, we can start building multi-level nested menus.
Write template code: Implement three-level nested menus
In the AnQiCMS template files (usually located intemplate/您的模板名称/Under the directory), you can usecategoryListThe nested tag ability to build a three-level menu. Below is an example code structure for implementing a three-level menu, which you can place in the public header of the website (such aspartial/header.html），or any place where a menu needs to be displayed.
{# 外层 ul 标签，承载整个菜单结构 #}
<ul class="main-menu">
{# 获取顶级（一级）分类列表，假设我们获取文章模型（moduleId="1"）下的顶级分类 #}
{% categoryList categories with moduleId="1" parentId="0" %}
{# 循环遍历每一个顶级分类 #}
{% for item in categories %}
{# 一级菜单项 #}
<li class="menu-item {% if item.IsCurrent %}active{% endif %} {% if item.HasChildren %}has-submenu{% endif %}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
{# 判断当前一级分类是否有子分类，如果有，则继续渲染二级菜单 #}
{% if item.HasChildren %}
<ul class="submenu level-2">
{# 获取当前一级分类 (item.Id) 下的所有二级分类 #}
{% categoryList subCategories with parentId=item.Id %}
{# 循环遍历每一个二级分类 #}
{% for inner1 in subCategories %}
{# 二级菜单项 #}
<li class="menu-item {% if inner1.IsCurrent %}active{% endif %} {% if inner1.HasChildren %}has-submenu{% endif %}">
<a href="{{ inner1.Link }}">{{ inner1.Title }}</a>
{# 判断当前二级分类 (inner1.Id) 是否有子分类，如果有，则继续渲染三级菜单 #}
{% if inner1.HasChildren %}
<ul class="submenu level-3">
{# 获取当前二级分类 (inner1.Id) 下的所有三级分类 #}
{% categoryList subCategories2 with parentId=inner1.Id %}
{# 循环遍历每一个三级分类 #}
{% for inner2 in subCategories2 %}
{# 三级菜单项 #}
<li class="menu-item {% if inner2.IsCurrent %}active{% endif %}">
<a href="{{ inner2.Link }}">{{ inner2.Title }}</a>
</li>
{% endfor %}
{% endcategoryList %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endcategoryList %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endcategoryList %}
</ul>
The core of this code is incategoryListNested layers of tags.
- The first loop: Outermost
{% categoryList categories with moduleId="1" parentId="0" %}Get all top-level categories (first-level menu). - second loopat each first-level menu item, we use again
{% categoryList subCategories with parentId=item.Id %}get the current first-level category (item.Id) all subcategories under, which constitute the second-level menu. - third loopSimilarly, within each second-level menu item, we continue to use
{% categoryList subCategories2 with parentId=inner1.Id %}Get the current second-level category (inner1.Id) all the subcategories under it, thereby achieving a three-level menu.
Each level passes through{% if item.HasChildren %}or{% if inner1.HasChildren %}To determine whether to render the next level submenu, this can avoid generating empty<ul>tags, to maintain the tidiness of the HTML structure. At the same time,item.IsCurrentThe attribute helps you determine whether the current category is the page being accessed by the user, making it convenient to addactiveclass to highlight.
Remember, the above code is just the HTML structure, you also need to配合CSS to beautify the menu style, such as setting the display of the submenu on hover, adjusting color, font size, and so on.
Optimization and注意事项
Implementing a multi-level menu is not just a coding task, but also requires considering some optimization and operational details:
- Performance considerationAlthough AnQiCMS is developed based on Go language with excellent performance, a too deep or large menu structure may still increase the burden of database queries and page rendering.When designing categories, it should be kept as reasonable as the hierarchical depth and number of categories.Consider using JavaScript for lazy loading or on-demand loading for unnecessary submenus on the initial screen.
- User Experience (UX):
- Responsive DesignMake sure your multi-level menu displays and operates well on different devices (PC, tablet, mobile).On mobile devices, hamburger menus or accordion menus are usually used to handle multi-level navigation.
- Visual feedback: Clearly indicate the user's current menu level and which menu items contain sub-menus through different colors, icons, or animation effects.
- AccessibilityEnsure the menu is accessible to all users, including those using screen readers. Use semantic HTML tags (
nav,ul,li,a) are very important.
- SEO-friendly:
- Clear URL structure: AnQiCMS supports custom pseudo-static rules, which helps generate clear and meaningful URLs, such as
/category/level1/level2/level3/article-title.html. - Internal link：Multi-level menus naturally form a strong internal link structure, which helps search engine spiders discover and index the deep pages of your website and pass page authority. *
- Clear URL structure: AnQiCMS supports custom pseudo-static rules, which helps generate clear and meaningful URLs, such as