网站的导航结构是用户体验的核心，清晰、有组织的多级分类列表不仅能帮助用户快速找到所需内容，还能有效提升网站的SEO表现。在AnQiCMS中，借助其灵活的模板标签系统，实现多级分类的嵌套列表显示变得直观而高效。

理解AnQiCMS的分类结构

在AnQiCMS的后台管理界面，您会发现分类功能允许创建具有层级关系的分类。这意味着您可以为文章、产品或其他内容模型设置主分类（顶级分类）以及其下的子分类，形成一个树状结构。例如，一个“产品”模型下可以有“电子产品”作为顶级分类，“手机”、“电脑”作为二级分类，而“手机”下又可以有“安卓手机”、“苹果手机”等三级分类。这种结构在模板中通过 parentId 这样的参数来关联和展示。

核心：categoryList 标签

实现多级分类嵌套列表的关键在于AnQiCMS提供的 categoryList 模板标签。这个标签专门用于获取和显示分类信息，并且支持通过 parentId 参数来控制获取指定父分类下的子分类。结合模板引擎的 for 循环和条件判断，我们可以轻松地构建出任意深度的分类嵌套列表。

在使用 categoryList 标签时，您需要关注几个重要的参数：

  • moduleId: 指定您想要获取哪个内容模型下的分类。例如，如果您的文章分类隶属于ID为1的文章模型，产品分类隶属于ID为2的产品模型，您就需要在这里指明。
  • parentId: 这是实现多级分类的核心。
    • 当设置为 "0" 时，它将获取所有顶级分类。
    • 当设置为一个具体分类的ID时（例如 parentId=item.Id），它将获取该ID分类下的所有子分类。
  • HasChildren: 在循环获取到的每个分类对象中，有一个 HasChildren 属性，它是一个布尔值（true/false），用于判断当前分类是否拥有子分类。这对于决定是否需要继续进行下一级嵌套非常有用。

分步实现多级分类的嵌套列表显示

下面，我们将通过一个具体的例子来演示如何在AnQiCMS模板中实现三级分类的嵌套显示。这个逻辑可以扩展到更多层级，只需重复相同的模式即可。

首先，假设我们有一个内容模型ID为 1 的文章模型，并为其设置了多级分类。

  1. 获取顶级分类（一级分类）

    我们首先使用 parentId="0" 来获取所有顶级分类。

    {% categoryList categories with moduleId="1" parentId="0" %}
    {# 顶级分类列表开始 #}
    <ul>
        {% for item in categories %}
        <li>
            <a href="{{ item.Link }}">{{item.Title}}</a>
            {# ... 这里将嵌套获取子分类 ... #}
        </li>
        {% endfor %}
    </ul>
    {# 顶级分类列表结束 #}
{% endcategoryList %}

  2. 嵌套循环子分类（二级分类）

    在顶级分类的循环内部，我们通过判断 item.HasChildren 来决定是否需要获取其子分类。如果 item.HasChildren 为 true，则再次调用 categoryList 标签，并将当前 item.Id 作为 parentId 传入，以获取二级分类。

    {% categoryList categories with moduleId="1" parentId="0" %}
    <ul>
        {% for item in categories %}
        <li>
            <a href="{{ item.Link }}">{{item.Title}}</a>
            {% if item.HasChildren %} {# 判断是否有子分类 #}
            <div>
                {% categoryList subCategories with parentId=item.Id %} {# 获取二级分类 #}
                <ul>
                    {% for inner1 in subCategories %}
                    <li>
                        <a href="{{ inner1.Link }}">{{inner1.Title}}</a>
                        {# ... 这里将嵌套获取三级分类 ... #}
                    </li>
                    {% endfor %}
                </ul>
                {% endcategoryList %}
            </div>
            {% endif %}
        </li>
        {% endfor %}
    </ul>
{% endcategoryList %}

  3. 进一步嵌套（三级分类及更多）

    延续第二步的逻辑，在二级分类的循环内部，我们再次判断 inner1.HasChildren，如果为 true，则继续调用 categoryList，将 inner1.Id 作为 parentId 传入，以获取三级分类。这个模式可以无限重复，以满足您所需的任何层级深度。

综合以上步骤，一个完整的AnQiCMS模板中实现三级分类嵌套列表的代码示例如下：

<nav class="main-navigation">
    {% categoryList categories with moduleId="1" parentId="0" %}
    {# 顶级分类（一级分类）列表 #}
    <ul>
        {% for item in categories %}
        <li class="category-level-1">
            <a href="{{ item.Link }}">{{item.Title}}</a>
            {% if item.HasChildren %} {# 如果当前分类有子分类 #}
            <div class="sub-menu-container">
                {% categoryList subCategories with parentId=item.Id %} {# 获取二级分类 #}
                {# 二级分类列表 #}
                <ul class="category-level-2">
                    {% for inner1 in subCategories %}
                    <li>
                        <a href="{{ inner1.Link }}">{{inner1.Title}}</a>
                        {% if inner1.HasChildren %} {# 如果二级分类有子分类 #}
                        <div class="sub-menu-container">
                            {% categoryList subCategories2 with parentId=inner1.Id %} {# 获取三级分类 #}
                            {# 三级分类列表 #}
                            <ul class="category-level-3">
                                {% for inner2 in subCategories2 %}
                                <li>
                                    <a href="{{ inner2.Link }}">{{inner2.Title}}</a>
                                </li>
                                {% endfor %}
                            </ul>
                            {% endcategoryList %}
                        </div>
                        {% endif %}
                    </li>
                    {% endfor %}
                </ul>
                {% endcategoryList %}
            </div>
            {% endif %}
        </li>
        {% endfor %}
    </ul>
    {% endcategoryList %}
</nav>

在上面的代码中，我们使用了 item、inner1、inner2 等变量名来区分不同层级的分类对象。您可以根据实际情况为 <ul> 或 <li> 标签添加 class 属性，以便通过CSS进行样式控制，例如 category-level-1, category-level-2, category-level-3 来区分不同层级的菜单项。

常用技巧与注意事项

  • 控制显示层级：如果您只想显示两级分类，只需删除上述代码中获取三级分类的部分即可。通过 item.HasChildren 的判断，您可以精确控制每个分类是否显示其子分类列表。
  • 空状态处理：在 for 循环中，可以使用 {% empty %} 标签来处理当列表为空时的情况，例如显示“暂无分类”等提示信息，以优化用户体验。
  • 当前活跃状态：AnQiCMS的分类对象（如 item、inner1）通常包含 IsCurrent 属性，用于判断当前分类是否为用户正在访问的分类。您可以利用 {% if item.IsCurrent %}active{% endif %} 这样的逻辑为当前活跃的分类添加特殊CSS样式，以突出显示。

通过这种结构化的方法，AnQiCMS让您能够灵活地构建出既符合内容逻辑又美观的用户界面，从而提升网站的整体导航体验和内容可发现性。