在构建网站时，一个清晰、易用的导航系统是至关重要的，它直接关系到用户能否快速找到所需信息，也影响着搜索引擎对网站结构的理解。AnQiCMS 提供了强大的 navList 标签，让我们能够灵活地构建包含多级子菜单，并能将导航项与网站内容紧密关联起来的导航系统。

接下来，我们将深入探讨如何利用 navList 标签，为你的网站打造一套既美观又实用的多级导航。

网站导航的基础：从后台设置开始

在开始模板层面的工作之前，我们需要在 AnQiCMS 后台为导航系统打下基础。AnQiCMS 的后台提供了“导航设置”功能，在这里，你可以定义网站的所有导航结构。

首先是“导航类别管理”。这允许你创建不同名称的导航区域，比如“顶部主导航”、“页脚导航”、“侧边栏导航”等。这样一来，你就可以根据网站布局的需要，为不同的位置定制专属的导航菜单，每个菜单都可以通过一个 typeId 来识别。

其次是“导航链接设置”，这是构成具体菜单项的地方。在这里，你可以添加导航链接，并选择其类型：

  • 内置链接：例如网站首页、文章模型首页、产品模型首页等，这些都是系统预设的常用入口。
  • 分类/单页面链接：你可以直接选择后台已创建的文章分类、产品分类或独立单页面作为导航目标。这一点非常关键，因为它为我们后续在模板中关联更多内容提供了桥梁。
  • 外部链接：如果你需要链接到站外资源或自定义的站内URL，可以选择此类型。

在后台，每个导航链接可以设置最多两级层级关系，即一个主导航项可以带一个子导航项。每个导航项都包含“显示名称”、“子标题名称”、“导航描述”以及“链接类型”等信息，并且支持通过“显示顺序”进行排序。

理解 navList 标签的核心机制

一旦后台设置好导航结构，我们就可以在模板中使用 navList 标签来调用这些数据了。navList 标签的使用方式如下：

{% navList navs %}
    {# 循环输出导航项 #}
{% endnavList %}

这里，navs 是我们为导航列表定义的变量名，你可以根据自己的习惯命名。navList 标签支持几个重要的参数：

  • typeId：对应后台“导航类别管理”中定义的导航类别ID。通过指定 typeId，你可以精确地调用顶部导航、页脚导航等不同的菜单组。例如，{% navList navs with typeId=1 %} 将调用ID为1的导航类别。
  • siteId：如果你管理着多个站点，并希望调用特定站点的数据，可以通过 siteId 参数来实现。

在 {% for item in navs %} 循环中，每个 item 对象都包含以下有用的字段：

  • Title：导航项的显示名称。
  • SubTitle：导航项的子标题名称。
  • Description：导航项的描述。
  • Link：导航项的链接地址。
  • IsCurrent：一个布尔值，指示当前导航项是否对应用户正在访问的页面，常用于设置高亮样式。
  • NavList：如果当前导航项有子导航，这个字段会包含一个数组，其内部结构与父级 item 相同，方便我们嵌套循环构建多级菜单。
  • PageId：这是一个非常重要的字段。当导航项链接到后台的“分类页面链接”或“单页面链接”时，PageId 会存储该分类或单页面的ID。它就是我们实现导航与内容深度关联的关键。

构建包含多级子菜单的导航

AnQiCMS 后台直接支持两级菜单的配置。在模板中，我们可以通过嵌套循环 item.NavList 来轻松实现这种两级菜单的展示：

<ul>
    {% navList navs with typeId=1 %}
    {%- for item in navs %}
        <li class="{% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
            {%- if item.NavList %} {# 判断是否有子菜单 #}
            <dl>
                {%- 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 %}
    {% endnavList %}
</ul>

这段代码首先循环一级导航项，如果某个一级导航项的 item.NavList 不为空，则会继续循环其子导航项，形成一个标准的两级下拉菜单。

关联内容，实现更灵活的导航

PageId 字段的引入，极大地扩展了 navList 标签的功能。虽然后台只直接支持两级菜单，但通过 PageId，我们可以在模板层面根据二级菜单项所关联的分类或单页ID，动态地调用更多相关内容，从而在视觉上实现多级菜单的复杂效果，或者直接在菜单下拉区域展示内容列表。

场景一：在二级菜单下显示更多子分类（模拟三级菜单）

假设你的二级导航项关联了一个文章分类，而这个分类下还有更多的子分类。你可以利用 item.PageId 结合 categoryList 标签，在模板中动态地拉取并展示这些三级分类。

<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>
                {% if inner.PageId > 0 %} {# 检查二级菜单项是否关联了分类 #}
                    {% categoryList categories with parentId=inner.PageId %} {# 调用该分类的子分类 #}
                    {% if categories %}
                    <ul> {# 三级分类容器 #}
                        {% for subCategory in categories %}
                        <li>
                            <a href="{{ subCategory.Link }}">{{subCategory.Title}}</a>
                        </li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                    {% endcategoryList %}
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>

在这段代码中，inner.PageId 作为 categoryList 的 parentId 参数，精确地指定了要获取哪个分类的下级子分类。这样，即使后台没有直接配置三级导航，我们也能通过模板的逻辑动态呈现出来。

场景二：在二级菜单下直接关联并显示文档/产品列表

你也可以选择在二级菜单项的下拉区域，直接显示其关联分类下的最新文章或热门产品，而不是只显示子分类。这对于内容展示型网站，如电商或资讯门户非常实用。

<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>
                {% if inner.PageId > 0 %} {# 检查二级菜单项是否关联了分类 #}
                    {% archiveList products with type="list" categoryId=inner.PageId limit="8" %} {# 调用该分类下的最新8篇文档/产品 #}
                    {% if products %}
                    <ul class="nav-menu-child-content"> {# 内容列表容器 #}
                        {% for productItem in products %}
                        <li><a href="{{productItem.Link}}">{{productItem.Title}}</a></li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                    {% endarchiveList %}
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>

这里，我们利用 inner.PageId 作为 archiveList 的 categoryId 参数，从后台获取了与二级菜单项关联分类下的文档或产品列表。通过 limit="8" 可以控制显示的数量，type="list" 则