在网站运营中，清晰、直观的导航系统是提升用户体验、引导用户探索内容、乃至优化搜索引擎排名的关键一环。一个设计良好的多级导航菜单能够帮助访问者迅速找到所需信息，减少跳出率，并有效提升网站内容的深度访问。在 AnqiCMS 中，navList 标签正是实现这一目标的核心工具，它允许我们灵活地构建和展示具有层级关系的导航菜单，从而优化用户浏览路径。
理解 navList 标签：AnqiCMS 的导航核心
AnqiCMS 赋予了内容创作者和运营者极大的灵活性，让网站的导航不再是死板的固定代码。通过 navList 标签，我们可以轻松地从后台获取预设的导航数据，并在前端模板中以多级结构呈现。这意味着，网站的菜单更新和调整，只需在后台简单操作即可完成，无需手动修改代码，大大提高了内容运营的效率。
navList 标签的强大之处在于它能够智能识别和处理导航项的层级关系，并提供当前页面状态（例如，当前访问的菜单项会被高亮）等信息，这些都是构建友好用户界面的重要基础。
后台配置：构建导航的基石
在利用 navList 标签之前，我们需要在 AnqiCMS 的后台完成导航菜单的搭建工作。这是前端展示效果的源头，也是确保 navList 能正常工作的前提。
导航类别管理：想象一下，你的网站可能有主导航、页脚导航、侧边栏导航等多个区域需要展示不同的菜单。AnqiCMS 允许你创建不同的“导航类别”，例如“顶部主导航”、“底部友情链接”等。你可以在后台的“后台设置”->“导航设置”中，通过“导航类别管理”来新增或编辑这些类别。每一个类别都有一个唯一的
typeId，这个 ID 将在模板中用于指定调用哪个导航组。默认情况下，系统会提供一个“默认导航”类别。导航链接设置：一旦导航类别确定，我们就可以向其中添加具体的导航链接了。在每个导航类别下，你可以：
- 显示名称：这是导航项在网站上展示的文字。
- 上级导航：这是实现多级导航的关键。你可以选择将某个链接设置为“顶级导航”，使其成为一级菜单；也可以选择一个已存在的一级菜单作为其“上级导航”，从而创建二级菜单。AnqiCMS 支持最多两级的导航链接，这对于大多数网站结构来说已经足够清晰和实用。
- 链接类型：AnqiCMS 提供了灵活的链接选项，包括：
- 内置链接：例如首页、文章模型首页、产品模型首页等，便于快速链接到网站核心页面。
- 分类页面链接：直接选择你已创建的文章或产品分类作为导航，方便用户直接进入特定内容类别。
- 外部链接：允许你添加任何站内或站外的 URL，提供极大的灵活性。
- 子标题名称和导航描述：这些字段可以为导航项提供额外的上下文信息，虽然不一定在所有设计中都直接显示，但在某些复杂的布局或需要更多辅助说明的场景下，它们能派上用场。
- 显示顺序：通过调整数字大小来控制导航项的排列顺序，数字越小越靠前。
通过在后台精心设计导航结构，我们就为前端 navList 标签的调用准备好了所有数据。
模板应用：navList 的实战运用
当后台菜单结构清晰后，就可以在模板文件中利用 navList 标签将其呈现出来了。navList 标签的用法直观且易于理解，遵循 AnqiCMS 模板引擎的统一语法。
我们通常会将导航代码放在网站的公共头部（例如 bash.html 或 header.html），以便在所有页面中重复使用。
以下是一个典型的 navList 标签代码示例，展示了如何创建两级导航菜单：
{# 使用 navList 标签获取后台配置的导航数据，并将其赋值给 'navs' 变量 #}
{% navList navs with typeId=1 %} {# 这里的 typeId=1 假设是主导航的类别ID #}
<ul>
{# 循环遍历所有一级导航项 #}
{%- for item in navs %}
{# 根据 'IsCurrent' 属性判断当前导航项是否为当前页面，并添加 'active' 类名进行高亮 #}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{item.Title}}</a>
{# 检查当前一级导航项是否有子导航（二级菜单） #}
{%- if item.NavList %}
<dl> {# 使用 <dl>、<ul> 或其他合适的 HTML 标签来包裹子导航 #}
{# 循环遍历所有二级导航项 #}
{%- for inner in item.NavList %}
{# 同样根据 'IsCurrent' 属性判断并高亮子导航项 #}
<dd class="{% if inner.IsCurrent %}active{% endif %}">
<a href="{{ inner.Link }}">{{inner.Title}}</a>
</dd>
{% endfor %}
</dl>
{% endif %}
</li>
{% endfor %}
</ul>
{% endnavList %}
代码解析：
{% navList navs with typeId=1 %}：这是navList标签的开始，它会从后台获取typeId为 1 的导航类别下的所有菜单数据，并将这些数据存储在一个名为navs的数组变量中。{%- for item in navs %}：我们使用for循环遍历navs数组中的每一个导航项。item代表当前正在处理的一级导航项。注意-符号可以移除标签占用的空行，使生成的 HTML 更整洁。{{ item.Link }}和{{item.Title}}：分别输出当前导航项的链接地址和显示名称。{% if item.IsCurrent %}active{% endif %}：这是一个非常实用的功能。item.IsCurrent是一个布尔值，如果当前页面是该导航项所指向的页面，它就会为true。我们可以利用这个特性，为当前活动的导航项添加一个active类，配合 CSS 样式，实现高亮效果，提升用户当前的方位感。{%- if item.NavList %}：item.NavList同样是一个数组，包含了当前一级导航项的所有子导航（二级菜单）。通过这个条件判断，我们只在存在子导航时才渲染二级菜单的 HTML 结构。{%- for inner in item.NavList %}：嵌套的for循环用于遍历二级菜单中的每一个子导航项，inner代表当前正在处理的二级导航项。其Link、Title和IsCurrent属性与一级导航项类似。
优化浏览体验：navList 的高级技巧
仅仅显示多级菜单还不够，AnqiCMS 的 navList 还能帮助我们进一步优化用户的浏览体验：
动态内容联动：在某些场景下，你可能希望导航菜单不仅显示固定的链接，还能动态展示一些热门文章或产品。例如，当用户鼠标悬停在某个分类菜单上时，除了显示子分类，还可以在旁边显示该分类下的最新或推荐文章。
”`twig {# 示例：在一个一级导航下显示其子分类，并在子分类旁边显示该子分类下的热门文章 #}