How to implement nested display of multi-level categories in AnQiCMS navigation menu?

In website construction, a clear and easy-to-use navigation menu is crucial for improving user experience and the overall structure of the website.AnQiCMS (AnQiCMS) provides flexible settings for managing the navigation menu, allowing users to easily implement nested hierarchical classification displays, thereby better organizing website content and guiding visitors to explore.

To implement hierarchical navigation with nested categories, we mainly complete it through the "Navigation Settings" function in the AnQi CMS backend.This feature is located in the "Background Settings" area, it can not only manage the top navigation of the website, but also create various custom navigation as needed, such as footer navigation or sidebar navigation.

Configure navigation menu: Backend operation guide

First, enter the Anqi CMS backend, find the 'backend settings' under the 'navigation settings'.Here, you will see a 'Navigation Category Management' area.If your website needs multiple independent navigation areas (such as a main navigation, a footer link navigation), you can add different navigation categories here.The system defaults to have a "Default Navigation" category, which we can use directly or create a new one.

Next is the setting of specific navigation links. In the 'Navigation Link Settings' section, each navigation item is an independent link. The key here is the 'Parent Navigation' option.

1. Create a first-level navigation:When you create a new navigation link, if you want it to be a main menu item (i.e., a top-level menu), just set the 'Parent Navigation' to 'Top-Level Navigation'.You can specify information such as "Display Name", "Link Type", etc.
2. Create a second-level navigation (nested):The Anqi CMS supports nested navigation up to two levels. To create a second-level menu item, you need to select a first-level navigation item you just created in the 'Parent Navigation' option.This new link will be nested under the first-level navigation and become its submenu.For example, if you have a top-level navigation named 'Product Center', you can set 'Product Category A' and 'Product Category B' as sub-navigations under 'Product Center'.

When setting the link type, Anq CMS provides three commonly used options:

• Built-in links:Pages suitable for linking to specific feature pages of a website, such as the homepage, article model homepage, product model homepage, etc.
• Category page links:This is the key to combining website content with navigation. You can directly select the 'Document Category' or 'Single Page' that you have created as a navigation link.For example, if you create a "News" category in content management, you can select this category in the navigation settings to link the navigation item directly to the news list page.
• External links:Allows you to flexibly add any internal or external URL addresses.

Additionally, the "Display Order" field allows you to control the arrangement order of navigation items at the same level, with smaller numbers typically appearing earlier, making it easier for you to adjust the display order of the menu based on the website layout.

Display multi-level navigation on the website front-end: template calling method

After completing the background configuration, we need to display these multi-level navigation menus on the website page.This needs to be called through a specific tag in the template file. Anqi CMS adopts a syntax similar to the Django template engine, using double curly braces for variables{{变量}}Logical control tags are used with single curly braces and percentage signs{% 标签 %}.

You will use it to display the navigation menunavListLabel. This label can retrieve the navigation list you configure in the background and supports multi-level nested output.

This is a typicalnavListLabel usage example, it can display two-level navigation:

{% navList navs %}
<ul>
    {%- for item in navs %} {# 遍历一级导航项 #}
        <li class="{% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
            {%- if item.NavList %} {# 如果存在子导航列表 #}
            <dl>
                {%- for inner in item.NavList %} {# 遍历二级导航项 #}
                    <dd class="{% if inner.IsCurrent %}active{% endif %}">
                        <a href="{{ inner.Link }}">{{inner.Title}}</a>
                    </dd>
                {% endfor %}
            </dl>
            {% endif %}
        </li>
    {% endfor %}
</ul>
{% endnavList %}

In this code block:

• {% navList navs %}Called the navigation list and assigned the result tonavsa variable. If you have created multiple navigation categories in the background, you canwith typeId=Xspecify the category to be called.
• The outermost{% for item in navs %}Loop to traverse all first-level navigation items. Eachitemrepresents a navigation link, itsTitleIs the display name,Linkis the link address.
• {% if item.NavList %}Determine if the current first-level navigation item contains a submenu. If it contains,item.NavListIt will be an array containing all the second-level navigation items.
• Inner layers.{% for inner in item.NavList %}The loop is used to iterate over the second-level navigation items.innerIt also hasTitleandLinksuch properties.
• {% if item.IsCurrent %}active{% endif %}This judgment can be used to add the corresponding navigation item for the current page.activeThe class facilitates highlighting through CSS styles, enhancing user experience.

By using such a template structure, you can clearly present the multi-level navigation menu configured in the background on the website page. If the navigation items link to specific category pages (such as article categories, product categories), you can even further call the secondary navigation items belowarchiveListLabel, display part of the articles or products under this category, forming a more rich content display effect.

The navigation settings of AnQi CMS are designed to provide an intuitive and powerful menu management solution.By reasonably planning the navigation structure of the backend and appropriately calling it in the template, your website will have a multi-level navigation system that is both beautiful and efficient, effectively improving the browsing experience of users.

Frequently Asked Questions (FAQ)

1. How many levels of nesting does the Anqi CMS navigation menu support?The navigation menu of Anqi CMS currently supports up to two levels of nesting. This means you can set up a primary menu and its sub-menus below.

2. How do I add the website's 'Article Category' or 'Product Category' to the navigation menu?Create or edit navigation links in the background "Navigation Settings", select "Link Type" as "Category Page Link", and then select the "Document Category" or "Single Page" you want to link from the pop-up list.

3. Why did I set a second-level menu, but the front-end page only displays the first-level menu?This is usually due to the template file not being properly written or configured to display the secondary menu. Please check if you have used something similar in your template code.{% if item.NavList %}This logic is used to judge and loop output the submenu items, ensure that the template can recognize and renderitem.NavListThe content is. Also, make sure the background "parent navigation" settings are correct, ensuring that the secondary menu is indeed associated with the primary menu.