在构建网站时,清晰、有组织的内容结构是提升用户体验和SEO表现的关键。安企CMS(AnQiCMS)凭借其灵活的内容模型和强大的模板引擎,能够帮助我们轻松实现复杂的多级分类嵌套显示,并进行子分类判断,从而创建出高度定制化的导航和内容布局。
后端设置:构建分类层级
在安企CMS的后台,分类管理功能(通常位于“内容管理”下方的“文档分类”菜单)是实现多级分类的基础。
首先,我们会创建顶级分类。在添加新分类时,您需要选择一个“文档模型”(例如“文章模型”或“产品模型”),并确保“上级分类”选择为“顶级分类”。这定义了您网站内容的主干结构。
接着,为这些顶级分类创建子分类。在添加子分类时,您同样需要选择文档模型,但关键在于将“上级分类”指向其所属的父级分类。安企CMS允许您根据需要创建多层嵌套的分类,例如:公司新闻(一级)下可以有行业动态(二级),行业动态下又可以有国内新闻(三级)。系统会妥善管理这些层级关系,为前端展示做好数据准备。
模板中实现多级分类嵌套显示
安企CMS采用类似Django模板引擎的语法,让我们能够以直观的方式在模板文件中操作数据。要实现多级分类的嵌套显示,我们主要会用到 categoryList 标签,配合 for 循环和条件判断。
假设我们希望在网站导航栏或侧边栏中展示多级分类。首先,我们需要获取所有顶级分类。这可以通过 categoryList 标签并设置 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 %}
在上面的代码中,categories 是一个包含所有顶级分类的数组。for 循环会逐一遍历这些分类,item 变量代表当前循环到的分类对象。
为了展示子分类,我们可以在每个父级分类的 <li> 内部再次调用 categoryList 标签,并将父级分类的 Id 作为 parentId 传递给子分类的列表,从而获取其下属的子分类:
{% categoryList categories with moduleId="1" parentId="0" %}
<ul>
{% for item in categories %} {# 一级分类 #}
<li>
<a href="{{ item.Link }}">{{ item.Title }}</a>
<div>
{% categoryList subCategories with parentId=item.Id %}
<ul>
{% for inner1 in subCategories %} {# 二级分类 #}
<li>
<a href="{{ inner1.Link }}">{{ inner1.Title }}</a>
{# 继续嵌套以获取三级分类 #}
<div>
{% categoryList subCategories2 with parentId=inner1.Id %}
<ul>
{% for inner2 in subCategories2 %} {# 三级分类 #}
<li>
<a href="{{ inner2.Link }}">{{ inner2.Title }}</a>
</li>
{% endfor %}
</ul>
{% endcategoryList %}
</div>
</li>
{% endfor %}
</ul>
{% endcategoryList %}
</div>
</li>
{% endfor %}
</ul>
{% endcategoryList %}
这样的嵌套结构能够清晰地展示分类的层级关系。您可以根据实际需求,增加或减少嵌套的层级。
在模板中判断是否有子分类
在多级分类的显示中,我们常常希望只在某个分类确实拥有子分类时才渲染子菜单结构,否则可能只显示一个简单的链接。安企CMS为我们提供了 item.HasChildren 这个非常实用的布尔属性,可以直接在模板中进行判断。
item.HasChildren 属性会告诉我们当前分类 (item) 是否包含下级子分类。我们可以结合 {% if ... %} 标签来控制内容的显示。
下面是一个更优化的示例,它不仅显示了多级分类,还在没有子分类时展示了该分类下的部分文档,或者直接显示一个分类链接:
{% categoryList topCategories with moduleId="1" parentId="0" %}
<nav>
<ul>
{% for topCat in topCategories %} {# 遍历一级分类 #}
<li>
<a href="{{ topCat.Link }}">{{ topCat.Title }}</a>
{% if topCat.HasChildren %} {# 判断当前一级分类是否有子分类 #}
<ul class="sub-menu">
{% categoryList subCategories with parentId=topCat.Id %}
{% for subCat in subCategories %} {# 遍历二级分类 #}
<li>
<a href="{{ subCat.Link }}">{{ subCat.Title }}</a>
{% if subCat.HasChildren %} {# 判断当前二级分类是否有子分类 #}
<ul class="sub-sub-menu">
{% categoryList thirdCategories with parentId=subCat.Id %}
{% for thirdCat in thirdCategories %} {# 遍历三级分类 #}
<li>
<a href="{{ thirdCat.Link }}">{{ thirdCat.Title }}</a>
</li>
{% endfor %}
{% endcategoryList %}
</ul>
{% else %}
{# 如果二级分类没有子分类,可以显示该分类下的热门文档 #}
<ul class="category-articles">
{% archiveList articles with type="list" categoryId=subCat.Id limit="5" %}
{% for article in articles %}
<li><a href="{{ article.Link }}">{{ article.Title }}</a></li>
{% endfor %}
{% endarchiveList %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endcategoryList %}
</ul>
{% else %}
{# 如果一级分类没有子分类,可以直接显示该分类下的最新文档 #}
<ul class="category-articles">
{% archiveList articles with type="list" categoryId=topCat.Id limit="5" %}
{% for article in articles %}
<li><a href="{{ article.Link }}">{{ article.Title }}</a></li>
{% endfor %}
{% endarchiveList %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
{% endcategoryList %}
在这个示例中,我们利用 topCat.HasChildren 和 subCat.HasChildren 精确控制了子菜单的显示。当一个分类没有子分类时,我们选择显示它下面的文章列表,而不是一个空的子菜单,这样既优化了用户体验,也提高了内容的可见性。
总结
安企CMS提供了一套强大而灵活的模板标签,使得实现多级分类的嵌套显示和子分类判断变得非常简单。通过合理运用 categoryList 标签和 item.HasChildren 属性,您可以构建出高度结构化、功能丰富的网站导航和内容布局,满足各种复杂的网站设计需求。无论是为了提升用户导航效率,还是优化搜索引擎抓取,这些技巧都将助您一臂之力。
常见问题 (FAQ)
我能否在多级分类显示中,同时显示分类的图片或描述信息? 当然可以。在
categoryList循环中,item变量除了Id、Title、Link和HasChildren等基础属性外,还包含了Logo(缩略图大图)、Thumb(缩略图)和Description(分类描述)等字段。您可以直接在模板中通过{{ item.Logo }}或{{ item.Description }}等方式调用这些信息。如果分类内容包含HTML标签,请记得使用{{ item.Content|safe }}过滤器以避免内容被转义。如何限制每个子分类层级显示的子分类数量? 您可以在每个嵌套的
categoryList标签中添加limit参数来控制显示数量。例如,{% categoryList subCategories with parentId=topCat.Id limit="5" %}将只显示前5个子分类。如果需要从某个位置开始显示,还可以使用limit="offset,count"的模式,例如limit="2,5"表示从第2