如何使用AnQiCMS导航列表标签展示两级或多级菜单结构？

网站运营就像掌舵一艘航船，而清晰的导航系统则是指引航向的罗盘。在内容管理的世界里，一套高效、灵活的导航菜单不仅能极大提升用户体验，让访客在您的网站上畅游无阻，更是优化网站结构、提升搜索引擎友好度的重要基石。安企CMS（AnQiCMS）深知其道，为用户提供了强大而直观的导航列表标签，让构建多级菜单结构变得轻而易举。

今天，我们就来深入探讨如何在AnQiCMS中，巧妙运用navList标签，轻松打造出既美观又实用的两级乃至多级菜单结构。

AnQiCMS的导航系统：后台配置奠定基础

在AnQiCMS中，构建多级菜单的第一步，自然是在后台进行细致的配置。系统提供了“网站导航设置”功能，让您能够根据实际需求，灵活定义网站的导航链接。

首先，您会注意到“导航类别管理”。这允许您创建不同的导航区域，比如常见的“顶部导航”、“页脚导航”或“侧边栏导航”。这种分类管理方式非常实用，您可以为不同的页面区域定制专属的导航内容，互不干扰。

接下来是“导航链接设置”，这是您真正构建菜单层级的地方。在添加或编辑导航链接时，您需要设定“显示名称”、“链接类型”以及最重要的“上级导航”。“链接类型”非常丰富，您可以选择“内置链接”（如首页、文章模型首页）、“分类页面链接”（关联到具体的文章分类或单页面）或“外部链接”（指向站内站外的任意URL）。

通过合理选择“上级导航”，您可以轻松构建出两级菜单结构。例如，一个名为“产品中心”的一级菜单下，可以包含“电子产品”、“家居用品”等二级菜单。只需将“电子产品”的“上级导航”设置为“产品中心”即可。AnQiCMS的后台设计非常直观，通常情况下，您可以直接通过这种方式配置出两级菜单，满足绝大多数企业网站的需求。

揭秘 navList 标签：前端模板的魔法

当后台配置妥当后，前端模板便是将这些结构化的导航数据美观呈现的关键所在。AnQiCMS为此提供了功能强大的navList标签。

navList标签是专门用于获取和展示页面导航列表的，其基本用法简洁明了。您通常会这样开始您的导航代码片段：

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

在这里，navs是我们为导航列表数据定义的变量名，您可以根据自己的习惯来命名。navList标签还支持一些参数，比如typeId，它允许您指定要调用哪个“导航类别”下的链接。例如，如果您在后台创建了一个typeId为2的“页脚导航”，那么在模板中就可以通过{% navList navs with typeId=2 %}来调用它。另一个参数siteId则用于多站点管理场景，允许您调用特定站点的数据。

在navs这个变量中，每个导航项都包含了一系列可用的字段，例如Title（导航标题）、Link（导航链接）、IsCurrent（判断是否为当前页面的链接，常用于高亮显示活动菜单项）以及一个非常关键的字段——NavList。

NavList字段的出现，是实现多级菜单的关键。如果一个导航项包含子导航，那么NavList就会成为一个包含这些子导航项的数组。这允许我们在模板中进行嵌套循环，从而逐层展示菜单结构。

实现两级菜单结构

现在，让我们通过一个实际的代码示例，看看如何利用navList标签，在前端优雅地展示一个两级菜单：

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

这段代码清晰地展示了两级菜单的构建逻辑： 首先，外部的for item in navs循环遍历所有的一级导航项。 在每个一级导航项内部，我们通过{% if item.NavList %}判断它是否包含子导航。 如果存在子导航，则再使用一个内部循环{% for inner in item.NavList %}来遍历并显示所有的二级导航项。 item.IsCurrent和inner.IsCurrent则用于给当前活跃的菜单项添加active类，便于通过CSS进行样式高亮。

进阶：探索三级或更多级菜单的显示策略

AnQiCMS后台原生的“导航链接设置”虽然直接支持两级菜单的配置，但通过巧妙结合其他内容标签，我们完全可以在前端模板中实现三级甚至更多级菜单的动态展示，从而构建更丰富、更灵活的导航系统。

其核心思想是：将第二级菜单的某个项目，与其关联的“内容分类”或“内容列表”进行绑定，然后通过这些内容标签在前端动态拉取更多层级的数据。

例如，一个典型的应用场景是： 一级菜单 -> 二级分类菜单 -> 该分类下的文章列表（作为第三级菜单）。 或者： 一级菜单 -> 二级分类菜单 -> 该分类下的子分类列表（作为第三级菜单）。

让我们参考tag-navList.md中的示例，看看如何实现这样的高级菜单结构：

场景一：二级分类下展示相关产品文档（作为第三级）

假设您的导航后台配置了“产品中心”作为一级菜单，其下有“电子产品”作为二级菜单，而“电子产品”这个二级菜单又关联到了一个产品分类ID。我们希望点击“电子产品”时，在下拉菜单中显示该分类下的热门产品。

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

在这个例子中，inner.PageId代表了二级导航链接所关联的分类ID。我们通过archiveList标签，以categoryId=inner.PageId为条件，动态地拉取了该分类下的产品列表，并将其作为第三级菜单展示。

场景二：二级分类下展示其子分类（作为第三级）

如果您的需求是展示更深的分类层级，例如在“电子产品”二级菜单下，显示其更具体的子分类，如“智能手机”、“笔记本电脑”等。

”`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">
                            {%