How to implement the dynamic display of multi-level navigation menus in front-end templates?

In web design, a clear and easy-to-use navigation menu is the key to improving user experience and the professionalism of the website.AnQiCMS (AnQiCMS) provides the convenience of dynamically building multi-level navigation menus in front-end templates with its flexible template engine and powerful content management features.Understanding the backend configuration and the calling logic of the front-end template of its navigation system is the foundation for achieving this goal.

Anqi CMS Navigation System Overview

The navigation function design of AnQi CMS is very practical, closely integrating the creation of the navigation menu with content display.On the backend, we can configure the navigation structure through an intuitive interface;On the front end, it utilizes a tag system based on the Django template engine syntax, enabling highly flexible dynamic rendering of these menus.The entire process aims to reduce technical complexity to the lowest, allowing content operators and front-end developers to easily get started.

Backend Management: Building Navigation Menu

Firstly, we need to set up the navigation menu in the Anqi CMS backend management interface. This is usually completed under the 'Backend Settings' and 'Navigation Settings'.

1. Navigation category management:The AnQi CMS allows the creation of multiple navigation categories, such as "top navigation", "bottom navigation", "sidebar navigation", and so on.This allows us to customize independent navigation structures for different areas of the website, greatly enhancing the flexibility of the website layout.By adding new navigation categories, you can create exclusive menus for specific display locations (such as the footer).
2. Navigation link settings:Under the selected navigation category, we can add specific navigation links.Each link can be set to display name, subtitle name, and navigation description, which information can be called in the frontend template.The most important is the "link type", Anqi CMS provides three flexible link methods:
   • Built-in links:Include 'Home link', 'Content model home page' (such as article list, product list home page), etc., for quick access to frequently used pages.
   • Category page links:This can be directly associated with a document category or a single page. This means we can make the navigation menu items point directly to a product category page or an independent page like 'About Us'.
   • External links:Great freedom is provided, can link to any custom URL within the site, even to other websites outside the site. It is worth noting that Anqi CMS currently supportsup to two levelsNavigation link. This means we can create main menu items and their direct sub-menu items.During the setup process, the system will also provide an option for 'display order' for each menu item, so that we can finely control the arrangement of the menu.

Front-end template: Dynamic rendering of multi-level navigation

In the front-end template, dynamic display of multi-level navigation mainly depends on the Anqi CMS providednavListTags and basic loop and conditional judgment statements. The template files of Anqi CMS use.htmlsuffix, static resources are usually stored in/public/static/The catalog supports tag syntax similar to Django （{{变量}}Used for variable output，{% 标签 %}and{% end标签 %}Used for logical control）。

1. InvokenavListTags: navListThe tag is the core of obtaining navigation data. It allows us to navigate based on the "navigation category ID" set on the backend (typeIdTo get the corresponding navigation list. For example, if your top navigation category ID is 1 (usually it is 1 by default), you can call it like this:

   {% navList navs with typeId=1 %}
       {# 在这里循环输出导航菜单 #}
   {% endnavList %}
   

   HerenavsIt is a custom variable name that will contain all the navigation menu items under the category.

2. Traverse the first-level navigation menu: navsThe variable is an array object, we need to useforLoop through it to display the top-level navigation menu. Eachitem(or a custom loop variable you define) contains various properties of the navigation menu items, such asitem.Title(Display name),item.Link(link address) anditem.IsCurrentCheck if it is the current page link.

   <ul class="main-nav">
       {% for item in navs %}
           <li class="{% if item.IsCurrent %}active{% endif %}">
               <a href="{{ item.Link }}">{{item.Title}}</a>
           </li>
       {% endfor %}
   </ul>
   

   item.IsCurrentThis property is very useful, it allows us to easily add CSS styles to the navigation menu item corresponding to the current visited page, such as adding aactiveclass to provide visual feedback.

3. Render a second-level navigation menu:Because AnQi CMS supports two-level navigation,itemThe object may contain a namedNavListsub-navigation list. We need to check through a conditional judgment to determineNavListDoes it exist, if it exists, then it will nest oneforloops to render the second-level menu.

   <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 inner in item.NavList %}
                       <li class="{% if inner.IsCurrent %}active{% endif %}">
                           <a href="{{ inner.Link }}">{{inner.Title}}</a>
                       </li>
                   {% endfor %}
               </ul>
               {% endif %}
           </li>
       {% endfor %}
   </ul>
   

   Thus, a basic multi-level navigation menu is displayed dynamically

Extended Application: Dynamic content in the navigation menu

The strength of Anqi CMS lies in its ability to further integrate dynamic content in the navigation menu, such as displaying the latest articles or products under the category in the secondary menu. This requires combiningarchiveListorcategoryListImplement tags.

1. Display documents under categories in the navigation menu:Assuming your secondary navigation links to a category, you want to display the latest few articles or products under this menu item. When configuring navigation links in the backend, select "Category Page Link" and associate it with a specific category, the navigation item will beinner.PageIdThe attribute will store the ID of the category. We can use this ID to call related documents.

   {# ... 二级导航循环内部 ... #}
   {% if inner.NavList %} {# 判断是否存在子导航 #}
       <ul class="sub-nav">
           {% for inner in item.NavList %}
               <li class="{% if inner.IsCurrent %}active{% endif %}">
                   <a href="{{ inner.Link }}">{{inner.Title}}</a>
                   {# 在这里调用与该分类相关的文档 #}
                   {% archiveList products with type="list" categoryId=inner.PageId limit="8" %}
                   {% if products %}
                   <ul class="nav-content-list">
                       {% for product in products %}
                       <li><a href="{{product.Link}}">{{product.Title}}</a></li>
                       {% endfor %}
                   </ul>
                   {% endif %}
                   {% endarchiveList %}
               </li>
           {% endfor %}
       </ul>
   {% endif %}
   {# ... #}
   

   This code will be below each secondary navigation item ifinner.PageId(i.e., the associated category ID) exists, list the 8 latest documents under the category (products or articles, depending onarchiveListofmoduleIdsettings).

2. Display subcategories in the navigation menu:A common need is to display the deeper level subcategories of the category belonging to the secondary navigation items below. This can be done by callinginner.PageId(if it is associated with a category) again.categoryListto achieve.

   "twig {# ... secondary navigation loop inside ... #} {% if inner.NavList %} {# Check if there is a sub-navigation #}"}

   <ul class="sub-nav">
       {% for inner in item.NavList %}
           <li class="{% if inner.IsCurrent %}active{% endif %}">
               <a href="{{ inner.Link }}">{{inner.Title}}</a>
               {% if inner.PageId > 0 %} {# 确保PageId有效，且通常是一个分类ID #}
                   {% categoryList subCategories with parentId=inner.PageId %}
                   {% if subCategories %}
                   <ul class="nav-sub-categories">
                       {% for subCat in subCategories %}