在构建网站时,清晰、有组织的内容结构是提升用户体验和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.HasChildrensubCat.HasChildren 精确控制了子菜单的显示。当一个分类没有子分类时,我们选择显示它下面的文章列表,而不是一个空的子菜单,这样既优化了用户体验,也提高了内容的可见性。

总结

安企CMS提供了一套强大而灵活的模板标签,使得实现多级分类的嵌套显示和子分类判断变得非常简单。通过合理运用 categoryList 标签和 item.HasChildren 属性,您可以构建出高度结构化、功能丰富的网站导航和内容布局,满足各种复杂的网站设计需求。无论是为了提升用户导航效率,还是优化搜索引擎抓取,这些技巧都将助您一臂之力。

常见问题 (FAQ)

  1. 我能否在多级分类显示中,同时显示分类的图片或描述信息? 当然可以。在 categoryList 循环中,item 变量除了 IdTitleLinkHasChildren 等基础属性外,还包含了 Logo(缩略图大图)、Thumb(缩略图)和 Description(分类描述)等字段。您可以直接在模板中通过 {{ item.Logo }}{{ item.Description }} 等方式调用这些信息。如果分类内容包含HTML标签,请记得使用 {{ item.Content|safe }} 过滤器以避免内容被转义。

  2. 如何限制每个子分类层级显示的子分类数量? 您可以在每个嵌套的 categoryList 标签中添加 limit 参数来控制显示数量。例如,{% categoryList subCategories with parentId=topCat.Id limit="5" %} 将只显示前5个子分类。如果需要从某个位置开始显示,还可以使用 limit="offset,count" 的模式,例如 limit="2,5" 表示从第2