The navigation system of the website is the core bridge between users and content. Especially for sites with rich content or deep hierarchy, a clear and efficient multi-level menu is crucial. AnQiCMS provides a powerful and flexible navigation list tag set.navList），Let you easily build and display a feature-rich multi-level menu.
To fully utilize the navigation function of AnQiCMS, we need to start from the background configuration, then to the rendering of the front-end template, step by step to build the menu structure we want.
One, Back-end Navigation Configuration: Lay the foundation for multi-level menus
In the AnQiCMS management backend, navigation settings are the first step in building multi-level menus. You can find the relevant options under 'Backend Settings' -> 'Navigation Settings'.
You can create different 'navigation categories', such as 'main navigation', 'footer navigation', or 'sidebar navigation', which allows you to define independent menu systems for different areas of the website.By default, the system will provide a category named "Default Navigation".
After selecting or creating a navigation category, you can add specific navigation links. Each navigation link can be set with the following key information:
- Display name and subtitle:This is the text displayed on the front end for the menu item, which can be set according to the needs, including the main title and the auxiliary subtitle.
- Parent Navigation:This is the core of implementing multi-level menus.When you add a new navigation link, you can select its "parent navigation".If you select 'Top Navigation', it will become a first-level menu item.If a existing first-level menu item is selected, the current link will become a secondary menu under it.AnQiCMS backend currently supports configuration for up to two-level navigation links, that is, the first-level menu and its first-level sub-menu.
- Link type:AnQiCMS offers flexible link types, including 'Built-in Links' (such as homepage, article model homepage), 'Category Page Links' (linked to specific articles or product categories, single pages), and 'External Links' (pointing to any URL). When you need to link navigation items to specific categories or pages, the corresponding ID (
PageIdThe closing parenthesis will be saved, which is very useful when dynamically loading content on the front end. - Display Order:By adjusting the display order, you can control the arrangement position of the menu items at the same level, with the smaller number appearing earlier.
Through these settings, you can intuitively create a hierarchical menu structure in the background, such as:
- Home Page
- Product Center
- Product Category A
- Product Category B
- Solutions
- About Us
After these background configurations are completed, the next step is to display them on the website using front-end template tags.
2. Front-end template rendering: UtilizenavListTags to display menus
In the AnQiCMS template files,navListTags are used as the key to render navigation lists. They can read the menu data you have configured in the background and provide it to the template in a structured manner for iteration and display.
navListThe basic usage is as follows:
{% navList navs %}
{# 菜单项的HTML结构将在这里循环输出 #}
{% endnavList %}
Here,navsis a variable name that you define, it will contain all the navigation data configured in the background.navListTags must appear in pairs, and the code block in the middle will iterate over each navigation item.
navsA variable is an array object, each array element (which we usually callitem) represents a navigation link. Eachitemobject contains the following common fields:
item.Title: The display name of the navigation item.item.LinkNavigation item's link address.item.IsCurrentBoolean value, if the current page matches the navigation item, it will betrueUsed to highlight the current active menu.item.NavList:Key point!This is a nested array, if there is a sub-menu currently,itemthere will be these sub-menu items.item.NavListEach sub-menu item has the same structure as the parent.itemthe same.
Based on these fields, we can build a basic two-level menu structure:
<nav class="main-navigation">
<ul>
{% navList navs %}
{%- for item in navs %}
<li {% if item.IsCurrent %}class="active"{% endif %}>
<a href="{{ item.Link }}">{{item.Title}}</a>
{%- if item.NavList %} {# 判断是否有子菜单 #}
<ul class="sub-menu">
{%- for subItem in item.NavList %}
<li {% if subItem.IsCurrent %}class="active"{% endif %}>
<a href="{{ subItem.Link }}">{{subItem.Title}}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
In the above code, we first use{% navList navs %}To get the top-level navigation data. Then, through{% for item in navs %}Loop through each first-level menu item. Inside each first-level menu item, we check{% if item.NavList %}if there is a submenu. If there is, we use another nested{% for subItem in item.NavList %}Loop to render secondary menu items.item.IsCurrentThe property helps us addactivea class for the current menu item on the page to highlight.
Three: Extend the depth of multi-level menus: Dynamic content loading
AlthoughnavListThe tag itself supports two-level menus with backend configuration, but by combining other content tags, we can achieve a deeper level of menu display on the frontend, such as dynamically listing document lists under the category of a secondary menu item, or further displaying a third-level category.
The following are some common multi-level menu expansion scenarios:
1. Display the document list of the category under the second-level navigation
Assuming you have configured a primary navigation "Product Centerinner.PageIdYou may want to see the latest product list under the category 'Product Category A' directly when the mouse hovers over it.
<ul>
{% navList navList with typeId=1 %} {# 假设typeId=1是主导航 #}
{%- for item in navList %}
<li>
<a href="{{ item.Link }}">{{item.Title}}</a>
{%- if item.NavList %} {# 如果有一级子菜单 #}
<ul class="nav-menu-child">
{%- for inner in item.NavList %}
<li>
<a href="{{ inner.Link }}">{{inner.Title}}</a>
{% if inner.PageId %} {# 检查子菜单项是否关联了分类/页面ID #}
{# 使用 archiveList 标签，根据 inner.PageId（分类ID）获取文档列表 #}
{% archiveList products with type="list" categoryId=inner.PageId limit="8" %}
{% if products %} {# 如果该分类下有产品 #}
<ul class="nav-menu-child-child"> {# 视觉上的三级菜单 #}
{% for product in products %}
<li><a href="{{product.Link}}">{{product.Title}}</a></li>
{% endfor %}
</ul>
{% endif %}
{% endarchiveList %}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
In this example, we have a first-level submenu (innerCheck within,inner.PageIdIf it exists (i.e., the navigation item is associated with some category or page). If it exists, we then usearchiveListtags, based oninner.PageIdGet the latest document (product) list under this category, thus visually constructing a three-level menu effect.
2. Display the sub-categories under the second-level navigation
Another common requirement is that the second-level navigation item itself is a parent category, and you want to expand and display all its subcategories below it.
<ul>
{% navList navList with typeId=1 %}
{%- for item in navList %}
<li>
<a href="{{ item.Link }}">{{item.Title}}</a>
{%- if item.NavList %}
<ul class="nav-menu-child">
{%- for inner in item.NavList %}
<li>
<a href="{{ inner.Link }}">{{inner.Title}}</a>
{% if inner.PageId > 0 %} {# 同样检查是否关联了分类ID #}
{# 使用 categoryList 标签，根据 inner.PageId 获取其下级分类 #}
{% categoryList categories with parentId=inner.PageId %}
{% if categories %} {# 如果存在下级分类 #}
<ul class="nav-menu-child-child"> {# 视觉上的三级菜单 #}
{% for subCategory in categories %}
<li>
<a href="{{ subCategory.Link }}">{{subCategory.Title}}</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% endcategoryList %}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
This example is similar to the previous one, but it uses nested secondary menus at the second level.categoryListTags to get and display all subcategories of the secondary menu items as parent categories.
Summary
Translated by AnQiCMS'snavListTags, combined with flexible backend navigation configuration, as well as in theifjudgment,forloop andarchiveList/categoryListYou can easily build a powerful and hierarchical multi-level website navigation system with other content tags. This not only improves the organization of website content