如何在AnQiCMS模板中，精确控制导航菜单的显示层级和排序？

在网站运营中，清晰直观的导航菜单如同指引访客探索网站的明灯。精心设计的导航不仅能提升用户体验，更能引导搜索引擎更好地理解网站结构。AnQiCMS 提供了一套灵活的机制，帮助用户在后台精准配置导航菜单的层级和排序，并在前端模板中实现这些控制。

搭建导航骨架：后台设置是关键

在 AnQiCMS 中，对导航菜单的精确控制始于其后台管理界面。这里就像是导航菜单的蓝图设计中心，我们可以定义导航的整体结构和每个元素的具体表现。

首先，您需要前往后台的“后台设置”区域，然后选择“导航设置”。在这里，您会看到两个核心的管理板块：“导航类别管理”和“导航链接设置”。

1. 导航类别管理：定义菜单区域 一个网站往往不止一个导航菜单，例如顶部主导航、页脚导航、侧边栏导航等等。AnQiCMS 允许您通过“导航类别管理”来创建不同的菜单区域。默认情况下，系统会提供一个“默认导航”类别。如果您需要为页脚或侧边栏创建独立的导航，只需添加一个新的导航类别，并为其命名，例如“页脚导航”或“侧边栏菜单”。这个分类将作为在模板中调用特定导航菜单的依据。

2. 导航链接设置：构建层级与顺序 在定义好导航类别之后，接下来就是往这些类别中添加具体的导航链接。点击您想要编辑的导航类别，进入“导航链接设置”界面，这里是实现层级和排序控制的核心。

   • 显示名称与链接类型： 每个导航项都需要一个“显示名称”，这是前端访客看到的文字。更重要的是“链接类型”，它决定了这个导航项链接到哪里。您可以选择链接到内置的首页、文章/产品模型首页，也可以指定到具体的“分类页面”（文章分类、产品分类、单页面），或者仅仅是一个“外部链接”（可以是站内其他页面，也可以是外部网站）。
   • 上级导航：构建菜单层级 AnQiCMS 支持最多两级导航链接，即一个主导航项下可以带一个下拉子导航。要实现这一点，在添加或编辑导航链接时，只需在“上级导航”选项中选择其所属的主导航项即可。选择“顶级导航”则表示这是一个一级主菜单项。这种父子关系的设置，自然地构建了菜单的层级结构。
   • 显示顺序：决定排列次序 “显示顺序”是控制导航项排列次序的关键。这是一个数字字段，系统会按照数字从小到大的顺序排列导航项。数字越小，该导航项就越靠前。这意味着您可以为首页、关于我们等重要页面设置较小的数字，确保它们显示在导航的最前端，而将次要页面放在后面。当您需要调整某个导航项的位置时，只需修改其显示顺序的数字，系统便会自动重新排列。

通过这些后台设置，您就已经为导航菜单设计好了严谨的结构、层级和清晰的排序规则。

唤醒导航：前端模板中的魔法

完成后台配置后，我们需要在前端模板中将这些导航菜单呈现出来。AnQiCMS 提供了 navList 标签，它能轻松地将您在后台设置的导航数据提取出来，并按照您定义的层级和排序规则进行显示。

1. 调用特定导航类别：navList 标签 在您的模板文件（通常是 header.html、footer.html 或 sidebar.html 等片段文件）中，使用 navList 标签来调用您在后台创建的导航类别。例如，如果您想在顶部显示“默认导航”类别中的菜单，可以这样编写代码：

   {% navList navs with typeId=1 %}
       {# 导航菜单的循环与渲染 #}
   {% endnavList %}
   

   这里的 typeId=1 对应着后台“默认导航”的 ID。如果您创建了其他导航类别（如“页脚导航”），其 typeId 将是不同的数字，或者您也可以直接使用导航类别的名称。navs 是您为这个导航列表指定的一个变量名，后续您将通过它来访问导航项数据。

2. 遍历导航项：for 循环 navList 标签会返回一个包含所有导航项的数组。您可以使用 for 循环来遍历这些导航项，并逐一输出它们的标题和链接：

   {% navList navs with typeId=1 %}
       <ul>
           {% for item in navs %}
               <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
           {% endfor %}
       </ul>
   {% endnavList %}
   

   在这个循环中，item.Link 会自动获取导航项的链接地址，item.Title 则获取其显示名称。这里显示的顺序，将严格遵循您在后台“显示顺序”中设置的数字。

3. 呈现子导航：处理多层级菜单 对于设置了“上级导航”的子菜单项，它们会作为主导航项的 NavList 属性嵌套在其中。因此，要显示二级导航，您需要在主循环中再添加一个 if 判断和 for 循环：

   {% navList navs with typeId=1 %}
       <ul class="main-nav">
           {% for item in navs %}
               <li class="{% if item.IsCurrent %}active{% endif %}">
                   <a href="{{ item.Link }}">{{ item.Title }}</a>
                   {% if item.NavList %} {# 判断是否有子导航 #}
                       <ul class="sub-nav">
                           {% for subItem in item.NavList %}
                               <li class="{% if subItem.IsCurrent %}active{% endif %}">
                                   <a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
                               </li>
                           {% endfor %}
                       </ul>
                   {% endif %}
               </li>
           {% endfor %}
       </ul>
   {% endnavList %}
   

   通过这种嵌套循环，您可以轻松地构建出两级导航菜单。item.IsCurrent 属性还能帮助您判断当前导航项是否是当前页面，从而为激活状态的菜单项添加特定样式，提升用户体验。

4. 动态内容集成：更灵活的导航 AnQiCMS 的强大之处还在于，您可以将导航菜单与网站内容深度结合。例如，一个名为“产品”的主导航项，其下可能需要显示最新的几个产品分类或直接显示最新产品列表。当导航链接类型设置为“分类页面链接”时，navList 标签会提供 item.PageId 属性，您可以利用这个 ID 结合 categoryList 或 archiveList 标签，在导航菜单内部动态加载并