Build and display multi-level nested category navigation menus in Anqi CMS is an important aspect of website content organization and user experience optimization.A well-designed and hierarchically clear navigation not only helps visitors quickly find the information they need, but also provides clear website structure signals to search engines, thereby enhancing SEO effectiveness.
AnQi CMS, developed in Go language, is an enterprise-level content management system that makes it very intuitive and efficient to implement multi-level classification navigation, with flexible content models and powerful template tags support.Next, we will discuss how to step by step build such navigation.
Backend preparation: Build your content skeleton
Before starting to create a beautiful navigation menu, we need to set up the skeleton of content categories in the Anqi CMS backend.This is like designing the load-bearing structure for a building, which is the foundation for all subsequent displays.
Firstly, you need to enter the 'Document Classification' page under the 'Content Management' module.Here, you can create various categories to organize your website content. When creating a category, you need to select a "document model" (such as "article model" or "product model") for it, which determines the content type and fields that can be published under this category.
The key to building multi-level navigation is to set the "parent category". For example, if you want to create a navigation about "electronic products", you can:
- Create a top-level category named "Electronics" without selecting any parent category.
- In the 'Electronics' category, create 'Smartphone', 'Laptop' and other second-level categories, and set their 'parent category' to 'Electronics'.
- If you need a deeper level, you can continue to create 'Android Phone', 'Apple Phone', and other third-level categories under 'Smartphone', and set their 'parent category' to 'Smartphone'.
Through this method, the background category management interface will clearly present a hierarchical tree structure, laying a solid foundation for the front-end navigation display.
Template Implementation: Flexible Display of Multi-Level Menu
The template system of Anqi CMS adopts a concise syntax similar to Django, through built-in tags, we can conveniently call background data and present it flexibly. The core of building a multi-level classification navigation is to usecategoryListLabel.
1. English top-level category call
Firstly, we can usecategoryListtags to get all top-level categories, usually these categories are used as your main navigation menu items.
{% categoryList categories with moduleId="1" parentId="0" %}
<ul class="main-nav">
{% for item in categories %}
<li><a href="{{ item.Link }}">{{item.Title}}</a></li>
{% endfor %}
</ul>
{% endcategoryList %}
Here,moduleId="1"If you are calling the "article model" under the classification (the specific ID needs to be determined according to the model ID set in your background),parentId="0"then it means to only get the top-level categories without parent categories.item.LinkIt will output the access link of the classification,item.TitleThen output the name of the category.
2. Implement multi-level nesting
The essence of multi-level navigation lies in 'nested'. Anqi CMS'scategoryListTag combinationforLoops and conditional statements can easily implement arbitrary depth nesting. We can check for subcategories for each category in the loop (throughitem.HasChildrenfield), if any, and call it againcategoryListGet and display these subcategories.
Here is an example of a third-level category navigation code:
{% categoryList categories with moduleId="1" parentId="0" %}
<ul class="main-nav">
{% for item in categories %}
<li class="nav-item {% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{item.Title}}</a>
{# 判断当前分类是否有子分类 #}
{% if item.HasChildren %}
<ul class="sub-nav">
{# 获取当前分类的子分类，parentId设置为当前item的ID #}
{% categoryList subCategories with parentId=item.Id %}
{% for subItem in subCategories %}
<li class="sub-nav-item {% if subItem.IsCurrent %}active{% endif %}">
<a href="{{ subItem.Link }}">{{subItem.Title}}</a>
{# 如果子分类还有更深层级，可以继续嵌套 #}
{% if subItem.HasChildren %}
<ul class="sub-sub-nav">
{% categoryList deepSubCategories with parentId=subItem.Id %}
{% for deepSubItem in deepSubCategories %}
<li class="deep-sub-nav-item {% if deepSubItem.IsCurrent %}active{% endif %}">
<a href="{{ deepSubItem.Link }}">{{deepSubItem.Title}}</a>
{# 理论上可以继续嵌套，但通常不建议导航层级过深，以免影响用户体验 #}
</li>
{% endfor %}
{% endcategoryList %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endcategoryList %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endcategoryList %}
In this code, we first obtain the top-level category, and then within the loop of each top-level category, we useitem.HasChildrenDetermine if there is a subcategory. If it exists, we use it againcategoryListtags, andparentIdset the parameter to the current top-level category.item.IdThus, obtain its subcategories. This process can be nested further according to your actual needs to support more hierarchical levels of categories.
item.IsCurrentThis field is also very useful, it can help you determine whether the category you are currently looping through is the category corresponding to the page the user is visiting or its ancestor category, so you can add it in CSS.activeClass name to highlight.
3. Style beautification
Although the HTML structure for multi-level navigation has been built by the above code, in order to visually present the sense of hierarchy and aesthetics, it still requires the配合 of CSS styles. You can design the CSS according to your website..main-nav,.sub-nav,.deep-sub-navand their interiorsliandaAdd appropriate styles to labels, such as usingdisplay: none;or JavaScript and CSS:hoverto achieve the interactive effect of dropdown menus using pseudo-classes.
Further optimize and consider
- Current page highlighted:To enhance the user