How to build and display a multi-level navigation menu in AnQiCMS template?
The website navigation is the first window for users to interact with the website, a clear and intuitive navigation system can greatly enhance the user experience and help visitors quickly find the information they need.AnQiCMS provides flexible and powerful navigation management functions, whether it is a simple single-level menu or a complex two-level, three-level, or even more hierarchical multi-level navigation, it can be easily realized.Next, we will learn in detail how to build and display multi-level navigation menus in AnQiCMS.
Backend settings: The foundation for building navigation
In AnQiCMS, the construction of multi-level navigation begins with careful configuration on the backend. You can define the menu structure of the website through the "Website Navigation Settings" function on the backend.
1. Navigation Category Management
Firstly, navigation is not limited to the main menu at the top of the website.AnQiCMS allows you to create multiple navigation categories, such as main navigation, footer navigation, sidebar navigation, etc.In the "Navigation Category Management", you can add different navigation categories according to your website layout needs.The system will have a default 'default navigation' category, and you can create new categories as needed, such as creating a category named 'footer navigation'.Each category has a uniquetypeIdThis ID will be used in the front-end template to specify which navigation list to call.
2. Navigation Link Settings
After confirming the navigation category, the next step is to add specific navigation links to these categories.In the "Navigation Link Settings", you can add navigation entries for each category and define their hierarchy.
- Parent navigation:This is the key to implementing multi-level navigation. You can choose an existing first-level navigation as the 'parent navigation' for the current link, so that the current link will become a sub-menu item.AnQiCMS supports native navigation up to two levels (i.e., main menu and sub-menus), which can be easily implemented through this setting.
- Display Name, Subtitle Name, Navigation Description:These fields allow you to provide rich information for navigation items, such as main title, subtitle, or brief description, which is very useful in designing complex navigation menus.
- Link Type:AnQiCMS provides three flexible link types:
- Built-in links:Including the home page, article model home page, product model home page, and other commonly used pages, it is convenient to directly link to these functional pages.
- Category page links:This is an important option for building dynamic multi-level navigation. You can choose any category or single page created on the website as a navigation link.
- External links:You are allowed to enter any URL, whether it is an internal page or an external website link.
- Display order:You can set a numeric order for each navigation link, with smaller numbers appearing earlier, allowing precise control of the navigation item arrangement.
With these settings, you can flexibly build various levels of navigation menus according to your website structure and design needs.
Template call: display navigation on the front end
Once the background navigation is set up, the front-end template can call and display these navigation data through specific tags.AnQiCMS uses a syntax similar to Django template engine, which is very intuitive.
1. UsenavListNavigation tag call
The core navigation call tag isnavList. It will extract the corresponding navigation data based on your configuration in the background.
BasicnavListThe label usage is as follows, it will store the obtained navigation data intonavsthe variable, and then you canforloop through these data:
{% navList navs with typeId=1 %} {# 这里的 typeId=1 对应后台“默认导航”的类别ID，请根据实际情况修改 #}
{# 导航菜单的HTML结构将在这里构建 #}
{% endnavList %}
2. Build a single-level navigation menu
If you only need to display a level 1 menu, the code will be more concise:
<nav>
<ul>
{% navList navs with typeId=1 %}
{% for item in navs %}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
In the code above,item.LinkGet the navigation link address,item.TitleGet the navigation display name.item.IsCurrentis a very useful boolean value, it will return when the current page matches the navigation linktrueand you can use it to add to the currently active menu itemactiveclass to achieve highlighting effect.
3. Build secondary navigation menu
To implement secondary navigation, it is necessary to usenavListdata returned initem.NavListproperties. If a navigation item has a submenu, thenitem.NavListThis will be an array containing sub-menu items. You can nest another loop inside the parent menu item.forLoop to display the sub-menu:
<nav>
<ul class="main-menu">
{% navList navs with typeId=1 %}
{% for item in navs %}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
{% if item.NavList %} {# 判断是否有子菜单 #}
<ul class="sub-menu">
{% for subItem in item.NavList %}
<li class="{% if subItem.IsCurrent %}active{% endif %}">
<a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
This code demonstrates a typical secondary navigation structure. Whenitem.NavListit exists, a list will be rendered containing all the sub-menu items.sub-menuof<ul>列表，其中包含所有的子菜单项。
4. CombinecategoryListImplement multi-level dynamic navigation (suitable for deeper levels)
AnQiCMS'navListTags natively support two-level navigation. But if your website has a deeper classification hierarchy, or you want the navigation to be fully dynamic according to the classification structure (not just manually configured links in the background), then you can combine them to usecategoryList.
categoryListThe tag can retrieve the classification data of a specified content model and can recursively display subcategories. By usingcategoryListinnavListthe sub-menu section, or use it independentlycategoryListYou can build a more flexible multi-level dynamic navigation.
Here is a way tonavListwithcategoryListCombine to implement the example of 'Level 1 navigation (background configuration) -> Level 2 navigation (background configuration) -> Level 3 category (dynamically acquired)'
<nav>
<ul class="main-menu">
{% navList navs with typeId=1 %}
{% for item in navs %}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
{% if item.NavList %}
<ul class="sub-menu">
{% for subItem in item.NavList %}
<li class="{% if subItem.IsCurrent %}active{% endif %}">
<a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
{# 假设 subItem.PageId 对应一个分类ID，且我们希望在其下动态显示其子分类 #}
{% if subItem.PageId > 0 %}
{% categoryList categories with parentId=subItem.PageId %}
{% if categories %}
<ul class="third-level-menu">
{% for category in categories %}
<li><a href="{{ category.Link }}">{{ category.Title }}</a></li>
{% endfor %}
</ul>
{% endif %}
{% endcategoryList %}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
In this example, we first usenavListRetrieved navigation from two-level backend configuration. In the second-level navigationsubItemloop, we checksubItem.PageId(if the second-level menu is associated with a category ID), then usecategoryListGet all the subcategories of this category, thereby dynamically generating the third-level menu.categoryListalso supportsparentIdparameters to get the subcategories under the specified parent level, andHasChildren