如何在AnQiCMS模板中实现多级分类的嵌套列表显示？
网站的导航结构是用户体验的核心，清晰、有组织的多级分类列表不仅能帮助用户快速找到所需内容，还能有效提升网站的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 的文章模型，并为其设置了多级分类。
获取顶级分类（一级分类）
我们首先使用
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 %}嵌套循环子分类（二级分类）
在顶级分类的循环内部，我们通过判断
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 %}进一步嵌套（三级分类及更多）
延续第二步的逻辑，在二级分类的循环内部，我们再次判断
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让您能够灵活地构建出既符合内容逻辑又美观的用户界面，从而提升网站的整体导航体验和内容可发现性。