一个清晰、直观的导航系统是任何网站成功的关键，它能引导访问者快速找到所需信息，极大提升用户体验。AnQiCMS作为一个高效的内容管理系统，提供了灵活强大的功能来构建和管理网站的导航菜单，包括对多级结构和二级下拉菜单的完美支持。
在AnQiCMS后台定义您的导航结构
在AnQiCMS中，构建多级导航菜单的第一步是在后台管理界面进行配置。您可以前往“后台设置”区域，找到“导航设置”选项。这里是您管理所有网站导航的中心。
导航类别管理：划分导航区域 AnQiCMS允许您创建不同的导航类别，以适应网站不同区域的需求。例如，除了默认的“主导航”，您可能还需要一个“页脚导航”或“侧边栏导航”。在“导航类别管理”中，您可以根据网站布局的需要，新增自定义类别。每个类别都有一个唯一的ID，这在前端调用时会用到，确保您能精确地在指定位置显示对应的导航。
导航链接设置：构建菜单项 这是创建和组织具体菜单项的核心环节。在导航链接设置中，您可以为每个菜单项配置以下关键信息：
层级关系：实现一级与二级下拉菜单 AnQiCMS特别支持最多两级导航链接，这意味着您可以轻松实现一级菜单下的二级下拉菜单。在添加或编辑导航链接时，通过“上级导航”选项来确定其层级。如果选择“顶级导航”，它将显示为一级菜单；如果选择一个现有的一级菜单作为上级，它就会成为该菜单下的二级下拉项。这种设计让菜单层级清晰可控，非常适合常见的网站导航布局。
显示与描述：打造用户友好的界面 您可以为每个导航项设置“显示名称”，这是访问者在网站上看到的菜单文字。此外，还可以添加“子标题名称”和“导航描述”。虽然并非所有模板都会用到这些字段，但它们提供了丰富的自定义空间，让您的导航更具信息量或视觉吸引力。
链接类型：满足多样化指向需求 AnQiCMS提供了多种链接类型，让您的导航可以指向任何内容：
- 内置链接：包括网站首页、文章模型首页、产品模型首页等，便于快速链接到网站的核心功能页面。
- 分类页面链接：您可以选择网站中已存在的任何文章分类、产品分类或独立页面作为导航目标，确保导航与网站内容紧密结合。
- 外部链接：如果您需要链接到其他网站或站内特定URL，可以直接填写外部链接，灵活度极高。
显示顺序：掌控菜单的展示顺序 通过设置“显示顺序”数值，您可以轻松调整导航菜单项的排列次序。数值越小，菜单项显示越靠前，让您完全掌控导航的布局。
前端实现：利用navList标签呈现菜单
当导航结构在后台定义完毕后，下一步就是如何在网站前端的模板中将它们优雅地呈现出来。AnQiCMS为此提供了功能强大的navList标签，它能将后台配置的数据以结构化的形式提供给模板。
使用navList标签时，您可以指定要调用的导航类别ID（typeId），例如typeId=1通常对应主导航。如果您的网站启用了多站点功能，还可以通过siteId参数来指定调用哪个站点的数据。
navList标签会返回一个包含所有导航项的列表对象。每个导航项（例如item）都包含以下重要字段：Title（标题）、Link（链接）、IsCurrent（是否为当前页面链接）、以及一个至关重要的NavList字段。NavList本身也是一个列表，它包含了该导航项的所有二级子菜单项，这正是实现二级下拉菜单的关键。
以下是一个简化且连贯的代码示例，展示了如何在模板中利用navList标签构建一个包含二级下拉菜单的导航：
<nav class="main-navigation">
<ul class="primary-menu">
{% navList navs with typeId=1 %} {# 假设typeId=1对应主导航 #}
{% for item in navs %}
<li class="menu-item {% if item.IsCurrent %}active{% endif %} {% if item.NavList %}has-dropdown{% endif %}">
<a href="{{ item.Link }}" {% if item.NavList %}aria-haspopup="true"{% endif %}>
{{ item.Title }}
</a>
{% if item.NavList %}
<ul class="dropdown-menu">
{% for subItem in item.NavList %}
<li class="dropdown-item {% if subItem.IsCurrent %}active{% endif %}">
<a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
在这段代码中，我们首先使用{% navList navs with typeId=1 %}获取了主导航的所有一级菜单项。接着，通过外层{% for item in navs %}循环遍历每个一级菜单。对于每个一级菜单项，我们检查{% if item.NavList %}来判断它是否存在二级子菜单。如果存在，就渲染一个dropdown-menu的<ul>，并在内层{% for subItem in item.NavList %}循环中遍历并显示所有二级子菜单项。
通过item.IsCurrent和subItem.IsCurrent字段，您还可以轻松地为当前访问页面对应的导航项添加“active”类或其他样式，以高亮显示当前位置，进一步增强用户体验。
进阶应用：导航中的内容展示
AnQiCMS的导航系统不仅限于简单的链接跳转，它还支持在下拉菜单中直接展示相关内容，例如特定分类下的文章或子分类列表。这需要您在二级菜单的循环中结合archiveList或categoryList标签。
例如，如果您想在某个二级下拉菜单中，显示该菜单所指向分类下的最新几篇文章，可以在二级菜单项subItem的循环内部使用archiveList：
{# ... (外层navList和item循环) ... #}
{% if item.NavList %}
<ul class="dropdown-menu">
{% for subItem in item.NavList %}
<li class="dropdown-item {% if subItem.IsCurrent %}active{% endif %}">
<a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
{# 假设subItem.PageId是分类ID，且我们想展示该分类下的文档 #}
{% if subItem.PageId > 0 %}
{% archiveList articles with type="list" categoryId=subItem.PageId limit="5" %}
{% if articles %}
<ul class="content-list">
{% for article in articles %}
<li><a href="{{ article.Link }}">{{ article.Title }}</a></li>
{% endfor %}
</ul>
{% endif %}
{% endarchiveList %}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{# ... (外层navList和item循环结束) ... #}
这段代码演示了如何在二级菜单项下，通过subItem.PageId（通常用于存储链接到的分类或页面ID）来调用archiveList标签，显示该分类下的最新5篇文章。这种方法极大地丰富了导航的交互性和信息密度。
通过以上步骤，您就可以在AnQiCMS中灵活构建和展示多级导航菜单，实现直观且功能丰富的网站导航体验。
常见问题 (FAQ)
为什么我配置了二级菜单，但在网站前台却没有显示下拉效果？ 这通常是由于您的网站模板未对二级导航的CSS样式或JavaScript交互进行适配。AnQiCMS的
navList标签会正确地输出二级菜单的数据结构（即item.NavList），但前端的视觉效果（如鼠标悬停显示下拉菜单）需要模板中相应的CSS样式和JavaScript代码来支撑。请检查您的模板中是否有针对.has-dropdown或.dropdown-menu等类的样式定义和交互脚本。如何让当前访问的页面在导航菜单中高亮显示？
navList标签在遍历导航项时，会为每个item（包括一级和二级菜单项）提供一个IsCurrent字段，其值为true表示该导航项对应当前正在访问的页面。您可以在模板中使用条件判断{% if item.IsCurrent %}或{% if subItem.IsCurrent %}，然后为该<li>或<a>标签添加一个特定的CSS类（例如active），并通过CSS样式来定义高亮效果。AnQiCMS是否支持创建超过两级的导航菜单（例如三级或更多）？ 根据AnQiCMS的“导航链接设置”说明，系统原生支持最多2级的导航链接，即一级菜单和其下的一级下拉菜单。如果您需要更深层次的导航结构，可能需要通过自定义模板逻辑或结合其他内容展示方式来实现，但这通常会增加模板开发的复杂性，且过深的导航层级在用户体验上可能并不推荐。