AnQiCMS的导航列表标签（`navList`）如何构建多级菜单并在前端显示？

网站的导航系统是用户与内容交互的核心桥梁，尤其对于内容丰富或层级较深的站点而言，一个清晰、高效的多级菜单至关重要。AnQiCMS 提供了一套强大且灵活的导航列表标签（navList），让您能够轻松构建并展示功能完善的多级菜单。

要充分利用 AnQiCMS 的导航功能，我们需要从后台配置入手，再到前端模板的渲染，一步步构建出我们理想中的菜单结构。

一、后台导航配置：奠定多级菜单的基础

在 AnQiCMS 的管理后台，导航设置是构建多级菜单的第一步。您可以在“后台设置”下的“导航设置”中找到相关选项。

首先，您可以创建不同的“导航类别”，例如“主导航”、“页脚导航”或“侧边栏导航”，这让您能够为网站的不同区域定义独立的菜单系统。默认情况下，系统会提供一个名为“默认导航”的类别。

在选定或创建导航类别后，您便可以添加具体的导航链接了。每条导航链接都可以设置以下关键信息：

1. 显示名称和子标题： 这是菜单项在前端显示的文字，可以根据需求设置主标题和辅助子标题。
2. 上级导航： 这是实现多级菜单的核心。当您添加新的导航链接时，可以选择其“上级导航”。如果选择“顶级导航”，它将成为一级菜单项。如果选择已存在的一级菜单项，则当前链接会成为其下的二级菜单。AnQiCMS 后台目前支持最多两级导航链接的配置，即一级菜单和其下的一级子菜单。
3. 链接类型： AnQiCMS 提供了灵活的链接类型，包括“内置链接”（如首页、文章模型首页）、“分类页面链接”（关联到具体的文章或产品分类、单页面）和“外部链接”（指向任意URL）。当您需要将导航项链接到特定的分类或页面时，其对应的 ID (PageId) 会被保存，这在前端动态加载内容时非常有用。
4. 显示顺序： 通过调整显示顺序，您可以控制菜单项在同级中的排列位置，数字越小越靠前。

通过这些设置，您可以在后台直观地创建出具有层级关系的菜单结构，例如：

• 首页
• 产品中心
  • 产品分类A
  • 产品分类B
• 解决方案
• 关于我们

这些后台配置完成后，接下来就需要通过前端模板标签将其呈现在网站上。

二、前端模板渲染：利用 navList 标签显示菜单

在 AnQiCMS 的模板文件中，navList 标签是用于渲染导航列表的关键。它能够读取您在后台配置好的菜单数据，并以结构化的方式提供给模板进行循环和展示。

navList 的基本使用方式如下：

{% navList navs %}
    {# 菜单项的HTML结构将在这里循环输出 #}
{% endnavList %}

这里，navs 是一个您自定义的变量名，它将包含所有后台配置的导航数据。navList 标签需要成对出现，中间的代码块将对每个导航项进行迭代。

navs 变量是一个数组对象，每一个数组元素（我们通常称之为 item）都代表一个导航链接。每个 item 对象包含以下常用字段：

• item.Title: 导航项的显示名称。
• item.Link: 导航项的链接地址。
• item.IsCurrent: 布尔值，如果当前页面与该导航项匹配，则为 true，可用于高亮显示当前活动菜单。
• item.NavList: 关键之处！ 这是一个嵌套的数组，如果当前 item 存在子菜单，item.NavList 就会包含这些子菜单项。每个子菜单项的结构与父级 item 相同。

基于这些字段，我们可以构建一个基本的两级菜单结构：

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

在上面的代码中，我们首先使用 {% navList navs %} 获取顶层导航数据。然后，通过 {% for item in navs %} 循环遍历每一个一级菜单项。在每个一级菜单项内部，我们检查 {% if item.NavList %} 是否存在子菜单。如果存在，就再使用一个嵌套的 {% for subItem in item.NavList %} 循环来渲染二级菜单项。item.IsCurrent 属性可以帮助我们为当前页面所在的菜单项添加 active 类，以便进行样式高亮。

三、扩展多级菜单的深度：动态加载内容

虽然 navList 标签本身直接支持后台配置的两级菜单，但通过结合其他内容标签，我们可以在前端视觉上实现更深层次的菜单展示，例如在一个二级菜单项下，动态列出其所属分类下的文档列表，或者进一步展示三级分类。

以下是一些常见的多级菜单扩展场景：

1. 在二级导航下显示所属分类的文档列表

假设您在后台配置了一个“产品中心”的一级导航，其下有“产品分类A”和“产品分类B”两个二级导航，并且这些二级导航都关联到了具体的分类 ID (inner.PageId)。您可能希望当鼠标悬停在“产品分类A”上时，能直接看到该分类下的最新产品列表。

<ul>
    {% navList navList with typeId=1 %} {# 假设typeId=1是主导航 #}
    {%- for item in navList %}
    <li>
        <a href="{{ item.Link }}">{{item.Title}}</a>
        {%- if item.NavList %} {# 如果有一级子菜单 #}
        <ul class="nav-menu-child">
            {%- for inner in item.NavList %}
            <li>
                <a href="{{ inner.Link }}">{{inner.Title}}</a>
                {% if inner.PageId %} {# 检查子菜单项是否关联了分类/页面ID #}
                    {# 使用 archiveList 标签，根据 inner.PageId（分类ID）获取文档列表 #}
                    {% archiveList products with type="list" categoryId=inner.PageId limit="8" %}
                    {% if products %} {# 如果该分类下有产品 #}
                        <ul class="nav-menu-child-child"> {# 视觉上的三级菜单 #}
                            {% for product in products %}
                            <li><a href="{{product.Link}}">{{product.Title}}</a></li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                    {% endarchiveList %}
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>

在这个例子中，我们在一级子菜单 (inner) 内部，检查 inner.PageId 是否存在（即该导航项是否关联了某个分类或页面）。如果存在，我们便利用 archiveList 标签，根据 inner.PageId 获取该分类下的最新文档（产品）列表，从而在视觉上构建出一个三级菜单的效果。

2. 在二级导航下显示其下级分类

另一种常见需求是，二级导航项本身是一个父级分类，您希望在其下方展开显示其所有子分类。

<ul>
    {% navList navList with typeId=1 %}
    {%- for item in navList %}
    <li>
        <a href="{{ item.Link }}">{{item.Title}}</a>
        {%- if item.NavList %}
        <ul class="nav-menu-child">
            {%- for inner in item.NavList %}
            <li>
                <a href="{{ inner.Link }}">{{inner.Title}}</a>
                {% if inner.PageId > 0 %} {# 同样检查是否关联了分类ID #}
                    {# 使用 categoryList 标签，根据 inner.PageId 获取其下级分类 #}
                    {% categoryList categories with parentId=inner.PageId %}
                    {% if categories %} {# 如果存在下级分类 #}
                    <ul class="nav-menu-child-child"> {# 视觉上的三级菜单 #}
                        {% for subCategory in categories %}
                        <li>
                            <a href="{{ subCategory.Link }}">{{subCategory.Title}}</a>
                        </li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                    {% endcategoryList %}
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
</ul>

这个例子与上一个类似，但它在二级菜单下嵌套使用了 categoryList 标签，以获取并显示作为父级分类的二级菜单项的所有子分类。

总结

通过 AnQiCMS 的 navList 标签，结合灵活的后台导航配置，以及前端模板中 if 判断、for 循环和 archiveList、categoryList 等其他内容标签，您可以轻松地构建出功能强大、层级清晰的多级网站导航系统。这不仅提升了网站内容的组织