在构建网站分类时，我们常常需要展示清晰、有层次感的结构，让用户能够直观地理解网站内容的归属。安企CMS（AnQiCMS）提供了强大的模板标签功能，完全支持在分类列表中实现多级嵌套的树状结构显示，帮助您轻松打造用户友好的导航系统。

实现这种效果的核心在于巧妙地运用安企CMS的categoryList模板标签及其内建的层级判断功能。通过在模板中循环调用，您可以根据分类的父子关系，动态地渲染出美观的树状结构。

理解安企CMS的分类体系

在安企CMS的后台，内容管理下的“文档分类”功能允许我们创建和管理网站的所有分类。每个分类都可以指定一个“上级分类”，从而自然地构建出层级关系。这种层级关系是实现树状结构显示的基础。例如，您可以创建一个顶级分类“产品”，然后在它下面创建子分类“手机”、“电脑”，再在“手机”下创建“安卓手机”、“苹果手机”等。

为了在前端模板中展示这些分类层级，我们将主要依赖categoryList模板标签。这个标签能够获取指定条件下的分类列表，并且为每个分类项提供了丰富的属性，其中ParentId（上级分类ID）和HasChildren（是否有子分类）是构建嵌套结构的关键。

分步实现多级嵌套树状结构

实现多级嵌套的树状结构，通常需要通过递归或者多层循环的方式来构建。这里，我们将采用多层循环嵌套的方法，逐步展示如何实现。

第一步：后台分类设置

首先，请确保您的安企CMS后台已经创建了具有父子关系的分类。在“内容管理”->“文档分类”中添加或编辑分类时，通过“上级分类”选项来设定它们的层级关系，并为它们选择合适的“文档模型”。例如：

  • 顶级分类： 电子产品 (ParentId: 0)
    • 二级分类： 手机 (ParentId: 电子产品ID)
      • 三级分类： 安卓手机 (ParentId: 手机ID)
      • 三级分类： 苹果手机 (ParentId: 手机ID)
    • 二级分类： 电脑 (ParentId: 电子产品ID)
      • 三级分类： 笔记本 (ParentId: 电脑ID)
      • 三级分类： 台式机 (ParentId: 电脑ID)

第二步：模板代码编写

接下来，在您的前端模板文件中（例如list.html或任何需要显示分类导航的页面），您可以按照以下结构编写代码：

我们首先调用categoryList标签来获取顶级分类列表。为了获取顶级分类，我们将moduleId指定为您的内容模型ID（例如，文章模型通常是1，产品模型通常是2），并将parentId参数设置为"0"。

在循环遍历这些顶级分类时，我们检查每个分类项是否拥有子分类。这可以通过使用item.HasChildren属性来判断。如果HasChildren为真，表示当前分类下还有子分类，我们就可以在其内部再次调用categoryList标签来获取并渲染这些子分类。为了获取正确的子分类，这次categoryList的parentId参数需要设置为当前父分类的item.Id。这个模式可以根据您的分类深度需求，持续嵌套下去。

此外，item.Spacer属性可以帮助您在视觉上为不同层级的分类添加缩进，使其看起来更像一棵树。请注意，Spacer的值通常包含HTML实体，所以在使用时需要配合|safe过滤器，以确保正确解析。

以下是一个三级分类嵌套的代码示例，您可以根据实际需求调整嵌套层级：

{% categoryList categories with moduleId="1" parentId="0" %} {# 获取顶级分类，moduleId根据实际内容模型ID填写 #}
{# 一级分类开始 #}
<ul>
    {% for item in categories %}
    <li>
        <a href="{{ item.Link }}">
            {{ item.Spacer|safe }}{{ item.Title }} {# 使用Spacer进行缩进，并显示分类名称 #}
        </a>
        {# 判断是否有二级分类 #}
        {% if item.HasChildren %}
            {% categoryList subCategories with parentId=item.Id %} {# 获取当前一级分类的子分类 #}
            {# 二级分类开始 #}
            <ul>
                {% for inner1 in subCategories %}
                <li>
                    <a href="{{ inner1.Link }}">
                        {{ inner1.Spacer|safe }}{{ inner1.Title }} {# 使用Spacer进行缩进 #}
                    </a>
                    {# 判断是否有三级分类 #}
                    {% if inner1.HasChildren %}
                        {% categoryList subCategories2 with parentId=inner1.Id %} {# 获取当前二级分类的子分类 #}
                        {# 三级分类开始 #}
                        <ul>
                            {% for inner2 in subCategories2 %}
                            <li>
                                <a href="{{ inner2.Link }}">
                                    {{ inner2.Spacer|safe }}{{ inner2.Title }} {# 使用Spacer进行缩进 #}
                                </a>
                            </li>
                            {% endfor %}
                        </ul>
                        {# 三级分类结束 #}
                        {% endcategoryList %}
                    {% endif %}
                </li>
                {% endfor %}
            </ul>
            {# 二级分类结束 #}
            {% endcategoryList %}
        {% endif %}
    </li>
    {% endfor %}
</ul>
{# 一级分类结束 #}
{% endcategoryList %}

在这段代码中，item.Link会输出分类的访问链接，item.Title则是分类的名称。通过多层<ul>和<li>标签，结合item.Spacer的缩进，一个清晰的树状分类结构就得以呈现。

优化与拓展建议

  • CSS样式美化： 上述代码仅提供了基本的HTML结构。您可以通过编写CSS样式，为不同层级的<ul>和<li>添加不同的边距、背景色、字体大小等，使树状结构在视觉上更加美观和易读。例如，您可以利用CSS选择器ul ul来针对嵌套的列表进行样式调整。
  • 交互式折叠菜单： 如果分类层级较深，一次性全部展开可能会导致页面冗长。您可以结合JavaScript（如jQuery或其他框架），为分类列表添加折叠/展开功能。当用户点击父分类时，其子分类可以动态显示或隐藏，提升用户体验。
  • 性能考量： 对于分类数量巨大且层级很深的网站，过多的嵌套循环可能会对页面加载速度产生轻微影响。在大多数情况下，安企CMS的性能足以应对。但如果遇到极端情况，可以考虑是否需要对分类的显示数量或深度进行适当限制。

通过上述方法，您就可以在安企CMS的分类列表中实现多级嵌套的树状结构显示，为您的网站访客提供更加清晰、便捷的导航体验。

常见问题 (FAQ)

1. 为什么我的分类没有显示出层级关系，都是平铺的？ 这通常是因为您在后台设置分类时，没有正确指定“上级分类”，导致所有分类都被识别为顶级分类。请检查“内容管理”->“文档分类”中每个分类的“上级分类”字段是否已按预期配置。此外，确保模板中categoryList标签的parentId参数设置正确，例如，获取顶级分类应设置为parentId="0"，获取子分类时应设置为父分类的item.Id。

2. item.Spacer|safe 中的 |safe 是什么作用，可以去掉吗？ |safe是一个过滤器，它的作用是告诉模板引擎，item.Spacer变量中的内容是安全的HTML，不需要进行转义。item.Spacer通常包含用于缩进的HTML实体（如），如果去掉|safe，这些HTML实体可能会被直接显示为文本，而不是被浏览器解析为缩进效果，从而破坏视觉上的层级感。因此，不建议去掉|safe。

3. 如何限制分类树的显示深度，例如只显示两级分类？ 要限制显示深度，您可以在模板代码中控制循环的层数。例如，在上述代码中，如果您只想显示到二级分类，只需删除或注释掉第三层categoryList subCategories2及其内部的循环即可。通过修改模板中的条件判断和循环结构，您可以灵活地控制分类树的显示深度。