How to determine if the `navList` menu item has child navigation (`item.NavList`) and perform nested rendering?

Secure CMS navigation menu: how to usenavListImplement multi-level nesting and sub-navigation judgment

As an experienced website operations expert, I fully understand the importance of a clear and flexible navigation system for user experience and the overall architecture of the website. In AnQiCMS (AnQiCMS),navListThe label is the core tool we use to build a powerful navigation system.It not only helps us easily display the main navigation of the website, but also provides a powerful mechanism to judge whether the menu item has a sub-navigation and performs elegant nested rendering, thus building a multi-level menu with clear hierarchy and rich functions.

Today, let's delve into how to巧妙ly use in AnQi CMSnavListtags, judge and render menu items with sub-navigation

Get to knownavList: The cornerstone of navigation in AnQi CMS

In the template design of AnQi CMS,navListThe tag bears the important responsibility of obtaining the website navigation list. It allows us to navigate according to different needs, such as the main navigation, footer navigation, or sidebar navigation, throughtypeIdParameters are used to call predefined navigation categories. When we configure the menu structure in the background "Website Navigation Settings", including the first-level menu and possibly existing second-level and even more sub-menus,navListThe tag will extract these structured navigation data for use in the front-end template.

Every one fromnavListThe menu items looped out by the tag are wrapped in oneitemIn the variable. ThisitemContained navigation title(Title), Link(Link), Subtitle(SubTitle), Description(Description) etc. Basic information. The key to determining whether a menu item has sub-navigation is to check its special property: NavList.

Core judgment:item.NavListThe mystery of

item.NavListIt is a very critical attribute, if there are sub-menus under the current menu item, thenitem.NavListit will be an array containing these submenu items. More cleverly, thisNavListeach submenu item in the array also has the same field structure as the parentitemincluding its own.NavListAttribute. This recursive structure is the foundation for implementing multi-level nested navigation.

To determine whether a menu item has child navigation, we can simply use the Anqi CMS template engine.ifConditional judgment tag, checkitem.NavListIt exists or is not empty

For example, in a typical two-level navigation structure, we can write the template code like this:

{% navList navs %}
    <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 %} {# <-- 关键判断点：如果存在子导航 #}
                <dl class="sub-nav">
                    {%- 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, we first use{% navList navs %}Get the top-level navigation list and iterate overforeach item. Inside the loop,{%- if item.NavList %}this line of code is used to judge the currentitemIs the core of having child navigation. Once it is judged to be true, we will enter a newdltag inside, and use anotherforloop({%- for inner in item.NavList %}) to render these child navigation items.innerA variable represents each sub-navigation item, it also hasTitle/Linkproperties that are consistent with the parent levelitem. The usage method is consistent.

Advanced Application: Dynamic Content and Multi-level Nesting

This kind of judgment and nested pattern is not limited to two levels, it has a strong recursiveness. If your navigation has three levels or even more, you caninnercheck again inside the loopinner.NavListRepeat the above nested rendering logic.

What is more important, navigation menu items can not only link to ordinary pages or categories, but we can also use them to dynamically display content related to the navigation item, such as specific product lists under a product category, or subcategory lists under a category. This usually requires combininginner.PageIdTo complete the attribute.inner.PageIdRecords the ID of the page, category, or model associated with the navigation item.

For example, in a complex navigation menu, you may want to display not only the subcategories of a product category when the mouse hovers over it, but also some popular products directly.

This is an example of displaying related products under a navigation item:

<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>
                {% archiveList products with type="list" categoryId=inner.PageId limit="8" %} {# <-- 这里根据子导航关联的分类ID调用产品列表 #}
                {% 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 %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>

Here, we useinner.PageIdto