作为一名经验丰富的AnQiCMS网站运营人员，我深知一套清晰、高效的多层级网站导航菜单对于用户体验和网站SEO至关重要。AnQiCMS在模板设计和后台管理方面都提供了完善的机制，帮助我们轻松构建这样的菜单。接下来，我将详细阐述在AnQiCMS模板中如何创建多层级网站导航菜单。

网站导航是用户浏览网站的地图，一个设计良好的多层级导航能有效引导用户找到所需信息，提升网站的可用性。AnQiCMS系统内置了强大的导航管理功能，并配合灵活的模板标签，使得创建和维护复杂导航结构变得简单直接。

后台管理设置多层级导航

在AnQiCMS的后台，导航的设置是构建多层级菜单的基础。首先，我们需要进入“后台设置”下的“导航设置”页面。

系统默认会提供一个“默认导航”类别，但您也可以根据需求创建多个导航类别，例如“主导航”、“页脚导航”或“侧边栏导航”，这通过“导航类别管理”功能实现。每个导航类别都可以独立管理其下的导航链接，这为网站不同区域的导航提供了极大的灵活性。

在具体的“导航链接设置”中，我们能够定义每一个导航项的属性。要创建多层级导航，关键在于“上级导航”的选择。当您添加新的导航链接时：

  • 创建一级导航： 将“上级导航”设置为“顶级导航”。
  • 创建二级导航： 选择一个现有的一级导航作为其“上级导航”。

AnQiCMS目前支持最多两级导航链接，即一级导航下可以包含二级下拉菜单。对于每个导航链接，您可以设置其“显示名称”、“子标题名称”和“导航描述”，这些信息都可以在前端模板中调用。链接类型也提供了多种选择，包括指向网站内部的“内置链接”、“分类页面链接”或指向任意外部资源的“外部链接”。此外，“显示顺序”字段允许您精细控制导航项的排列位置。

模板中实现多层级导航的渲染

一旦在后台配置好导航结构，接下来就是在前端模板中将其渲染出来。AnQiCMS提供了navList标签，它是实现导航菜单的核心工具。

我们通常会将导航菜单的代码片段放置在模板的partial/目录下，例如partial/header.html，然后通过{% include "partial/header.html" %}的方式引入到主页面中。这种模块化的设计有助于代码的复用和维护。

在partial/header.html（或其他包含导航的模板文件）中，使用navList标签来获取后台设置的导航数据。如果您在后台创建了多个导航类别，可以通过typeId参数指定要调用的导航类别，例如{% navList navs with typeId=1 %}表示调用ID为1的导航类别（通常是默认导航）。

navList标签会将导航数据作为一个数组对象（如navs）返回。要渲染多层级菜单，我们需要使用嵌套的for循环来遍历这个数组：

<ul>
    {% navList navs with typeId=1 %} {# 假设typeId=1是主导航 #}
    {%- for item in navs %}
        {# 判断当前导航项是否为活跃状态，添加active类名 #}
        <li class="{% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
            {%- if item.NavList %} {# 检查是否存在下级导航 #}
            <ul class="submenu"> {# 二级导航菜单容器 #}
                {%- for inner in item.NavList %}
                    <li class="{% if inner.IsCurrent %}active{% endif %}">
                        <a href="{{ inner.Link }}">{{inner.Title}}</a>
                    </li>
                {% endfor %}
            </ul>
            {% endif %}
        </li>
    {% endfor %}
    {% endnavList %}
</ul>

在这个示例中：

  • 外层的{% for item in navs %}循环遍历所有的一级导航项。
  • item.IsCurrent变量可用于判断当前导航项是否为用户正在访问的页面，方便添加active等CSS类以突出显示。
  • item.Link和item.Title分别用于输出导航项的链接地址和显示名称。
  • {%- if item.NavList %}是一个关键的条件判断，它检查当前一级导航项是否包含下级导航。NavList是item对象中包含二级导航项的数组。
  • 如果存在下级导航，则嵌套的{%- for inner in item.NavList %}循环会遍历所有的二级导航项，并同样输出它们的链接和标题。

通过这种方式，我们就能在前端模板中动态地渲染出后台配置的多层级导航菜单。

关键考虑事项

在创建多层级导航菜单时，除了上述步骤，还有一些实践和注意事项：

  • 层级限制： 牢记AnQiCMS目前仅支持最多两级导航。如果您的网站需要更深的导航层级，可能需要考虑结合其他内容列表标签（如categoryList或archiveList）来模拟更深层次的内容展示，而非纯粹的导航菜单结构。
  • 模块化： 充分利用include标签将导航代码拆分为可重用的小模块。这不仅使模板代码更整洁，也便于团队协作和维护。
  • 响应式设计： 考虑到移动设备用户的体验，务必配合CSS和JavaScript对多层级导航进行响应式处理，确保在不同屏幕尺寸下都能良好显示和交互。
  • 缓存更新： 每次在后台修改导航设置后，如果前台没有及时更新，请记得清理系统缓存，以确保最新配置能够生效。

通过AnQiCMS灵活的后台配置和强大的模板标签，我们可以有效地构建出既美观又实用的多层级网站导航菜单，从而提升用户体验和网站的整体效率。

常见问题解答

Q1: AnQiCMS导航菜单最多支持多少层级？

AnQiCMS的后台导航设置支持最多两级导航菜单，即一级导航项下可以包含一个层级的子菜单。这意味着您可以创建主菜单项及其直接的下拉子菜单。

Q2: 如何让当前页面对应的导航菜单项高亮显示？

在模板中，navList标签返回的每个导航项对象（item和inner）都包含一个IsCurrent字段。这个字段在当前页面与导航项链接匹配时会返回true。您可以在模板中使用条件判断，如class="{% if item.IsCurrent %}active{% endif %}"，为当前活跃的导航项添加特定的CSS类，从而实现高亮显示效果。

Q3: 我能否为网站的不同区域（如顶部、侧边栏、页脚）设置不同的导航菜单？

完全可以。AnQiCMS后台的“导航设置”提供了“导航类别管理”功能，允许您创建多个独立的导航类别。例如，您可以创建“主导航”、“页脚导航”等类别，然后为每个类别单独添加和管理导航链接。在模板中，只需通过navList标签的typeId参数指定相应的导航类别ID，即可调用并渲染出不同的导航菜单。