在网站运营中，清晰且易于导航的菜单结构是提升用户体验和搜索引擎友好度的核心要素。对于拥有大量内容或多种产品线的网站而言，构建一个多层级、可嵌套的分类导航菜单显得尤为重要。安企CMS（AnQiCMS）提供了强大的模板标签功能，其中 categoryList 标签正是实现这一目标的关键。

本文将深入探讨如何利用 categoryList 标签，灵活地构建并展示您的多层级分类导航菜单。

认识 categoryList 标签及其基本用法

categoryList 标签在安企CMS模板中扮演着获取分类列表数据的角色。它能帮助我们检索文章、产品等不同内容模型下的分类信息。

在使用时，它的基本结构如下：

{% categoryList categories with moduleId="1" parentId="0" %}
    {# 在这里循环输出分类数据 #}
{% endcategoryList %}

在这个例子中：

  • categories 是我们为获取到的分类列表数据定义的一个变量名，您可以根据自己的习惯命名。
  • moduleId 参数至关重要，它指定了您希望获取哪个内容模型下的分类。例如，"1" 通常代表文章模型，"2" 则可能代表产品模型。在安企CMS的后台，每个分类都归属于特定的内容模型，因此这个参数是必须的，它确保您能获取到正确类型的内容分类。
  • parentId 参数用于指定上级分类的ID。当您设置为 "0" 时，意味着您希望获取所有顶级分类。这是构建多层级菜单的起点。

categoryList 标签在 {% categoryList %} 和 {% endcategoryList %} 之间使用 for 循环来遍历获取到的每一个分类项。每个分类项 item 提供了丰富的字段信息，例如：

  • item.Id：分类的唯一ID。
  • item.Title：分类的显示名称。
  • item.Link：分类页面的URL链接。
  • item.Description：分类的简介或描述。
  • item.ParentId：上级分类的ID，对于顶级分类而言，这个值通常是 0。
  • item.HasChildren：一个布尔值，表示当前分类是否拥有子分类。这个字段是实现多层级嵌套的关键。
  • item.IsCurrent：一个布尔值，表示当前分类是否是当前页面所在的分类，可用于高亮显示。
  • item.Spacer：如果存在，会为子分类添加一个视觉上的前缀（例如缩进符号）。

通过灵活运用这些字段，我们就能设计出各种复杂的导航菜单。

构建两层级分类导航菜单

首先，我们从网站的顶级分类开始构建导航。假设我们要为 moduleId 为 "1" 的文章模型构建一个两层级菜单。

<nav class="main-navigation">
    <ul class="top-level-menu">
        {% categoryList categories with moduleId="1" parentId="0" %}
            {% for item in categories %}
                <li class="menu-item {% if item.HasChildren %}has-submenu{% endif %} {% if item.IsCurrent %}active{% endif %}">
                    <a href="{{ item.Link }}">{{ item.Title }}</a>
                    {% if item.HasChildren %}
                        <ul class="sub-menu">
                            {% categoryList subCategories with parentId=item.Id %}
                                {% for subItem in subCategories %}
                                    <li class="menu-item {% if subItem.IsCurrent %}active{% endif %}">
                                        <a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
                                    </li>
                                {% endfor %}
                            {% endcategoryList %}
                        </ul>
                    {% endif %}
                </li>
            {% endfor %}
        {% endcategoryList %}
    </ul>
</nav>

在这个示例中，我们首先使用 parentId="0" 获取所有顶级分类。在遍历每个顶级分类时，我们利用 item.HasChildren 判断它是否有子分类。如果存在子分类，我们就在当前 <li> 标签内部再次调用 categoryList 标签，但这次将 parentId 设置为 item.Id，即当前顶级分类的ID，从而获取其下属的子分类。这样就轻松构建出了一个两层级的导航菜单。

实现三层及更多层级的嵌套导航

构建三层或更多层级的导航，其核心思想是重复嵌套 categoryList 标签，每次都将 parentId 设置为上一层级的 item.Id。这个过程可以根据您的需求无限延伸。

以下是一个三层级嵌套导航的实现范例：

<nav class="main-navigation">
    <ul class="level-1-menu">
        {% categoryList categories with moduleId="1" parentId="0" %}
            {% for item in categories %}
                <li class="menu-item {% if item.HasChildren %}has-submenu{% endif %} {% if item.IsCurrent %}active{% endif %}">
                    <a href="{{ item.Link }}">{{ item.Title }}</a>
                    {% if item.HasChildren %}
                        <ul class="level-2-menu">
                            {% categoryList subCategories with parentId=item.Id %}
                                {% for inner1 in subCategories %}
                                    <li class="menu-item {% if inner1.HasChildren %}has-submenu{% endif %} {% if inner1.IsCurrent %}active{% endif %}">
                                        <a href="{{ inner1.Link }}">{{ inner1.Title }}</a>
                                        {% if inner1.HasChildren %}
                                            <ul class="level-3-menu">
                                                {% categoryList subCategories2 with parentId=inner1.Id %}
                                                    {% for inner2 in subCategories2 %}
                                                        <li class="menu-item {% if inner2.IsCurrent %}active{% endif %}">
                                                            <a href="{{ inner2.Link }}">{{ inner2.Title }}</a>
                                                        </li>
                                                    {% endfor %}
                                                {% endcategoryList %}
                                            </ul>
                                        {% endif %}
                                    </li>
                                {% endfor %}
                            {% endcategoryList %}
                        </ul>
                    {% endif %}
                </li>
            {% endfor %}
        {% endcategoryList %}
    </ul>
</nav>

在这个例子中，我们在第二层循环 inner1 中，再次判断 inner1.HasChildren。如果为真，则再次调用 categoryList，将 parentId 设置为 inner1.Id 来获取第三层分类 inner2。这种模式可以继续延伸，以构建更深层次的导航结构。

实战提示与建议

在构建多层级分类导航时，除了标签的正确使用，还有一些实用的考量：

  • 后台分类管理是基础：所有分类的层级关系必须在安企CMS后台的“内容管理” -> “文档分类”中正确设置。确保您在添加子分类时，正确选择了其“上级分类”。只有后台数据结构清晰，前端标签才能准确调用。
  • 样式控制不可或缺：categoryList 标签主要负责输出HTML结构，而导航菜单的视觉效果（如悬停下拉、展开收起动画、高亮显示等）则完全依赖于您的CSS和JavaScript代码。合理设计菜单样式，可以显著提升用户体验。
  • 当前状态的标记：利用 item.IsCurrent 变量，您可以轻松地为当前用户正在访问的分类及其所有父级分类添加特定的CSS类（例如 active），从而在视觉上强调用户所在的位置。
  • 避免过度嵌套：尽管 categoryList 支持深层嵌套，但从用户体验角度出发，过深的导航层级往往会降低网站的可用性。通常建议将导航深度控制在三到四层以内。
  • 灵活运用 limit 参数：如果您只想在某个层级显示部分分类，可以使用 limit="数量" 参数进行控制。

通过对 categoryList 标签的深入理解和灵活应用，您将能够为安企CMS网站构建出任何复杂度的、用户友好的多层级分类导航菜单，从而更好地组织内容，引导用户，并优化搜索引擎的抓取。

常见问题解答 (FAQ)

Q1: 我的多级菜单在页面上只显示了顶级分类，子分类没有出现，这是为什么？ A1: 首先，请检查您的安企CMS后台“文档分类”中，是否为顶级分类正确设置了子分类，并确保子分类的上级分类指向了正确的顶级分类ID。其次，在模板代码中，确认您是否在顶级分类的循环中使用了 {% if item.HasChildren %} 来判断并嵌套了第二个 categoryList 标签，并且第二个 categoryList 的 parentId 参数是否正确指向了 item.Id。

Q2: 如何让当前用户所在的分类在导航菜单中高亮显示？ A2: categoryList 标签的每个 item 都包含一个 IsCurrent 的布尔值变量。当 item.IsCurrent 为 true 时，表示当前分类是用户正在访问的页面所对应的分类。您可以在 <li> 或 <a> 标签中添加一个条件判断，例如 {% if item.IsCurrent %}active{% endif %}，然后通过CSS为 active 类添加高亮样式。

**Q3: moduleId 参数的作用是什么？如果我不想