作为一名资深的安企CMS网站运营人员，我深知一套清晰、高效的导航系统对于网站用户体验和内容组织的极端重要性。在AnQiCMS中，建立多层级的导航结构，无论是基础的二级导航，还是通过巧妙组合实现的“更深层级”，都是网站内容管理的关键环节。这里将为您详细阐述如何在AnQiCMS中设置并调用这些导航。
AnQiCMS 导航结构概述
AnQiCMS 提供了一个直观且强大的导航管理模块，允许运营人员灵活地定义网站的菜单结构。系统本身设计支持最多两级导航链接，即一个主导航项下可以包含一个子导航层级。这足以满足大多数企业网站和内容站点的基本需求。在此基础上，通过结合其他模板标签，我们还可以实现视觉上看起来像是“更深层级”的导航效果，进一步丰富网站的层次感。
导航的配置主要通过后台的“导航设置”功能完成，而前端页面的展示则依赖于特定的模板标签进行调用。
在 AnQiCMS 后台设置二级导航
设置二级导航首先需要登录到您的AnQiCMS后台管理界面。在后台的左侧菜单中，您可以找到“后台设置”下的“导航设置”选项。
进入“导航设置”后，您会看到“导航类别管理”和“导航链接设置”两个区域。通常情况下，系统会默认提供一个“默认导航”类别。如果您需要为网站的不同区域（例如页脚、侧边栏等）创建独立的导航菜单，可以点击“添加新类别”来自定义更多的导航类别。
现在，我们来创建导航链接。点击“导航链接设置”旁的“添加新链接”按钮。
首先，创建一级导航链接。在弹出的“添加导航链接”窗口中：
- 上级导航：选择“顶级导航”，这表示您正在创建一个主菜单项。
- 显示名称：输入导航菜单上要显示的文本，例如“产品与服务”、“新闻中心”等。
- 链接类型：根据您的需求选择。
- 内置链接：例如指向网站首页，或某个模型（如文章、产品）的首页。
- 分类页面链接：您可以选择已存在的某个文章分类或产品分类，甚至是一个单独的页面作为导航的目标。
- 外部链接：适用于指向站内其他页面或外部网站的任意URL。
- 显示顺序：设置一个数字来控制该导航项在菜单中的排列位置，数字越小越靠前。
完成一级导航的创建后，重复“添加新链接”的步骤来创建二级导航。关键在于“上级导航”字段的选择。
- 上级导航：这次您需要从下拉列表中选择您刚刚创建的一级导航项，例如如果您的一级导航是“产品与服务”，那么这里就选择“产品与服务”。
- 显示名称、链接类型、显示顺序等字段的设置方式与一级导航相同，但它们的作用范围仅限于您所选上级导航下的子菜单。
通过这样的方式，您可以为每个一级导航项添加多个二级导航链接，从而构建出清晰的二级菜单结构。
在模板中调用导航列表
在AnQiCMS的模板文件中，使用 navList 标签来调用您在后台配置的导航菜单。模板文件通常存放在 /template 目录下，并使用类似Django模板引擎的语法。
打开您网站模板中的公共头部文件（例如 partial/header.html 或 base.html，具体取决于您的模板结构），在需要显示导航菜单的位置，您可以按照以下方式调用：
{# 假设您要调用默认导航类别，其 typeId 默认为 1 #}
{% 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 来显示一级导航（item）。在每个一级导航项内部，我们通过 {% if item.NavList %} 判断是否存在二级导航。如果存在，则再次遍历 item.NavList 来显示所有二级导航（inner）。item.IsCurrent 和 inner.IsCurrent 可以帮助您为当前访问页面的导航项添加 active 类，以实现高亮显示。
实现“更深层级”导航的进阶技巧（结合分类列表）
虽然AnQiCMS的 navList 标签原生支持两级导航，但在实际运营中，有时我们可能需要展示视觉上更深层次的结构，例如在二级导航下直接列出某个分类下的文档，或者该分类的子分类。这可以通过巧妙地结合 categoryList 标签来实现。
这种方法的核心在于：将二级导航项的链接类型设置为“分类页面链接”，然后在模板中，利用 categoryList 标签获取该分类下的子分类或文档列表。
以下是一个结合 navList 和 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 %} {# 判断这个二级导航项是否关联了某个分类或页面 #}
{# 调用 inner.PageId 对应的分类的子分类列表，parentId=inner.PageId #}
{% categoryList categories with parentId=inner.PageId %}
{% if categories %}
<ul class="nav-menu-child-child"> {# 这是第三级视觉效果的列表 #}
{% 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 变量存储了二级导航项所关联的分类或页面的ID。我们利用这个ID作为 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 %}
{# 调用 inner.PageId 对应的分类下的文档列表 #}
{% archiveList products with type="list" categoryId=inner.PageId limit="8" %}
{% if products %}
<ul class="nav-menu-child-child">
{% 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>
这里我们使用 archiveList 标签，并通过 categoryId=inner.PageId 来获取该分类下的文档列表，例如产品列表或文章列表。
注意事项与**实践
- 导航规划：在设置导航前，建议先规划好网站的整体内容结构和用户访问路径。清晰的结构能让用户更快找到所需信息，提升网站可用性。
- 链接类型匹配：确保您在后台选择的“链接类型”与实际内容相符。例如，如果导航项指向一个分类，就选择“分类页面链接”。
- 显示顺序：合理利用显示顺序参数，确保导航项按照逻辑或重要性进行排列。
- 缓存更新：在后台对导航进行任何修改后，请务必前往“更新缓存”功能清理网站缓存，确保前端能及时显示最新配置。
- 模板样式：上述代码仅展示了结构，您需要根据网站的CSS样式来美化导航菜单，使其符合整体设计风格。
- 性能考量：虽然
categoryList或archiveList标签的嵌套使用能够实现多级视觉效果，但过度嵌套或在每个导航项都加载大量数据可能会影响页面性能。请根据实际需求和网站规模进行权衡。
通过以上方法，您不仅可以轻松在AnQiCMS中设置和调用标准的二级导航，还能通过灵活运用其他内容标签，实现更丰富的多层级内容展示效果，从而构建一个结构清晰、用户友好的网站。
常见问题 (FAQ)
Q1: 我在后台设置了二级导航，但前端页面并没有显示，可能是什么原因？
这通常是由几个原因造成的。首先，请确保您在“导航链接设置”中为二级导航正确选择了其对应的“上级导航”，并且上级导航本身也是一个有效的一级导航项。其次，检查您的前端模板文件中是否正确使用了 navList 标签，并且遍历了 item.NavList 来显示子导航。如果这些都正确，请尝试清除AnQiCMS后台的缓存，并刷新您的浏览器缓存，因为有时旧的缓存内容会导致前端不更新。
Q2: AnQiCMS的 navList 标签是否支持三级或更多层级的原生导航？
根据AnQiCMS的设计，navList 标签原生支持的导航层级是两级，即一个主导航项下可以带一层子导航。如果您需要在视觉上呈现更多层级的导航效果，您可以通过在模板中结合 categoryList 标签等其他内容标签，在二级导航的渲染逻辑中动态加载其关联分类的子分类或文章列表来实现。这虽然不是 navList 本身的多级扩展，但能达到类似的多层次内容展示效果。
Q3: 如何让导航菜单项在当前页面高亮显示？
在 navList 标签的循环中，每个导航项 item（包括一级导航和二级导航的 inner）都含有一个 IsCurrent 属性，它会返回一个布尔值，指示当前导航项是否对应用户正在访问的页面。您可以使用这个属性来为导航项添加一个特定的CSS类，例如 active，然后在您的CSS文件中定义该类的样式，即可实现高亮显示。具体用法可以参考文章中提供的模板调用示例。