`navList`标签如何构建多级导航菜单并在前台进行显示？

AnqiCMS 为网站导航提供了强大且灵活的配置选项，让您能够轻松构建多级导航菜单，并根据业务需求在前台网站进行定制化显示。无论是简单的单层菜单，还是复杂的带下拉内容的多级导航，navList 标签都能助您一臂之力。

要实现多级导航，我们首先需要在后台管理系统中完成导航结构的配置，这为前端的显示打下了基础。

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

安企CMS的后台导航设置，位于“后台设置”下的“导航设置”模块。在这里，您可以直观地创建和管理网站的各个导航菜单。

首先，您会看到“导航类别管理”功能。系统默认提供了一个“默认导航”类别，但您可以根据需要创建更多导航类别，例如“页脚导航”、“侧边栏导航”等，这通过为每个类别指定一个唯一的 typeId 来区分。这种分类管理方式让不同位置的导航互不干扰，更便于维护。

在具体的“导航链接设置”中，安企CMS支持构建最多两级的导航链接。这意味着您可以拥有主菜单项，以及主菜单项下的二级子菜单项。对于每个导航链接，您可以配置以下重要信息：

• 上级导航： 决定了当前链接是一级主菜单项（选择“顶级导航”），还是某个主菜单项下的子菜单项。
• 显示名称： 这是导航在前台显示的文字，可以根据需要自由命名，不必与链接内容完全一致。
• 子标题名称与导航描述： 如果您的设计需要，可以在这里为导航项添加额外的文字说明，以便在前台调用时显示更丰富的信息。
• 链接类型： 这是导航灵活性的关键所在。您可以选择：
  • 内置链接： 链接到网站的首页、文章模型首页、产品模型首页或其他自定义模型首页。
  • 分类页面链接： 轻松选择已有的文档分类或单页面作为导航目标。
  • 外部链接： 允许您链接到任何外部网站地址，实现站内外资源的无缝跳转。
• 显示顺序： 通过数字大小控制导航项的排列顺序，数字越小越靠前。

通过这些配置，您可以轻松在后台搭建起一个清晰、有层次的导航结构。

前端显示：navList 标签的实战运用

一旦后台导航结构配置完成，我们就可以在前台模板中使用 navList 标签来获取并显示这些数据了。

navList 标签的基本使用方式非常直观。您需要使用 {% navList 变量名称 %}...{% endnavList %} 结构，其中 变量名称 可以是任何您想定义的变量名，例如 navs。这个变量将承载后台配置的导航数据，然后您可以通过 for 循环遍历这些数据，将其呈现在页面上。

例如，最简单的两级导航构建代码框架如下：

{% navList navs %}
<ul class="main-nav">
    {# 遍历所有一级导航项 #}
    {%- for item in navs %}
        <li class="nav-item {% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
            {# 判断当前一级导航项是否有子导航（NavList 属性） #}
            {%- if item.NavList %}
            <ul class="sub-nav">
                {# 遍历所有二级导航项 #}
                {%- for inner in item.NavList %}
                    <li class="sub-nav-item {% if inner.IsCurrent %}active{% endif %}">
                        <a href="{{ inner.Link }}">{{inner.Title}}</a>
                    </li>
                {% endfor %}
            </ul>
            {% endif %}
        </li>
    {% endfor %}
</ul>
{% endnavList %}

在上面的代码中，navs 变量包含了所有一级导航项的数据。每一个 item 对象代表一个导航链接，它拥有 Title（显示名称）、Link（链接地址）、IsCurrent（是否是当前页面链接）等属性。

实现多级导航的关键在于 item.NavList 属性。如果一个导航项包含二级子菜单，那么 item.NavList 本身就是一个列表，您可以在第一个 for 循环内部，再次使用 {%- if item.NavList %} 进行判断，并嵌套一个 {%- for inner in item.NavList %} 循环来遍历并显示二级子菜单项。inner 对象也同样拥有 Title、Link 等属性。

此外，您还可以通过 navList 的参数来调用特定的导航类别。例如，如果您在后台创建了一个 typeId 为 2 的“页脚导航”，您可以通过 {% navList navs with typeId=2 %}...{% endnavList %} 来调用并显示它。

丰富导航内容：结合其他标签

导航菜单不仅仅是简单的文字链接，有时我们还需要在下拉菜单中展示更多动态内容，比如某个分类下的最新产品、热门文章或其子分类列表。安企CMS 的 navList 标签结合 archiveList 和 categoryList 等内容标签，可以实现这一高级功能。

1. 在下拉菜单中展示产品或文章： 假设您的某个导航项（例如“产品中心”）下有一个二级菜单“电子产品”，您希望在鼠标悬停到“电子产品”时，显示该分类下的热门产品列表。您可以在二级导航的 for 循环内部，根据 inner.PageId（该二级导航链接对应的分类ID），使用 archiveList 标签来获取并显示产品。

<ul class="main-nav">
    {% 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>
                {# 如果二级菜单链接到分类，则通过 PageId 获取该分类下的产品列表 #}
                {% archiveList products with type="list" categoryId=inner.PageId limit="8" %}
                {% if products %} {# 如果有产品数据 #}
                <ul class="nav-menu-child-child">
                    {% for productItem in products %}
                    <li><a href="{{productItem.Link}}">{{productItem.Title}}</a></li>
                    {% endfor %}
                </ul>
                {% endif %}
                {% endarchiveList %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>

这里，productItem 变量会承载每个产品的详细信息，包括 Link 和 Title。

2. 在导航下拉菜单中展示子分类： 类似地，如果您的导航项指向一个分类，并且该分类下还有更深层次的子分类，您可以利用 categoryList 标签在导航下拉菜单中动态地显示这些子分类。

<ul class="main-nav">
    {% 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>
                {# 如果二级菜单链接到分类，则通过 PageId 获取其子分类列表 #}
                {% if inner.PageId > 0 %} {# 确保链接到的是一个分类或页面 #}
                    {% categoryList categories with parentId=inner.PageId %}
                    {% if categories %} {# 如果有子分类数据 #}
                    <ul class="nav-menu-child-child">
                        {% for subCategoryItem in categories %}
                        <li>
                            <a href="{{ subCategoryItem.Link }}">{{subCategoryItem.Title}}</a>
                        </li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                    {% endcategoryList %}
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>

通过这种方式，导航菜单不仅提供了路径，更成为了内容的入口，极大地提升了网站的可用性和用户体验。

使用建议与小贴士

• 规划先行： 在后台设置导航前，建议您先在纸上或思维导图上规划好导航的层级和内容，确保逻辑清晰。
• 简洁明了： 导航的“显示名称”应尽量简洁明了，让用户一眼就能理解其指向的内容。
• 响应式设计： 虽然 navList 标签只负责数据输出，但作为模板制作者，您需要确保前端 CSS 和 JavaScript 能够妥善处理多级导航在不同设备（特别是移动设备）上的显示效果，保证良好的用户体验。
• 定期审查： 网站内容会不断更新，导航也应定期审查，确保所有链接依然有效，并且结构仍然符合用户的需求和网站的最新内容。

通过 navList 标签的灵活运用，结合后台强大的导航管理功能，您可以在 AnqiCMS 轻松构建出功能丰富、用户友好的多级网站导航，为您的访客提供出色的浏览体验。

常见问题 (FAQ)

1. navList 标签是否支持三级或更多层级的导航菜单？ navList 标签在设计上原生支持最多