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).Multi-level classification menu, especially the three-level nested menu, can effectively organize a large amount of content, allowing users to quickly locate the required information, and also helps search engines understand the hierarchical structure of the website.As an experienced website operation expert, I am well aware that implementing such a feature in AnQiCMS (AnQi CMS) is both simple and efficient.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巧妙地实现多级分类的嵌套显示 in AnQiCMS templates, taking the three-level menu as an example, to help you create a well-structured, user-friendly website navigation.
Understanding AnQiCMS's multi-level classification mechanism
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, forming a hierarchical structure.This hierarchical relationship is the foundation for implementing multi-level menus.
In AnQiCMS's 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 its "document model" (such as article model or product model) and select its "parent category".When a parent category is specified for a classification, it naturally becomes a subcategory.If you select 'Top Category', then this category is at the top level.
UnderstandingmoduleIdandparentIdThese two core concepts are crucial:
moduleId：指明了分类属于哪种内容模型（如文章模型ID为1，产品模型ID为2等）。In AnQiCMS, the categories of different content models are independent.parentId: Defines the parent level of the classification,parentId="0"usually indicates a top-level category. When we get subcategories, we need to setparentIdto its parent category.Id.
master key template tags:categoryList
To implement nested display of multi-level categories, AnQiCMS provides a powerful template tag:categoryListThis tag helps us obtain the classification list under specified conditions and supports flexible parameter configuration.
categoryListThe basic usage of the label is:{% categoryList 变量名称 with moduleId="1" parentId="0" %}...{% endcategoryList %}.
变量名称: Used to receive the returned classification list data, for examplecategoriesorsubCategories.moduleId：Specify which content model's categories to retrieve.parentId：Specify which parent category's child categories to retrieve. Set it to"0"Retrieve all top-level categories.- In
forto iteratecategoryListEach category item returned (itemWhen we are in this state, we can access the following key properties:item.Id: The unique identifier ID of the category.item.Title: The name of the category.item.Link: The link address of the category.item.HasChildrenAn English value indicating whether the current category contains subcategories. This is very useful for determining whether to continue rendering the next level of menu.
MasteredcategoryListLabels and parameters, and we can start building multi-level nested menus.
Write template code: Implement three-level nested menus.
In the template files of AnQiCMS (usually located in thetemplate/您的模板名称/In the directory), you can usecategoryListLabel nesting capability 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.partial/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 iscategoryListnested layers of tags.
- first loop: outer layer
{% categoryList categories with moduleId="1" parentId="0" %}get all top-level categories (first-level menu). - The second layer loopIn each first-level menu item, we use it again
{% categoryList subCategories with parentId=item.Id %}Get the current first-level category (item.Id) and all its subcategories, which constitute the second-level menu. - The third layer 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) and all its subcategories to achieve a third-level menu.
Each level is through{% if item.HasChildren %}or{% if inner1.HasChildren %}To determine whether the next level submenu needs to be rendered, which can avoid generating empty,<ul>tags, to keep the HTML structure neat. At the same time,item.IsCurrentThe property helps you determine if the current category is the page the user is visiting, making it convenient for you to addactiveclass to highlight display.
Please remember that the code above is just the HTML structure. You also need to cooperate with 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 multi-level menus is not just a coding task, it also requires considering some optimization and operational details:
- Performance considerationsAlthough AnQiCMS is developed based on Go language with excellent performance, a too deep or large menu structure may still increase the burden on database queries and page rendering.When designing categories, it should be kept to a reasonable level of hierarchy and number of categories.For non-essential sub-menus that do not need to be loaded on the first screen, consider using JavaScript for lazy loading or on-demand loading.
- User Experience (UX):
- Responsive DesignEnsure that your multi-level menu displays and operates well on various devices (PC, tablet, mobile).On mobile devices, hamburger menus or accordion-style menus are commonly used to handle multi-level navigation.
- Visual feedbackThrough different colors, icons, or animation effects, clearly indicate the current menu level of the user and which menu items contain sub-menus.
- Accessibility：Ensure 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 rewrite rules, which helps generate clear and meaningful URLs, for example
/category/level1/level2/level3/article-title.html. - Internal links：Multi-level menus naturally form a powerful internal link structure, which helps search engine crawlers discover and index the deep pages of your website, and pass on page authority. *
- Clear URL structure：AnQiCMS supports custom rewrite rules, which helps generate clear and meaningful URLs, for example