AnQiCMS如何构建并显示多级网站导航菜单？
在网站运营中，清晰、直观的导航菜单是用户体验的核心，它不仅能引导访客快速找到所需信息，更是网站结构和SEO优化的重要组成部分。AnQiCMS 作为一个高效的企业级内容管理系统，提供了灵活强大的导航菜单构建和显示功能，帮助您轻松管理网站的层级结构。
一、在AnQiCMS后台构建导航菜单
构建多级导航菜单的第一步是在AnQiCMS的后台进行集中管理。您可以在“后台设置”区域找到“导航设置”选项，这里是所有网站导航的配置中心。
首先，您可能需要定义不同的导航区域，比如“顶部主导航”、“页脚导航”或是“侧边栏导航”。AnQiCMS 支持通过“导航类别管理”来创建和区分这些导航区域。默认会有一个“默认导航”类别，您可以根据需求新增“页脚导航”等，这样就能为网站的不同位置提供独立的菜单列表。
接着，为每个导航类别添加具体的导航链接。在“导航链接设置”中，您可以灵活地配置每个菜单项。
- 显示名称与辅助信息： 每个菜单项都有一个“显示名称”，这是前端展示给用户看的文字。如果需要更丰富的展示，还可以设置“子标题名称”和“导航描述”，这些信息都可以在模板中调用。
- 链接类型： AnQiCMS 提供了多种链接类型，满足不同内容指向的需求：
- 内置链接： 包含网站首页、文章模型首页、产品模型首页等预设链接，方便快速引用。
- 分类页面链接： 允许您直接选择已创建的文档分类或单页面作为菜单项，当这些内容更新时，导航链接也会自动同步。
- 外部链接： 如果需要指向站外内容或自定义的站内URL，可以选择此项，自由填写目标地址。
- 构建多级结构： AnQiCMS 支持最多两级的导航菜单。通过设置菜单项的“上级导航”，您可以轻松地将某个链接指定为一级导航下的子菜单。例如，如果您有一个“产品”的一级导航，可以在其下添加“产品A”、“产品B”等作为二级菜单项。
- 显示顺序： 每个菜单项都可以设置“显示顺序”，数字越小，显示越靠前，这让您可以方便地调整菜单项的排列次序。
通过这些配置，您可以在后台清晰地规划和构建出符合网站结构的多级导航体系。
二、在前端模板中显示多级导航
完成了后台的菜单配置后，接下来就是将这些精心设计的导航菜单呈现在网站的前端页面上。AnQiCMS 的模板引擎采用类似 Django 的语法，让前端开发人员能够直观地调用和渲染后台数据。
显示导航菜单的核心标签是 navList。使用这个标签，您可以根据之前在后台定义的“导航类别”来调用对应的菜单数据。
{% navList navs %}
<ul>
{%- 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 %}
</ul>
{% endnavList %}
在上面的代码片段中：
{% navList navs %}会获取指定导航类别下的所有一级菜单项，并将其赋值给navs变量。- 外层的
{% for item in navs %}循环用于遍历所有的一级菜单。 {{ item.Link }}和{{ item.Title }}分别用于输出菜单项的链接和显示名称。item.IsCurrent则可以帮助您判断当前访问的页面是否与该菜单项匹配，从而添加active类名来实现高亮显示。{%- if item.NavList %}是判断当前一级菜单项下是否存在二级子菜单。如果存在，就会进入内层的{% for inner in item.NavList %}循环，遍历并显示所有二级菜单项，其调用方式与一级菜单项类似。
拓展应用：在导航下拉菜单中展示内容
AnQiCMS 的强大之处在于，您不仅可以显示简单的二级菜单，还可以在导航的下拉区域中进一步整合和展示其他动态内容，例如某个分类下的最新产品或子分类列表。这通常通过结合 navList 标签、archiveList （文档列表）标签和 categoryList （分类列表）标签来实现。
假设您希望在一个一级菜单（例如“产品中心”）下的二级菜单（例如“电子产品”）下拉时，直接显示“电子产品”分类下的部分最新产品：
<ul>
{% navList navList with typeId=1 %} {# 假设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 %} {# 判断二级菜单是否关联了某个分类ID #}
{% archiveList products with type="list" categoryId=inner.PageId limit="8" %} {# 调用该分类下的8个最新产品 #}
{% if products %}
<ul class="nav-menu-child-products">
{% 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>
在上述示例中，inner.PageId 能够获取到二级菜单所关联的分类ID，然后我们就可以利用这个ID，通过 archiveList 标签调用该分类下的最新产品进行展示。同样地，如果您想展示子分类列表，只需将 archiveList 替换为 categoryList 即可。
通过这些灵活的后台配置和模板标签，AnQiCMS 使得构建和管理多级网站导航变得直观而高效，无论您的网站结构有多复杂，都能轻松实现清晰的用户导向。
常见问题 (FAQ)
Q1: 为什么我的导航菜单只显示了两级，我想要更多层级的菜单？ AnQiCMS 在后台“导航设置”中，默认支持最多两级的导航菜单结构（即一级菜单及其下一级的子菜单）。如果您的业务确实需要超过两级的菜单，通常我们会建议您重新考虑导航的复杂性，因为过深的层级可能会对用户体验和移动端适配造成挑战。如果仍有特殊需求，可以考虑结合“单页面”或“文档分类”页面，在页面的内容区域通过其他方式（例如侧边栏树形菜单）来展示更深层级的内容索引。
Q2: 如何在导航的下拉菜单中展示特定分类的最新文章或产品？
在前端模板中，您可以在 navList 标签循环一级或二级菜单项时，判断当前菜单项是否关联了某个分类（通过 item.PageId 或 inner.PageId 获取分类ID），然后利用 archiveList 标签（用于文章或产品）或 categoryList 标签（用于子分类）来动态调用并展示该分类下的内容。关键在于将菜单项的 PageId 作为 archiveList 或 categoryList 的 categoryId 参数传入。
Q3: 我可以为网站的不同区域（如头部、页脚）设置不同的导航菜单吗？
是的，AnQiCMS 完全支持这样做。您可以在“后台设置”下的“导航设置”中，通过“导航类别管理”创建多个独立的导航类别，例如“顶部导航”、“页脚导航”等。每个类别都可以拥有自己的菜单项和结构。在前端模板中，您只需在调用 navList 标签时，通过 typeId 参数指定对应的导航类别ID，即可在不同位置显示不同的菜单列表。