AnQiCMS模板如何构建和显示多级导航菜单？

网站导航是用户与网站互动的第一扇窗，清晰、直观的导航系统能极大地提升用户体验，帮助访客快速找到所需信息。AnQiCMS 提供了灵活强大的导航管理功能，无论是简单的单级菜单，还是复杂的二级、三级甚至更多层级的多级导航，都能轻松实现。接下来，我们将详细了解如何在 AnQiCMS 中构建和显示多级导航菜单。

后端设置：构建导航的基石

在 AnQiCMS 中，多级导航的构建始于后台的精心配置。您可以通过后台的“网站导航设置”功能，定义网站的各个菜单结构。

1. 导航类别管理

首先，导航不仅仅局限于网站顶部的主菜单。AnQiCMS 允许您创建多个“导航类别”，例如主导航、页脚导航、侧边栏导航等等。 在“导航类别管理”中，您可以根据网站布局需求，新增不同的导航类别。系统默认会有一个“默认导航”类别，您可以根据需要创建新的类别，比如创建一个名为“页脚导航”的类别。每个类别都有一个唯一的 typeId，这个 ID 将在前端模板中用于指定调用哪个导航列表。

2. 导航链接设置

确定好导航类别后，下一步就是往这些类别中添加具体的导航链接。在“导航链接设置”中，您可以为每个类别添加导航条目，并定义它们的层级关系。

• 上级导航： 这是实现多级导航的关键。您可以选择一个已存在的一级导航作为当前链接的“上级导航”，这样当前链接就会成为其子菜单项。AnQiCMS 原生支持最多两级导航（即一级主菜单，二级子菜单），通过这个设置可以轻松实现。
• 显示名称、子标题名称、导航描述： 这些字段允许您为导航项提供丰富的信息，例如主标题、副标题或简要描述，这在一些设计复杂的导航菜单时非常有用。
• 链接类型： AnQiCMS 提供了三种灵活的链接类型：
  • 内置链接： 包含首页、文章模型首页、产品模型首页等常用页面，方便直接链接到这些功能页面。
  • 分类页面链接： 这是构建动态多级导航的重要选项。您可以选择网站中已创建的任何分类或单页面作为导航链接。
  • 外部链接： 允许您输入任意 URL，无论是站内其他页面还是外部网站链接。
• 显示顺序： 您可以为每个导航链接设置一个数字顺序，数字越小，显示越靠前，从而精确控制导航项的排列。

通过这些设置，您可以根据自己的网站结构和设计需求，在 AnQiCMS 后台灵活地搭建出各种层次的导航菜单。

模板调用：将导航呈现于前端

一旦后台导航设置完毕，前端模板中就可以通过特定的标签来调用并显示这些导航数据。AnQiCMS 使用的是类似 Django 模板引擎的语法，非常直观。

1. 使用 navList 标签调用导航

核心的导航调用标签是 navList。它会根据您在后台的配置，提取出对应的导航数据。

基础的 navList 标签用法如下，它会把获取到的导航数据存入 navs 变量中，然后您可以通过 for 循环遍历这些数据：

{% navList navs with typeId=1 %} {# 这里的 typeId=1 对应后台“默认导航”的类别ID，请根据实际情况修改 #}
    {# 导航菜单的HTML结构将在这里构建 #}
{% endnavList %}

2. 构建单级导航菜单

如果只需要显示一级菜单，代码会比较简洁：

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

在上面的代码中，item.Link 获取导航链接地址，item.Title 获取导航显示名称。item.IsCurrent 是一个非常有用的布尔值，当当前页面与该导航链接匹配时，它会返回 true，您可以利用它来为当前激活的菜单项添加 active 类，实现高亮效果。

3. 构建二级导航菜单

要实现二级导航，需要利用 navList 返回数据中 item.NavList 属性。如果一个导航项有子菜单，那么 item.NavList 将是一个包含子菜单项的数组。您可以在父菜单项的循环中，再嵌套一个 for 循环来显示子菜单：

<nav>
    <ul class="main-menu">
        {% navList navs with typeId=1 %}
            {% for item in navs %}
                <li class="{% if item.IsCurrent %}active{% endif %}">
                    <a href="{{ item.Link }}">{{ item.Title }}</a>
                    {% if item.NavList %} {# 判断是否有子菜单 #}
                        <ul class="sub-menu">
                            {% 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 %}
        {% endnavList %}
    </ul>
</nav>

这段代码展示了一个典型的二级导航结构。当 item.NavList 存在时，就会渲染一个 sub-menu 的 <ul> 列表，其中包含所有的子菜单项。

4. 结合 categoryList 实现多级动态导航 (适用于更深层级)

AnQiCMS 的 navList 标签原生支持两级导航。但如果您的网站分类层级更深，或者您希望导航完全动态地根据分类结构生成（而不仅仅是后台手动配置的链接），那么可以结合使用 categoryList 标签。

categoryList 标签可以获取指定内容模型的分类数据，并且能够递归地显示子分类。通过将 categoryList 嵌套在 navList 的子菜单部分，或者直接独立使用 categoryList，您可以构建出更灵活的多级动态导航。

以下是一个将 navList 与 categoryList 结合，实现“一级导航（后台配置）-> 二级导航（后台配置）-> 三级分类（动态获取）”的示例：

<nav>
    <ul class="main-menu">
        {% navList navs with typeId=1 %}
            {% for item in navs %}
                <li class="{% if item.IsCurrent %}active{% endif %}">
                    <a href="{{ item.Link }}">{{ item.Title }}</a>
                    {% if item.NavList %}
                        <ul class="sub-menu">
                            {% for subItem in item.NavList %}
                                <li class="{% if subItem.IsCurrent %}active{% endif %}">
                                    <a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
                                    {# 假设 subItem.PageId 对应一个分类ID，且我们希望在其下动态显示其子分类 #}
                                    {% if subItem.PageId > 0 %}
                                        {% categoryList categories with parentId=subItem.PageId %}
                                            {% if categories %}
                                                <ul class="third-level-menu">
                                                    {% for category in categories %}
                                                        <li><a href="{{ category.Link }}">{{ category.Title }}</a></li>
                                                    {% endfor %}
                                                </ul>
                                            {% endif %}
                                        {% endcategoryList %}
                                    {% endif %}
                                </li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </li>
            {% endfor %}
        {% endnavList %}
    </ul>
</nav>

在这个示例中，我们首先使用 navList 获取了两级后台配置的导航。在二级导航 subItem 的循环中，我们检查 subItem.PageId (如果二级菜单关联了某个分类ID)，然后使用 categoryList 获取该分类的所有子分类，从而动态生成了第三级菜单。categoryList 本身也支持 parentId 参数来获取指定父级下的子分类，并有 HasChildren