在使用AnQiCMS构建网站时,清晰地组织内容并便捷地在页面上展示是提升用户体验的关键。特别是对于拥有多级分类结构的内容,如何在模板中灵活地展示指定分类下的子分类列表,是许多用户会遇到的需求。AnQiCMS强大的模板标签体系,尤其是categoryList标签,为我们提供了优雅且高效的解决方案。
理解AnQiCMS的分类结构
在深入模板之前,首先要了解AnQiCMS如何管理分类。在AnQiCMS中,每个分类都隶属于一个特定的内容模型(例如文章模型、产品模型等),并且分类之间可以建立清晰的父子关系,形成多级嵌套的树状结构。这意味着一个分类可以有自己的子分类,这些子分类又可以拥有更下一级的子分类,以此类推。这种结构为我们展示指定分类下的子分类提供了基础。
核心工具:categoryList标签详解
要在AnQiCMS模板中展示分类列表,我们主要会用到一个功能强大的标签:categoryList。这个标签允许我们根据多种条件获取分类数据,并以列表的形式在页面上呈现。
categoryList标签的常见用法是这样的:
{% categoryList categories with moduleId="1" parentId="0" %} ... {% endcategoryList %}
让我们来解析其中几个关键参数:
moduleId:这是非常重要的一个参数。由于AnQiCMS的分类是绑定内容模型的,所以当我们想要获取任何分类列表时,都需要指定它所属的内容模型ID。例如,moduleId="1"可能代表文章模型,而moduleId="2"可能代表产品模型。您可以根据后台内容模型设置找到对应的ID。parentId:这个参数是控制我们获取哪个层级分类的关键。- 当设置为
parentId="0"时,标签会获取指定moduleId下的所有顶级分类。 - 当设置为一个具体的分类ID时(例如
parentId="123"),它会获取ID为123的分类下的所有直接子分类。 - 如果您在分类列表页,希望获取当前分类的同级分类(兄弟分类),可以使用
parentId="parent"。
- 当设置为
categoryList标签内部通常会配合一个for循环来遍历获取到的分类数据。在循环中,每个分类对象(在我们的例子中是item)都包含了一些有用的属性,例如:
item.Id:分类的唯一ID。item.Title:分类的名称。item.Link:分类的访问链接。item.Description:分类的描述。item.ParentId:父级分类的ID。item.HasChildren:一个布尔值,表示该分类是否有子分类,这在构建多级菜单时非常有用。item.IsCurrent:一个布尔值,表示当前循环的分类是否是当前页面所在的分类,可用于高亮显示。
实战演练:展示指定分类下的子分类列表
现在,我们来通过一个具体的例子,看看如何在模板中展示指定分类的子分类列表。假设我们希望展示文章模型(moduleId="1")下所有顶级分类及其第二级子分类。
首先,我们获取所有顶级分类:
{# 获取文章模型下所有顶级分类 #}
{% categoryList topCategories with moduleId="1" parentId="0" %}
<nav class="main-category-nav">
<ul>
{% for category in topCategories %}
<li class="{% if category.IsCurrent %}active{% endif %}">
<a href="{{ category.Link }}">{{ category.Title }}</a>
{# 检查当前分类是否有子分类 #}
{% if category.HasChildren %}
<ul class="sub-category-list">
{# 获取当前顶级分类的直接子分类 #}
{% categoryList subCategories with parentId=category.Id %}
{% for subCategory in subCategories %}
<li class="{% if subCategory.IsCurrent %}active{% endif %}">
<a href="{{ subCategory.Link }}">{{ subCategory.Title }}</a>
</li>
{% endfor %}
{% endcategoryList %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
{% endcategoryList %}
在上面的代码片段中,我们首先使用categoryList标签获取了文章模型下的所有顶级分类,并将它们命名为topCategories。随后,我们使用for循环遍历这些顶级分类,为每个分类生成一个链接。
关键之处在于{% if category.HasChildren %}这个判断。它允许我们只在当前分类确实拥有子分类时,才渲染下一级的<ul>列表。在内部的categoryList标签中,我们将parentId参数设置为当前顶级分类的category.Id,这样就能精确地获取到该顶级分类下的所有直接子分类。同样,我们再次遍历这些子分类,并为其生成链接。
通过这种嵌套的categoryList标签和for循环的组合,我们就能灵活地在AnQiCMS模板中展示任意层级的子分类列表。
一些实用技巧和考量
- 多级嵌套的实现:如果您的分类结构超过两级,您只需在子分类的
for循环内部再次嵌套if subCategory.HasChildren判断和categoryList标签,并将parentId设置为subCategory.Id,即可实现多级深度的子分类展示。 - 列表限制:如果子分类数量过多,您可以使用
limit参数来限制每个层级显示的分类数量,例如limit="10"。您甚至可以使用limit="2,10"来指定从第2个分类开始获取10个分类,这在某些展示场景下非常实用。 - 性能优化:尽管AnQiCMS的标签解析效率很高,但在复杂的模板中过度嵌套或无限制地获取大量数据仍可能影响页面加载速度。合理利用
limit参数和item.HasChildren进行按需加载,可以有效提升性能。 - 样式与布局:上述代码只展示了基础的HTML结构,您需要结合CSS来美化和布局这些分类列表,使其符合网站的整体设计风格。
- 当前页面高亮:
item.IsCurrent属性可以帮助您识别当前访问页面所属的分类,从而为它添加特定的CSS类(例如active),在视觉上高亮显示。
AnQiCMS的模板系统提供了足够的灵活性,让您可以根据实际需求,轻松构建出各种复杂的分类导航和内容展示结构。只要熟悉了categoryList标签及其参数,展示指定分类下的子分类列表将变得非常简单。
常见问题 (FAQ)
Q1:如何只显示没有子分类的分类(即末级分类)的列表?
A1:您可以在categoryList的for循环内部,使用if not item.HasChildren这个条件判断来筛选出那些没有子分类的分类。这样,只有末级分类才会显示。
{% categoryList categories with moduleId="1" parentId="0" %}
<ul>
{% for category in categories %}
{% if not category.HasChildren %} {# 只显示没有子分类的分类 #}
<li><a href="{{ category.Link }}">{{ category.Title }}</a></li>
{% endif %}
{% endfor %}
</ul>
{% endcategoryList %}
Q2:如果我想获取某个内容模型下的所有分类,无论它们是顶级还是子级,该怎么做?
A2:您可以使用categoryList标签的all="true"参数。结合moduleId,它会获取指定模型下的所有分类。在循环中,item.Spacer属性可以帮助您显示分类的层级关系,例如在子分类名称前添加缩进。
{% categoryList allModelCategories with moduleId="1" all="true" %}
<ul>
{% for category in allModelCategories %}
<li><a href="{{ category.Link }}">{{ category.Spacer|safe }}{{ category.Title }}</a></li>
{% endfor %}
</ul>
{% endcategoryList %}
Q3:我当前正在浏览一个分类页面,如何只显示这个分类下的直接子分类?
A3:当您在分类页面时,categoryList标签在不指定parentId的情况下,会自动获取当前分类的直接子分类。所以,您只需像下面这样使用即可:
{# 假设当前页面是某个分类详情页,会自动识别其ID #}
{% categoryList directSubCategories %}
{% if directSubCategories %} {# 只有当存在子分类时才显示 #}
<ul class="current-category-sub-list">
{% for subCategory in directSubCategories %}
<li class="{% if subCategory.IsCurrent %}active{% endif %}">
<a href="{{ subCategory.Link }}">{{ subCategory.Title }}</a>
</li>
{% endfor %}
</ul>
{% else %}
<p>当前分类没有直接子分类。</p>
{% endif %}
{% endcategoryList %}