`navList` 标签如何构建包含多级子菜单和关联内容的网站导航？
在构建网站时，一个清晰、易用的导航系统是至关重要的，它直接关系到用户能否快速找到所需信息，也影响着搜索引擎对网站结构的理解。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" 则