AnQiCMS的导航列表标签如何构建多级下拉菜单并显示？

网站导航作为用户探索网站内容的核心入口，其结构设计直接影响着用户体验和信息获取效率。特别是多级下拉菜单，它能够有效地组织大量信息，使网站结构更清晰、更具层次感。在安企CMS中，构建并显示这样的多级导航系统，过程既灵活又直观。

要成功搭建多级下拉菜单，我们需要将后台的导航配置与前端模板的标签调用相结合。

第一步：理解安企CMS导航列表的数据结构与后台配置

在安企CMS中，构建多级下拉菜单首先要从后台的导航设置入手。进入后台的后台设置 -> 网站导航设置页面，您会看到导航类别管理和导航链接设置两个核心区域。

1. 导航类别管理： 系统默认提供一个“默认导航”类别，您可以根据实际需求，如“主导航”、“页脚导航”或“侧边栏导航”，通过自定义导航类别来创建新的导航组。这样做的好处是，可以针对网站不同区域的导航，进行独立的管理和调用。

2. 导航链接设置： 这是创建具体导航菜单项的地方。每个导航链接都承载着具体的信息，例如显示的名称、链接地址等。

• 显示名称与子标题名称/导航描述： 这些字段允许您为导航项设置友好的显示文本，甚至可以添加辅助性的子标题或描述，以提供更丰富的信息。
• 链接类型： 安企CMS支持多种链接类型，包括指向站内核心页面的内置链接（如首页、模型首页）、指向特定分类页面链接（文章分类、产品分类或单页面），以及完全自定义的外部链接。这极大地增加了导航的灵活性。
• 上级导航： 这是实现多级菜单的关键所在。当你需要创建一个二级菜单项时，只需将其上级导航设置为对应的一级菜单即可。例如，您创建了一个名为“产品中心”的一级导航，然后可以创建“产品A”、“产品B”等二级导航，并将它们的上级导航都指定为“产品中心”。
• 显示顺序： 通过调整显示顺序的数字，您可以控制导航项在同一层级中的排列位置，数字越小越靠前。

需要注意的是，安企CMS目前原生支持最多两级的导航列表。这意味着您可以创建一级菜单和其下的二级菜单，但不支持三级或更多层级的嵌套。

第二步：掌握导航列表标签 navList 的使用

当后台导航结构配置完毕后，接下来就是在前端模板中通过navList标签将其展现出来。navList标签是安企CMS提供的一个强大工具，用于获取并循环输出后台配置的导航数据。

其基本使用方法如下：

{% navList navs %}
    {# 循环输出一级导航项 #}
    {%- for item in navs %}
        <li class="{% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
            {# 判断是否存在二级导航，并循环输出 #}
            {%- if item.NavList %}
            <dl>
                {%- for inner in item.NavList %}
                    <dd class="{% if inner.IsCurrent %}active{% endif %}">
                        <a href="{{ inner.Link }}">{{inner.Title}}</a>
                    </dd>
                {% endfor %}
            </dl>
            {% endif %}
        </li>
    {% endfor %}
{% endnavList %}

在这段代码中：

• {% navList navs %} 声明了将获取到的导航数据赋值给名为navs的变量。
• {%- for item in navs %} 用于遍历所有的一级导航项。item变量代表当前的一级导航对象。
  • item.Title：显示导航项的名称。
  • item.Link：导航项的链接地址。
  • item.IsCurrent：一个布尔值，表示当前导航项是否为当前页面的链接，常用于添加active类以高亮显示。
• {%- if item.NavList %} 是判断当前一级导航项是否包含子菜单的关键。如果item.NavList存在，则表示有二级导航。
• {%- for inner in item.NavList %} 用于遍历当前一级导航项下的所有二级导航。inner变量代表当前的二级导航对象，它也拥有Title、Link、IsCurrent等属性。

如果您在后台创建了多个导航类别，可以通过typeId参数来指定调用某个特定的导航组，例如：{% navList navs with typeId=2 %}。

第三步：实战案例与高级应用

为了更好地展示navList标签的灵活性，以下提供几个实战案例，帮助您构建不同形式的多级下拉菜单。

案例一：构建一个简单的两级标准下拉菜单

这种菜单通常用于网站顶部，当鼠标悬停在一级菜单上时，其下的二级菜单会展开。

<nav class="main-nav">
    <ul class="nav-list">
        {% navList navs with typeId=1 %} {# 假设typeId=1是主导航 #}
        {%- for item in navs %}
            <li class="nav-item {% if item.NavList %}has-dropdown{% endif %} {% if item.IsCurrent %}active{% endif %}">
                <a href="{{ item.Link }}">{{item.Title}}</a>
                {%- if item.NavList %}
                <ul class="dropdown-menu">
                    {%- for inner in item.NavList %}
                        <li class="dropdown-item {% if inner.IsCurrent %}active{% endif %}">
                            <a href="{{ inner.Link }}">{{inner.Title}}</a>
                        </li>
                    {% endfor %}
                </ul>
                {% endif %}
            </li>
        {% endfor %}
        {% endnavList %}
    </ul>
</nav>

这个结构需要配合CSS来控制下拉菜单的显示/隐藏（例如使用:hover），以及JavaScript来实现更复杂的交互效果。

案例二：导航下拉菜单中显示分类下的文档列表

在某些场景下，您可能希望二级菜单不仅仅是链接，而是直接展示某个分类下的最新文章或产品。这可以通过在navList内部结合archiveList标签来实现。

<nav class="main-nav">
    <ul class="nav-list">
        {% navList navs with typeId=1 %}
        {%- for item in navs %}
            <li class="nav-item {% if item.NavList %}has-dropdown{% endif %} {% if item.IsCurrent %}active{% endif %}">
                <a href="{{ item.Link }}">{{item.Title}}</a>
                {%- if item.NavList %}
                <ul class="dropdown-menu">
                    {%- for inner in item.NavList %}
                        <li class="dropdown-item">
                            <a href="{{ inner.Link }}">{{inner.Title}}</a>
                            {# 如果二级导航是分类页面，且存在对应的PageId，则可以调用该分类下的文档 #}
                            {% if inner.PageId > 0 %}
                                {% archiveList products with type="list" categoryId=inner.PageId limit="5" %}
                                {% if products %}
                                <ul class="category-products">
                                    {% 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>
</nav>

这里，inner.PageId是关键，它会获取二级导航所关联的分类或单页的ID。我们利用这个ID在archiveList中筛选出对应分类下的文章或产品。

案例三：导航下拉菜单中显示下级分类列表

如果您希望二级菜单显示的是某个一级分类下的所有子分类，而不是具体的文档，可以结合categoryList标签。

”`