How to precisely control the display level and sorting order of the navigation menu in AnQiCMS template?

In website operation, a clear and intuitive navigation menu is like a guiding light for visitors to explore the website.A well-designed navigation not only enhances the user experience but also helps search engines better understand the structure of the website.AnQiCMS provides a flexible mechanism to help users accurately configure the hierarchy and sorting of navigation menus in the background and implement these controls in front-end templates.

Building the navigation skeleton: backend settings are crucial

In AnQiCMS, precise control of the navigation menu starts from its back-end management interface.Here is like a blueprint design center for the navigation menu, where we can define the overall structure and specific performance of each element.

First, you need to go to the "background settings" area of the back end, and then select the "navigation settings".Here you will see two core management panels: "Navigation Category Management" and "Navigation Link Settings".

1. Navigation category management: Define menu areaA website often has more than one navigation menu, such as top main navigation, footer navigation, sidebar navigation, etc.AnQiCMS allows you to create different menu areas by navigating the "Category Management".By default, the system will provide a "default navigation" category.If you need to create independent navigation for the footer or sidebar, simply add a new navigation category and name it, for example, "footer navigation" or "sidebar menu".This category will serve as the basis for calling a specific navigation menu in the template.

2. Navigation link settings: Build hierarchy and orderAfter defining the navigation categories, the next step is to add specific navigation links to these categories.Click the navigation category you want to edit, enter the 'Navigation Link Settings' interface, which is the core for implementing hierarchy and sorting control.

   • Display name and link type:Each navigation item needs a 'display name', which is the text seen by the front-end visitor.What is more important is the "link type", which determines where the navigation item links to.You can choose to link to the built-in homepage, the article/product model homepage, or a specific 'category page' (article category, product category, single page), or simply an 'external link' (can be another page within the site, or an external website).
   • Parent navigation: Build menu hierarchyAnQiCMS supports up to two-level navigation links, that is, a main navigation item can have a dropdown sub-navigation.To achieve this, simply select the main navigation item it belongs to in the 'Parent Navigation' option when adding or editing navigation links.Select 'Top Navigation' means it is a first-level main menu item.This父子relationship setting naturally builds the menu's hierarchical structure.
   • Display order: Determine the arrangement orderThe 'Display Order' is the key to controlling the arrangement of navigation items.This is a numeric field, the system will sort the navigation items in ascending order by number.The smaller the number, the earlier the navigation item is. This means you can set smaller numbers for important pages like the homepage, About Us, etc. to ensure they are displayed at the front of the navigation, while placing secondary pages at the back.When you need to adjust the position of a navigation item, just change the number of its display order, and the system will automatically rearrange it.

Through these backend settings, you have already designed a rigorous structure, hierarchy, and clear sorting rules for the navigation menu.

Wake up navigation: the magic in the front-end template.

After completing the background configuration, we need to display these navigation menus in the front-end template. AnQiCMS providesnavListThe tag, it can easily extract the navigation data you set in the background, and display it according to the level and sorting rules you define.

1. Call specific navigation categories:navListTagIn your template file (usuallyheader.html/footer.htmlorsidebar.htmlUsing fragments file"), withnavListLabel to call the navigation category you create in the background. For example, if you want to display the menu in the top "default navigation" category, you can write the code like this:

   {% navList navs with typeId=1 %}
       {# 导航菜单的循环与渲染 #}
   {% endnavList %}
   

   HeretypeId=1Corresponding to the background "default navigation" ID. If you have created other navigation categories (such as "footer navigation"), itstypeIdWill be different numbers, or you can also use the name of the navigation category directly.navsIs the variable name you specify for this navigation list, and you will use it to access the navigation item data later.

2. Traverse navigation items:forLoop navListThe tag will return an array containing all navigation items. You can usefora loop to traverse these navigation items and output their titles and links one by one:

   {% navList navs with typeId=1 %}
       <ul>
           {% for item in navs %}
               <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
           {% endfor %}
       </ul>
   {% endnavList %}
   

   In this loop,item.Linkthe link address of the navigation item will be automatically retrieved,item.Titleand then the display name will be obtained. The order displayed here will strictly follow the number you set in the background "Display Order".

3. Display sub-navigation: Handle multi-level menuFor sub-menu items set with 'parent navigation', they will be displayed as main navigation itemsNavListThe property is nested within. Therefore, to display the second-level navigation, you need to add another one in the main loop.ifJudgment andforLoop:

   {% navList navs with typeId=1 %}
       <ul class="main-nav">
           {% for item in navs %}
               <li class="{% if item.IsCurrent %}active{% endif %}">
                   <a href="{{ item.Link }}">{{ item.Title }}</a>
                   {% if item.NavList %} {# 判断是否有子导航 #}
                       <ul class="sub-nav">
                           {% 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 %}
       </ul>
   {% endnavList %}
   

   With this nested loop, you can easily build a two-level navigation menu.item.IsCurrentThe property can help you determine whether the current navigation item is on the current page, thereby adding a specific style to the active menu item to enhance the user experience.

4. Dynamic content integration: more flexible navigationThe strength of AnQiCMS lies in the fact that you can deeply integrate the navigation menu with the website content.For example, a main navigation item named "Product" may need to display the latest product categories or directly display the latest product list.When the navigation link type is set to 'Category Page Link',navListTags will provideitem.PageIdAttribute, you can use this ID to combinecategoryListorarchiveListLabel, dynamically loaded within the navigation menu and