如何使用`navList`标签在安企CMS模板中创建带子菜单的导航条？

在安企CMS的模板开发中，构建一个功能完善、用户友好的导航条是网站前端开发的核心任务之一。尤其是当导航需要包含多级子菜单时，安企CMS提供的navList标签能够帮助我们高效地实现这一需求。

理解navList标签的核心作用

navList标签是安企CMS模板中专门用于获取网站导航数据，并将其呈现在页面上的工具。它允许我们从后台预先设置好的导航结构中，动态地提取出菜单项，包括一级菜单、二级子菜单等，大大提升了模板的灵活性和维护效率。

安企CMS的后台导航设置非常灵活，您可以创建多个导航类别（例如“顶部导航”、“底部导航”、“侧边栏导航”等），并在每个类别下添加具体的导航链接。navList标签的使命，就是将这些结构化的数据呈现在您的网站前端模板中。

它的基本语法结构简洁明了：

{% navList 变量名称 %}
    {# 在这里通过循环处理导航数据 #}
{% endnavList %}

其中，变量名称是您自定义的一个变量，用于存储navList标签获取到的所有导航数据。通常，我们会将其命名为navs或navList，以便在后续的代码中引用。

深入了解navList的参数

navList标签支持几个关键参数，以帮助您精确地获取所需的导航数据：

• typeId：导航类别ID 这是最常用的参数。在安企CMS后台的导航设置中，您可以为不同的导航创建不同的类别，每个类别都有一个唯一的ID。通过typeId参数，您可以指定navList只获取特定类别的导航数据。例如，typeId=1可能表示获取“顶部导航”的数据，而typeId=2可能用于获取“底部导航”的数据。默认情况下，如果不指定typeId，它会获取ID为1的导航类别。

• siteId：站点ID 如果您正在使用安企CMS的多站点管理功能，并且希望在当前站点的模板中调用其他站点设置的导航数据，就可以使用siteId参数。但对于大多数单站点用户而言，这个参数通常不需要手动设置，系统会自动识别当前站点。

通过这些参数的组合，您可以轻松地在网站的不同区域展示不同的导航菜单。

导航数据结构解析：理解如何构建子菜单

navList标签获取到的数据，是一个包含多个导航项的数组。在{% navList %}和{% endnavList %}之间，您通常会使用for循环来遍历这些导航项。循环中的每一个item（假设您将变量命名为navs，则每个导航项为item）都具有以下关键属性，这些属性是构建带子菜单导航条的关键：

• Title： 导航项的显示名称。
• SubTitle： 导航项的副标题，如果后台有设置的话。
• Description： 导航项的描述信息。
• Link： 导航项点击后跳转的URL链接。
• PageId： 如果导航项链接的是某个分类或单页面，这里会包含其对应的ID。这在需要根据导航项ID进一步获取内容时非常有用。
• IsCurrent： 一个布尔值，指示当前导航项是否是用户正在访问的页面。这对于实现导航菜单的高亮显示非常重要。
• NavList： 这是实现子菜单的关键！ NavList本身又是一个数组，其中包含了当前导航项的所有子导航项。这个结构是递归的，意味着子导航项也可以有自己的NavList，从而理论上支持无限层级的菜单（尽管在实际网站设计中，通常建议不超过三级以保证用户体验）。

实战演练：逐步构建带子菜单的导航条

理解了数据结构后，我们就可以着手在模板中构建带子菜单的导航条了。以下是一些常见的实现方式。

1. 构建基本的二级导航条

这是最常见的导航结构，一个一级菜单下包含若干二级子菜单。

{% navList navs with typeId=1 %} {# 假设1是您的顶部导航类别ID #}
<ul class="main-nav"> {# 主导航容器 #}
    {%- for item in navs %} {# 遍历一级导航项 #}
        <li class="nav-item {% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}" class="nav-link">{{ item.Title }}</a>
            {%- if item.NavList %} {# 判断当前一级导航项是否有子菜单 #}
            <ul class="sub-nav"> {# 子菜单容器 #}
                {%- for inner in item.NavList %} {# 遍历二级导航项 #}
                    <li class="sub-nav-item {% if inner.IsCurrent %}active{% endif %}">
                        <a href="{{ inner.Link }}" class="sub-nav-link">{{ inner.Title }}</a>
                    </li>
                {% endfor %}
            </ul>
            {% endif %}
        </li>
    {% endfor %}
</ul>
{% endnavList %}

代码解释：

• 我们首先使用{% navList navs with typeId=1 %}获取ID为1的导航类别数据。
• 外层的for循环遍历navs，处理每一个一级导航项。
• item.IsCurrent用来判断当前导航项是否是活跃状态，如果用户正在访问该页面，则添加active类名，以便CSS样式进行高亮显示。
• {%- if item.NavList %}是一个关键的判断，它检查当前一级导航项是否包含子菜单。只有当NavList不为空时，才会渲染子菜单的HTML结构。
• 内层的for循环遍历item.NavList，处理每一个二级导航项，同样也判断了inner.IsCurrent。

2. 在子菜单中展示特定内容（例如产品列表）

有时候，您可能希望在鼠标悬停到某个导航项上时，弹出一个包含最新产品或文章列表的下拉框。这可以通过结合navList和archiveList标签来实现。

<ul class="main-nav">
    {% navList navList with typeId=1 %}
    {%- for item in navList %}
    <li class="nav-item">
        <a href="{{ item.Link }}" class="nav-link">{{item.Title}}</a>
        {%- if item.NavList %} {# 判断是否存在二级菜单 #}
        <ul class="sub-nav drop-menu">
            {%- for inner in item.NavList %} {# 遍历二级菜单项 #}
            <li class="sub-nav-item">
                <a href="{{ inner.Link }}" class="sub-nav-link">{{inner.Title}}</a>
                {% if inner.PageId > 0 %} {# 假设二级菜单链接的是某个分类（PageId即分类ID） #}
                    {# 在二级菜单下显示该分类的最新产品或文章，假设categoryId与inner.PageId对应 #}
                    {% archiveList products with type="list" categoryId=inner.PageId limit="8" %}
                    {% if products %}
                    <ul class="sub-sub-nav-content"> {# 展示内容的容器 #}
                        {% for product in products %}
                        <li><a href="{{product.Link}}">{{product.Title}}</a></li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                    {% endarchiveList %}
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>

代码解释：

• 这里我们假定二级菜单的PageId存储的是一个分类ID。
• {% if inner.PageId > 0 %}判断该二级菜单项是否关联了一个实际的分类。
• {% archiveList products with type="list" categoryId=inner.PageId limit="8" %}标签被用于获取该分类下的最新8条产品（或文章）数据。
• 这些产品数据随后被遍历并显示在一个嵌套的ul列表中。

3. 在子菜单中展示下级分类

如果您的网站分类层级较深，希望在导航中直接展示一级分类下的二级分类，甚至三级分类，可以这样实现：

”`twig

{% navList navList with typeId=1 %}
{%- for item in navList %}
<li class="nav-item">
    <a href="{{ item.Link }}" class="nav-link">{{item.Title}}</a>
    {%- if item.NavList %} {# 判断是否存在二级菜单 #}
    <ul class="sub-nav drop-menu">
        {%- for inner in item.NavList %} {# 遍历二级菜单项 #}
        <li class="sub-nav-item">
            <a href="{{ inner.Link }}" class="sub-nav-link">{{inner.Title}}</a>
            {% if inner.PageId > 0 %} {# 假设二级菜单链接的是某个一级分类（PageId即分类ID） #}
                {# 获取该分类下的所有子分类 #}
                {% categoryList categories with parentId=inner.PageId %}
                {% if categories %}
                <ul class="sub-sub-categories"> {# 展示下级分类的容器 #}
                    {% for category in categories %}
                    <li>
                        <a href="{{ category.