在AnQiCMS中构建一个清晰、功能丰富的网站，离不开灵活多样的导航菜单。多级导航不仅能帮助访问者迅速定位所需内容，更能优化网站结构，对搜索引擎友好。AnQiCMS强大的模板引擎和后台管理功能，让实现复杂的嵌套导航变得直观而高效。
AnQiCMS 中的导航菜单构成：理解基础
在AnQiCMS中，导航菜单的实现分为两个主要部分：首先是在后台进行配置和数据管理，其次是在前端模板文件中通过特定的标签和逻辑来渲染显示。AnQiCMS采用了类似Django模板引擎的语法，这种语法以其易学性和强大功能而闻名，使得开发者和运营者能够轻松上手，将技术信息转化为实用的展示效果。
系统内置的 navList 标签是构建导航的核心工具，它能帮助我们获取后台设置的导航数据。同时，结合 for 循环、if 逻辑判断等通用模板标签，我们可以轻松地实现多级菜单的嵌套显示。
第一步：后台配置多级导航
首先，我们需要在AnQiCMS的后台设置导航菜单的结构。
- 进入“网站导航设置”： 登录AnQiCMS后台，在左侧菜单中找到“后台设置”，然后点击“导航设置”。
- 管理导航类别： 默认情况下，系统会有一个“默认导航”类别。如果您需要为网站的不同区域（例如顶部导航、页脚导航、侧边栏导航）创建独立的菜单，可以在“导航类别管理”中添加新的导航类别。每个类别都会有一个唯一的
typeId，在模板中调用时会用到。 - 添加导航链接：
- 创建一级导航： 点击“添加导航链接”，填写“显示名称”和“链接类型”。链接类型可以是内置链接（如首页、模型首页）、分类页面链接（选择现有分类或单页面）或外部链接（手动输入URL）。将“上级导航”选择为“顶级导航”，即可创建一个一级菜单项。
- 创建二级导航： 要创建一个子菜单，只需再次点击“添加导航链接”，在“上级导航”下拉列表中选择您刚才创建的一级导航。这样，新的链接就会作为该一级导航的子项出现。
- 显示顺序： 通过调整“显示顺序”的数字，可以控制导航项的排列位置，数字越小越靠前。
AnQiCMS的导航设置原生支持两级菜单的嵌套。这意味着您可以在后台方便地设置“主菜单 -> 子菜单”这样的结构。
第二步：模板文件中的实现
完成了后台配置后，接下来就是将这些数据呈现在网站前端。AnQiCMS的模板文件通常位于 /template 目录下，并使用 .html 后缀。
我们使用 navList 标签来获取后台配置的导航数据。以下是一个基本的两级导航菜单的模板代码示例：
{# 假设我们调用的是默认导航类别，其 typeId 默认为1 #}
<nav class="main-navigation">
<ul>
{# 遍历所有一级导航项 #}
{% navList navs with typeId=1 %}
{% for item in navs %}
<li class="{% if item.IsCurrent %}active{% endif %}{% if item.NavList %} has-submenu{% endif %}">
<a href="{{ item.Link }}" {% if item.SubTitle %}title="{{ item.SubTitle }}"{% endif %}>
{{ item.Title }}
</a>
{# 如果当前一级导航有子菜单，则进行嵌套遍历 #}
{% if item.NavList %}
<ul class="submenu">
{% for subItem in item.NavList %}
<li class="{% if subItem.IsCurrent %}active{% endif %}">
<a href="{{ subItem.Link }}" {% if subItem.SubTitle %}title="{{ subItem.SubTitle }}"{% endif %}>
{{ subItem.Title }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
在这个示例中：
{% navList navs with typeId=1 %}用于获取typeId为 1 的导航类别下的所有导航数据，并将其赋值给变量navs。- 外层的
{% for item in navs %}循环遍历所有的一级导航项。 item.Link和item.Title分别输出导航链接地址和显示名称。{% if item.IsCurrent %}判断当前导航项是否是用户正在访问的页面，如果是，可以添加active类来高亮显示。{% if item.NavList %}是关键，它检查当前一级导航项是否有子导航。如果item.NavList存在，则会进入内层的for循环，遍历并显示所有二级导航项 (subItem)。
深入探讨：三级甚至更多级导航的灵活实现
虽然 navList 标签原生支持两级导航，但在实际网站运营中，我们经常需要更深层次的菜单，例如“一级分类 -> 二级分类 -> 某个二级分类下的产品列表”。AnQiCMS通过灵活的标签嵌套，完全可以实现这种需求。
要实现三级甚至更多级的导航，我们可以在二级导航的循环中，进一步嵌套其他数据调用标签，例如 categoryList（分类列表标签）或 archiveList（文档列表标签），利用二级导航项的 PageId 来动态获取相关内容。
以下是一个实现“一级分类 -> 二级分类 -> 二级分类下的文档列表”的三级导航示例：
<nav class="main-navigation">
<ul>
{% navList navList with typeId=1 %}
{% for item in navList %}
<li class="{% if item.IsCurrent %}active{% endif %}{% if item.NavList %} has-submenu{% endif %}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
{% if item.NavList %}
<ul class="submenu">
{% for inner in item.NavList %}
<li class="{% if inner.IsCurrent %}active{% endif %}{% if inner.PageId > 0 %} has-third-level{% endif %}">
<a href="{{ inner.Link }}">{{ inner.Title }}</a>
{# 检查二级导航项是否关联了某个分类ID (PageId)，如果存在，则获取该分类下的文档 #}
{% if inner.PageId > 0 %}
{# 获取该分类下的文档，作为第三级菜单 #}
{% archiveList products with type="list" categoryId=inner.PageId limit="8" %}
{% if products %}
<ul class="third-level-menu">
{% for product in products %}
<li><a href="{{ product.Link }}">{{ product.Title }}</a></li>
{% endfor %}
</ul>
{% endif %}
{% endarchiveList %}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
在这个扩展示例中：
- 我们关注内层的
{% for inner in item.NavList %}循环，它代表了二级导航项。 {% if inner.PageId > 0 %}检查当前二级导航项是否在后台配置时关联了一个分类（PageId会是该分类的ID）。- 如果关联了分类，我们便在其中嵌套
{% archiveList products with type="list" categoryId=inner.PageId limit="8" %}标签，获取该分类下的最多8篇文档（