Website operation is like steering a ship, and a clear navigation system is the compass that guides the way.In the world of content management, a highly efficient and flexible navigation menu can greatly enhance user experience, allowing visitors to navigate your website freely, and is also an important cornerstone for optimizing website structure and improving search engine friendliness.AnQiCMS (AnQiCMS) knows the way, providing users with a powerful and intuitive navigation list tag, making it easy to build a multi-level menu structure.

Today, let's delve into how to巧妙运用 skillfully utilize in AnQiCMS.navListLabels can easily create a beautiful and practical two-level or even multi-level menu structure.

AnQiCMS navigation system: The foundation of background configuration

The first step in building a multi-level menu in AnQiCMS is naturally to make detailed configurations in the background.The system provides the "Website Navigation Settings" feature, allowing you to flexibly define the navigation links of the website according to your actual needs.

Firstly, you will notice the "Navigation Category Management".This allows you to create different navigation areas, such as common 'top navigation', 'footer navigation', or 'sidebar navigation'.This classification management method is very practical, you can customize exclusive navigation content for different page areas without interference.

Next is the 'Navigation Link Settings', this is where you truly build the menu hierarchy.When adding or editing navigation links, you need to set the 'Display Name', 'Link Type', and most importantly, the 'Parent Navigation'.The link types are very rich, you can choose 'Internal Links' (such as home page, article model home page), 'Category Page Links' (linked to specific article categories or single pages), or 'External Links' (pointing to any URL within or outside the site).

You can easily build a two-level menu structure by reasonably selecting the 'Parent Navigation'.For example, a first-level menu named 'Product Center' can include second-level menus such as 'Electronics' and 'Home Goods'.Set the 'parent navigation' of 'electronic products' to 'Product Center'.The backend design of AnQiCMS is very intuitive, usually you can directly configure two-level menus in this way, meeting the needs of the vast majority of corporate websites.

UnveilingnavListTag: The magic of front-end templates

After the background configuration is in place, the front-end template is the key to beautifully presenting these structured navigation data. AnQiCMS provides a powerfulnavListLabel.

navListLabels are specifically used to retrieve and display the page navigation list, with a simple and clear basic usage. You would usually start your navigation code snippet like this:

{% navList navs %}
    {# 导航内容将在这里循环输出 #}
{% endnavList %}

Here,navsThis is the variable name defined for navigation list data, you can name it according to your own habits.navListLabels also support some parameters, such astypeIdIt allows you to specify which "navigation category" link to call. For example, if you create one in the background,typeIdfor the "footer navigation" with the value 2, then you can call it in the template.{% navList navs with typeId=2 %}Call it. Another parametersiteIdIt is used for multi-site management scenarios, allowing you to call data from specific sites.

InnavsIn this variable, each navigation item includes a series of available fields, such asTitle(Navigation title),Link(Navigation link),IsCurrentWhether the link is the current page, often used to highlight the active menu item) as well as a very critical field -NavList.

NavListThe presence of fields is the key to implementing multi-level menus. If a navigation item contains sub-navigation,NavListThis will become an array containing these sub-navigation items. This allows us to perform nested loops in the template to display the menu structure layer by layer.

Implement a two-level menu structure

Now, let's look at how to use a real code example tonavListtags elegantly display a two-level menu on the front end:

<nav class="main-navigation">
    <ul class="primary-menu">
        {% navList navs with typeId=1 %} {# 假设typeId=1是顶部导航 #}
            {% for item in navs %}
                <li class="menu-item {% if item.IsCurrent %}active{% endif %} {% if item.NavList %}has-submenu{% endif %}">
                    <a href="{{ item.Link }}">{{ item.Title }}</a>
                    {% if item.NavList %} {# 检查是否有子导航 #}
                        <ul class="sub-menu">
                            {% for inner in item.NavList %}
                                <li class="menu-item {% if inner.IsCurrent %}active{% endif %}">
                                    <a href="{{ inner.Link }}">{{ inner.Title }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </li>
            {% endfor %}
        {% endnavList %}
    </ul>
</nav>

This code clearly demonstrates the construction logic of a two-level menu: Firstly, the externalfor item in navsloop traverses all the first-level navigation items. Within each first-level navigation item, we{% if item.NavList %}Check if it contains sub-navigation. If there is a sub-navigation, use another internal loop.{% for inner in item.NavList %}To iterate and display all the second-level navigation items.item.IsCurrentandinner.IsCurrentIt is used to add to the current active menu item.activeClasses, which are convenient for highlighting with CSS.

Advanced: Explore display strategies for three-level or more menus.

The native 'Navigation Link Setting' in AnQiCMS backend supports direct configuration of two-level menus, but by skillfully combining other content tags, we can completely achieve dynamic display of three-level or even more levels of menus in the front-end template, thus building a richer and more flexible navigation system.

The core idea is: to bind a certain item of the second-level menu with its associated 'content category' or 'content list', and then dynamically pull more hierarchical data through these content tags on the front end.

For example, a typical application scenario is: First-level menu -> Second-level category menu -> Article list under this category (as the third-level menu). Or: Main menu -> Subcategory menu -> List of subcategories under this category (as a third-level menu).

Let us refer totag-/anqiapi-other/165.htmlthe example provided, and see how to implement such an advanced menu structure:

Scenario one: display related product documents (as the third level) under the second-level category

Assume that your navigation backend is configured with "Product Center" as a first-level menu, under which there is a second-level menu called "Electronics", and this second-level menu is associated with a product category ID.We hope that when clicking on 'Electronics', the popular products under this category will be displayed in the dropdown menu.

<ul class="main-menu">
    {% navList navList with typeId=1 %}
        {% for item in navList %}
        <li>
            <a href="{{ item.Link }}">{{ item.Title }}</a>
            {% if item.NavList %} {# 一级菜单的子导航，即二级菜单 #}
            <ul class="sub-menu">
                {% for inner in item.NavList %}
                <li>
                    <a href="{{ inner.Link }}">{{ inner.Title }}</a>
                    {% if inner.PageId > 0 %} {# 检查二级菜单是否关联了某个分类ID #}
                        {% archiveList products with type="list" categoryId=inner.PageId limit="8" %} {# 假设inner.PageId是产品分类ID，获取该分类下8个产品 #}
                            {% if products %} {# 如果有产品，则显示为三级菜单 #}
                            <ul class="tertiary-menu">
                                {% for product_item in products %}
                                <li><a href="{{ product_item.Link }}">{{ product_item.Title }}</a></li>
                                {% endfor %}
                            </ul>
                            {% endif %}
                        {% endarchiveList %}
                    {% endif %}
                </li>
                {% endfor %}
            </ul>
            {% endif %}
        </li>
        {% endfor %}
    {% endnavList %}
</ul>

In this example,inner.PageIdrepresented the category ID associated with the secondary navigation link. We accessedarchiveListtags, tocategoryId=inner.PageIdas conditions, dynamically retrieved the product list under the category and displayed it as the third-level menu.

Scene two: Display the subcategories under the second-level category (as the third level)

If your requirement is to display a deeper level of classification, for example, under the second-level menu 'Electronics', showing more specific subcategories such as 'Smartphones', 'Laptops', etc.

`twig

    {% navList navList with typeId=1 %}
    {% for item in navList %}
    <li>
        <a href="{{ item.Link }}">{{ item.Title }}</a>
        {% if item.NavList %} {# 一级菜单的子导航，即二级菜单 #}
        <ul class="sub-menu">
            {% for inner in item.NavList %}
            <li>
                <a href="{{ inner.Link }}">{{ inner.Title }}</a>
                {% if inner.PageId > 0 %} {# 检查二级菜单是否关联了某个分类ID #}
                    {% categoryList categories with parentId=inner.PageId %} {# 获取该分类ID下的所有子分类 #}
                        {% if categories %} {# 如果有子分类，则显示为三级菜单 #}
                        <ul class="tertiary-menu">
                            {%