如何判断`navList`菜单项是否有子导航(`item.NavList`)并进行嵌套渲染？

安企CMS导航菜单：巧用navList实现多级嵌套与子导航判断

作为一名资深的网站运营专家，我深知一套清晰、灵活的导航系统对于用户体验和网站整体架构的重要性。在安企CMS（AnQiCMS）中，navList标签正是我们构建强大导航系统的核心工具。它不仅能够帮助我们轻松展示网站的主导航，更提供了强大的机制来判断菜单项是否拥有子导航，并进行优雅的嵌套渲染，从而构建出层次分明、功能丰富的多级菜单。

今天，我们就来深入探讨如何在安企CMS中，巧妙地运用navList标签，判断并渲染带有子导航的菜单项。

认识navList：安企CMS的导航基石

在安企CMS的模板设计中，navList标签承担着获取网站导航列表的重要职责。它允许我们根据不同的需求，比如主导航、页脚导航或侧边栏导航，通过typeId参数来调用预设好的导航类别。当我们在后台“网站导航设置”中配置好菜单结构，包括一级菜单和可能存在的二级甚至更多级子菜单时，navList标签就会将这些结构化的导航数据提取出来，供前端模板使用。

每一个从navList标签循环出的菜单项，都被封装在一个item变量中。这个item包含了导航标题(Title)、链接(Link)、子标题(SubTitle)、描述(Description)等基本信息。而判断一个菜单项是否拥有子导航的关键，则在于检查它的一个特殊属性：NavList。

核心判断：item.NavList的奥秘

item.NavList是一个非常关键的属性，如果当前的菜单项下面有子菜单，那么item.NavList就会是一个包含这些子菜单项的数组。更巧妙的是，这个NavList数组中的每一个子菜单项，也同样拥有和父级item相同的字段结构，包括它自己的NavList属性。这种递归的结构，正是实现多级嵌套导航的基础。

要判断一个菜单项是否有子导航，我们只需简单地利用安企CMS模板引擎的if条件判断标签，检查item.NavList是否存在或不为空即可。

例如，在一个典型的两级导航结构中，我们可以这样编写模板代码：

{% 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 %}

在这段代码中，我们首先使用{% navList navs %}获取顶层导航列表，并通过一个for循环遍历每一项。在循环内部，{%- if item.NavList %}这行代码便是判断当前item是否有子导航的核心。一旦判断为真，我们便会进入一个新的dl标签内部，并用另一个for循环({%- for inner in item.NavList %})来渲染这些子导航项。inner变量代表了每一个子导航项，它同样拥有Title、Link等属性，与父级item的使用方式保持一致。

进阶应用：动态内容与多层嵌套

这种判断和嵌套的模式并非仅限于两级，它具有很强的递归性。如果你的导航有三级甚至更多级，你可以在inner循环内部，再次检查inner.NavList，并重复上述的嵌套渲染逻辑。

更重要的是，导航菜单项不仅可以链接到普通的页面或分类，我们还可以利用它来动态地展示与该导航项相关的内容，比如某个产品分类下的具体产品列表，或者某个分类下的子分类列表。这通常需要结合inner.PageId属性来完成。inner.PageId记录了该导航项所关联的页面、分类或模型的ID。

例如，在一个复杂的导航菜单中，你可能希望当鼠标悬停在某个产品分类上时，不仅显示该分类的子分类，还能直接展示一些热门产品。

下面是一个在导航项下显示关联产品的示例：

<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>

这里，我们通过inner.PageId将