在构建一个功能完善的网站时，清晰直观的导航菜单是用户体验的核心。AnQiCMS 提供了强大的模板标签系统，其中 navList 标签就是专门用来构建和显示网站多级导航菜单的利器。它不仅能够展示你在后台配置的导航结构，还能帮助你将技术细节转化为用户友好的交互体验。

构建导航的基石：后台设置

在使用 navList 标签之前，首先需要在 AnQiCMS 的后台管理界面进行导航菜单的配置。你可以通过“后台设置”菜单下的“导航设置”功能，灵活定义网站的导航结构。

进入导航设置页面，你会发现系统默认提供了一个“默认导航”类别，但你也可以根据网站布局的需要，创建多个自定义导航类别，例如“页脚导航”或“侧边栏导航”。每种导航类别都有一个唯一的 typeId，这在后续前端调用时会用到。

在具体的导航链接设置中，你可以为每个菜单项指定“显示名称”、“子标题名称”和“导航描述”，这些信息都可以在前端模板中调用。更重要的是，“链接类型”决定了导航项指向何处，你可以选择链接到内置首页、特定分类页面、单页面，甚至是外部链接。

多级导航的实现关键在于“上级导航”这个选项。通过为子菜单项选择一个已存在的主菜单项作为其“上级导航”，你就可以轻松创建出层级分明的菜单结构。AnQiCMS 当前支持最多两级的导航链接，即一个主菜单项下可以包含一级子菜单。

navList 标签：前端导航的魔法

当后台导航结构配置完毕，就可以在前端模板中利用 navList 标签将它们渲染出来。navList 标签的使用方式非常直观：

{% navList navs %}
    {# 你的导航结构代码 #}
{% endnavList %}

在这里，navs 是一个你可以自定义的变量名称，它会接收 navList 标签返回的导航数据集合。这个集合是一个数组对象，每一个元素代表一个导航项，你可以使用 for 循环来遍历它。

navList 标签支持几个重要的参数：

  • typeId：这个参数允许你指定要获取哪个导航类别的数据。例如，如果你在后台创建了一个 typeId 为 2 的“页脚导航”，那么在前端调用时就可以写成 {% navList footerNavs with typeId=2 %}。
  • siteId：如果你使用了 AnQiCMS 的多站点管理功能，并且希望调用其他站点的数据，可以通过这个参数指定站点ID。对于单站点用户，通常不需要填写此参数。

在 for 循环中，每个导航项（例如上面代码中的 item 变量）都包含了一系列有用的字段，可以用来构建丰富的导航元素：

  • Title：导航项的显示名称。
  • SubTitle：如果后台设置了子标题，可以在这里获取。
  • Description：导航项的描述信息。
  • Link：导航项指向的URL地址。
  • IsCurrent：一个布尔值，指示当前导航项是否是当前页面的链接，常用于高亮显示活动状态。
  • NavList：这是实现多级导航的关键！如果当前导航项存在子菜单，NavList 就会是一个新的导航项数组，你可以对它进行嵌套的 for 循环来渲染子菜单。
  • PageId：如果导航项链接的是一个分类或单页面，这里会存储对应的ID，这在需要动态加载与导航项相关的其他内容时非常有用。

实际应用：构建多级导航菜单

让我们通过几个实际的例子，看看 navList 如何灵活构建不同类型的多级导航。

1. 构建基本的两级下拉菜单

这是最常见的导航形式，主菜单下有一个下拉的子菜单。

<nav class="main-navigation">
    <ul>
        {% navList navs %}
            {% for item in navs %}
                <li {% if item.IsCurrent %}class="active"{% endif %}>
                    <a href="{{ item.Link }}">{{ item.Title }}</a>
                    {% if item.NavList %}
                        <ul class="sub-menu">
                            {% for inner in item.NavList %}
                                <li {% if inner.IsCurrent %}class="active"{% endif %}>
                                    <a href="{{ inner.Link }}">{{ inner.Title }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </li>
            {% endfor %}
        {% endnavList %}
    </ul>
</nav>

这段代码首先遍历所有顶级导航项，如果某个导航项的 NavList 字段不为空，就说明它有子菜单，然后会进入一个内层循环来渲染这些子菜单。IsCurrent 字段则可以帮助你给当前页面的导航项添加 active 类，提供视觉上的反馈。

2. 导航下拉显示相关产品

如果你的网站是产品展示型，你可能希望当用户鼠标悬停在某个产品分类的导航项时，下方能直接展示该分类下的几个热门产品。这可以通过 PageId 字段和 archiveList 标签结合实现。

假设后台导航菜单中有一个主菜单“产品分类”，其下有子菜单“电子产品”，且“电子产品”这个子菜单链接到的是一个产品分类页面。

<nav class="product-navigation">
    <ul>
        {% navList navs with typeId=1 %} {# 假设产品导航使用默认typeId=1 #}
            {% for item in navs %}
                <li>
                    <a href="{{ item.Link }}">{{ item.Title }}</a>
                    {% if item.NavList %}
                        <div class="dropdown-content">
                            {% for inner in item.NavList %}
                                <div class="category-block">
                                    <h4><a href="{{ inner.Link }}">{{ inner.Title }}</a></h4>
                                    {% if inner.PageId > 0 %}
                                        {# 如果这个子菜单链接的是一个分类页面，则显示该分类下的产品 #}
                                        <ul class="product-list">
                                            {% archiveList products with type="list" categoryId=inner.PageId limit="4" %}
                                                {% for product in products %}
                                                    <li><a href="{{ product.Link }}">{{ product.Title }}</a></li>
                                                {% endfor %}
                                            {% endarchiveList %}
                                        </ul>
                                    {% endif %}
                                </div>
                            {% endfor %}
                        </div>
                    {% endif %}
                </li>
            {% endfor %}
        {% endnavList %}
    </ul>
</nav>

在这个例子中，当遍历到子导航项 inner 时，我们检查 inner.PageId 是否大于0。如果它确实指向一个分类，就使用 archiveList 标签，传入 categoryId=inner.PageId 来获取并显示该分类下的产品列表。

3. 导航下拉显示下级分类

另一种常见需求是，当主菜单项是某个大分类时，下拉菜单能直接展示其下属的子分类。

”`twig