AnQiCMS如何利用`navList`标签构建和显示多级网站导航菜单？
在构建一个功能完善的网站时，清晰直观的导航菜单是用户体验的核心。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
<ul>
{% navList navs with typeId=1 %}