如何在安企CMS模板中实现自定义导航菜单的层级显示？
在安企CMS中实现自定义导航菜单的层级显示，是一个提升网站用户体验和内容组织性的重要环节。AnQiCMS提供了灵活的后台配置和强大的模板标签，让用户能够轻松构建出结构清晰、易于浏览的多级导航菜单。
后台设置自定义导航菜单
要实现导航菜单的层级显示，首先需要在AnQiCMS的后台进行相应的配置。
在后台管理界面，找到“后台设置”菜单下的“导航设置”选项。这里是管理网站所有导航链接的核心区域。系统默认会有一个“默认导航”类别，你可以选择在此基础上编辑，也可以通过“导航类别管理”功能创建新的导航类别，例如“页脚导航”或“侧边栏导航”，以满足不同区域的展示需求。
进入具体的导航类别后，你可以添加新的导航链接。在添加或编辑导航链接时，有几个关键的设置项决定了其层级关系：
- 显示名称：这是导航链接在前台页面上显示的文字，你可以根据需要自由命名。
- 链接类型：AnQiCMS支持三种类型的链接：内置链接（如首页）、分类页面链接（选择现有文章或产品分类）和外部链接（可链接到站内外任意URL）。选择合适的链接类型，让导航指向正确的内容。
- 上级导航：这是实现层级显示的关键。如果一个导航链接是顶层菜单项，就选择“顶级导航”。如果它是一个子菜单项，则需要从下拉列表中选择其所属的父级导航。AnQiCMS的导航系统目前支持最多两级菜单，即一个顶级菜单项可以包含一层子菜单。
- 显示顺序：你可以通过设置数字来控制导航链接的排列顺序，数字越小，显示越靠前。
- 子标题名称和导航描述：这两个字段可以为导航提供额外的文本信息，方便在模板中进行更丰富的展示，例如显示中文标题的同时，再显示一个英文子标题。
通过以上设置，你可以构建出清晰的二级导航结构，例如：首页、关于我们（一级菜单）、产品（一级菜单）-> 产品分类A（二级菜单）、产品分类B（二级菜单）、新闻（一级菜单）等。
模板中调用并显示层级导航
在后台完成导航菜单的设置后，接下来需要在网站模板中调用这些数据并进行层级显示。AnQiCMS提供了navList标签来获取导航列表数据。
首先，在你的模板文件（例如header.html或base.html）中，你可以使用navList标签获取导航数据。这个标签会返回一个包含所有导航项的数组对象，其中每个导航项可能包含一个名为NavList的子数组，用于存储其下级菜单。
一个典型的调用结构如下：
{% navList navs %}
<nav>
<ul class="main-nav">
{%- for item in navs %}
<li class="nav-item {% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}" {% if item.NavList %}class="has-submenu"{% endif %}>
{{ item.Title }}
{% if item.SubTitle %}<span>{{ item.SubTitle }}</span>{% endif %}
</a>
{%- if item.NavList %}
<ul class="submenu">
{%- for inner in item.NavList %}
<li class="submenu-item {% if inner.IsCurrent %}active{% endif %}">
<a href="{{ inner.Link }}">
{{ inner.Title }}
{% if inner.SubTitle %}<span>{{ inner.SubTitle }}</span>{% endif %}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
{% endnavList %}
在上面的代码示例中：
{% navList navs %}获取了后台配置的所有导航菜单，并将其赋值给navs变量。- 外层的
{% for item in navs %}循环遍历了所有的顶级导航菜单项。item.Link和item.Title分别用于显示顶级菜单的链接和文本。{% if item.IsCurrent %}active{% endif %}可以用来判断当前访问的页面是否与该导航项匹配，从而添加active类名，实现选中状态的样式高亮。{% if item.NavList %}是判断当前顶级菜单项是否有子菜单的关键。如果存在NavList，则表示它有下级菜单。
- 内层的
{% for inner in item.NavList %}循环遍历了当前顶级菜单项的所有子菜单。inner.Link和inner.Title分别用于显示子菜单的链接和文本。
通过这样的结构，你可以灵活地利用CSS样式来控制顶级菜单和子菜单的布局，例如使用浮动、定位或Flexbox/Grid来实现下拉菜单、侧边栏展开等视觉效果。你可以根据自己的网站设计需求，为main-nav和submenu添加相应的类名和样式。
拓展应用和注意事项
除了简单的链接显示，你还可以结合其他标签实现更丰富的导航体验。例如，如果你的导航子菜单指向的是某个分类，你可以通过inner.PageId（如果子菜单是关联了分类页面）来获取该分类下的热门文章或产品列表，直接在下拉菜单中进行展示，进一步提升用户触达内容的效率。这在tag-/anqiapi-other/165.html文档的示例中有所体现，即在下拉菜单中显示产品文档或子分类列表。
注意事项：
- 安企CMS的导航菜单目前支持两级，如果你的网站设计需要更深层次的导航结构，可能需要考虑通过内容分类或单页面来构建，并在模板中手动调用
categoryList等标签进行多层嵌套，而不是依赖navList的自动层级功能。 item.IsCurrent属性是实现导航“选中”状态的关键，确保你的CSS能够正确识别并渲染这个状态，为用户提供清晰的视觉反馈。- 在进行模板修改时，建议先备份原始模板，并在测试环境中进行，以避免对线上网站造成不必要的影响。
通过对后台导航设置的灵活运用和模板中navList标签的巧妙组合，你将能够为你的AnQiCMS网站构建出功能完善、层级分明且用户友好的导航系统。
常见问题 (FAQ)
1. AnQiCMS导航菜单是否支持三级或更多级菜单？
目前AnQiCMS的内置导航菜单功能设计为支持最多两级层级显示（即一个顶级菜单项可以包含一层子菜单）。如果你的网站需要更深层次的导航结构，可以考虑通过组合使用内容分类（categoryList标签）和自定义模板逻辑来实现，但这就需要更复杂的模板代码来手动构建多层嵌套关系。
2. 如何设置导航菜单在鼠标悬停时才显示子菜单？
这主要是通过CSS和少量JavaScript来实现的。你可以在模板中按照两级列表的HTML结构来输出导航（如<ul><li><a></a><ul class="submenu">...</ul></li></ul>），然后使用CSS（例如display: none; 和 display: block; 配合:hover伪类）来控制子菜单（.submenu）的显示与隐藏。对于更复杂的交互，如淡入淡出效果或避免触摸设备问题，可能需要引入JavaScript库（如jQuery）来辅助。
3. 我能否在导航下拉菜单中直接显示某个分类下的最新文章或热门产品？
是的，这是可以实现的。在模板中，当检测到某个导航项有子菜单或者该导航项关联了一个分类（通过item.PageId获取分类ID），你可以在该导航项的子菜单区域内，嵌套使用archiveList或categoryList等标签来获取并显示对应的最新文章、热门产品或子分类列表。例如，在子菜单的<li>内部再加入一个archiveList循环来展示文章标题。