如何使用`categoryList`标签构建多级分类导航或在内容区域展示分类列表？

在安企CMS中，妥善组织网站内容分类是提升用户体验和网站可维护性的重要一环。无论是构建清晰的多级导航菜单，帮助用户快速定位信息，还是在页面内容区域巧妙地展示不同分类的内容，categoryList标签都是实现这些功能的核心工具。

核心标签：categoryList 简介

categoryList标签是安企CMS模板引擎中专门用于获取网站分类列表的标签。它非常灵活，能够根据您的需求，获取特定内容模型的分类、特定父级分类下的子分类，甚至整个网站的所有分类。

使用它的基本结构是这样的： {% categoryList categories with moduleId="1" parentId="0" %} ... {% endcategoryList %}

让我们来分解一下这个标签的关键参数：

• moduleId：安企CMS支持多内容模型，比如您可能有文章模型（通常ID为1）、产品模型（通常ID为2）等。moduleId参数就是用来指定您想获取哪个内容模型下的分类。例如，moduleId="1"会获取文章分类，moduleId="2"会获取产品分类。
• parentId：这是控制分类层级关系的关键。
  • 如果您想获取顶级分类，可以设置为parentId="0"。
  • 如果您在循环一个分类时，想获取其直接的下级子分类，则可以省略parentId参数，categoryList标签会智能地读取当前循环分类的ID作为父级ID。
  • 如果您想获取当前分类的兄弟分类，可以设置为parentId="parent"。
• limit：如果您只想显示特定数量的分类，可以使用limit参数来限制返回的数量，比如limit="10"。您甚至可以设置limit="2,10"来表示从第2个分类开始，获取10个分类。
• siteId：当您使用多站点功能时，可以通过siteId来指定获取特定站点下的分类数据。通常情况下，这个参数可以忽略。

当categoryList标签执行后，它会返回一个名为categories（您也可以自定义这个变量名）的数组。在您使用for循环遍历这个数组时，每一个item都代表一个分类，它包含了丰富的属性，例如：

• item.Id：分类的唯一ID。
• item.Title：分类的名称。
• item.Link：分类的链接地址，可直接用于<a>标签的href属性。
• item.Description：分类的简介。
• item.Logo：分类的Logo图片地址。
• item.Thumb：分类的缩略图地址。
• item.HasChildren：一个布尔值，用于判断当前分类是否有子分类，这在构建多级菜单时非常有用。
• item.IsCurrent：一个布尔值，表示当前分类是否是用户正在访问的页面所属的分类，常用于导航高亮。
• item.ArchiveCount：当前分类下（不包含子分类）的文档数量。

构建多级分类导航：让用户一眼找到方向

一个结构清晰的网站导航就像一张地图，能帮助用户快速找到目的地。利用categoryList标签，您可以轻松构建出从一级菜单到多级下拉菜单的复杂导航结构。

首先，我们通常从获取顶级分类开始，作为我们导航菜单的第一级。

{# 假设我们正在构建一个文章分类的导航菜单，文章模型ID为1 #}
<ul class="main-nav">
    {% categoryList topCategories with moduleId="1" parentId="0" %}
    {% for item in topCategories %}
    <li class="nav-item {% if item.IsCurrent %}active{% endif %}">
        <a href="{{ item.Link }}">{{ item.Title }}</a>
        {# 检查当前分类是否有子分类，如果有，则渲染子菜单 #}
        {% if item.HasChildren %}
        <ul class="sub-nav">
            {# 再次调用 categoryList，此时 parentId 留空，它会自动获取当前 item.Id 的子分类 #}
            {% categoryList subCategories %}
            {% for subItem in subCategories %}
            <li class="sub-nav-item {% if subItem.IsCurrent %}active{% endif %}">
                <a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
                {# 您可以继续在这里嵌套，以构建三级甚至更多级别的菜单 #}
                {% if subItem.HasChildren %}
                <ul class="sub-sub-nav">
                    {% categoryList subSubCategories %}
                    {% for subSubItem in subSubCategories %}
                    <li class="sub-sub-nav-item {% if subSubItem.IsCurrent %}active{% endif %}">
                        <a href="{{ subSubItem.Link }}">{{ subSubItem.Title }}</a>
                    </li>
                    {% endfor %}
                    {% endcategoryList %}
                </ul>
                {% endif %}
            </li>
            {% endfor %}
            {% endcategoryList %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endcategoryList %}
</ul>

这段代码展示了如何通过嵌套categoryList标签来构建多级导航。关键在于内部的categoryList会根据外部循环item.Id自动获取其子分类，而item.HasChildren则负责判断是否需要渲染子菜单的结构。同时，item.IsCurrent可以帮助您为当前访问的分类添加active类，实现导航高亮效果。

在内容区域展示分类列表：丰富页面内容

categoryList标签不仅仅用于导航，它也能在页面的主体内容区域发挥重要作用，例如展示首页的“热门分类”或某个特定模块下的分类内容区块。

比如，在网站首页，我们可能想展示“文章”和“产品”这两个大分类，并在每个分类下显示几篇最新的文章或产品。这需要将categoryList与archiveList（文档列表标签）结合起来使用。

{# 假设文章模型ID为1，产品模型ID为2 #}
<div class="content-sections">
    {# 获取顶级文章分类 #}
    {% categoryList articleCategories with moduleId="1" parentId="0" limit="3" %}
    <section class="section-block">
        <h2>最新文章</h2>
        <div class="category-grid">
            {% for cat in articleCategories %}
            <div class="category-card">
                <h3><a href="{{ cat.Link }}">{{ cat.Title }}</a></h3>
                <p>{{ cat.Description|truncatechars:80 }}</p> {# 截取分类描述，限制字符数 #}
                <ul class="article-list">
                    {# 在每个分类下获取最新的3篇文章 #}
                    {% archiveList articles with categoryId=cat.Id limit="3" order="id desc" %}
                    {% for article in articles %}
                    <li><a href="{{ article.Link }}">{{ article.Title }}</a></li>
                    {% endfor %}
                    {% endarchiveList %}
                </ul>
            </div>
            {% endfor %}
        </div>
    </section>
    {% endcategoryList %}

    {# 获取顶级产品分类 #}
    {% categoryList productCategories with moduleId="2" parentId="0" limit="3" %}
    <section class="section-block">
        <h2>热门产品</h2>
        <div class="category-grid">
            {% for cat in productCategories %}
            <div class="category-card">
                <h3><a href="{{ cat.Link }}">{{ cat.Title }}</a></h3>
                <img src="{{ cat.Thumb }}" alt="{{ cat.Title }}" class="category-thumb">
                <ul class="product-list">
                    {# 在每个分类下获取最新的4个产品 #}
                    {% archiveList products with categoryId=cat.Id limit="4" order="id desc" %}
                    {% for product in products %}
                    <li><a href="{{ product.Link }}">{{ product.Title }}</a></li>
                    {% endfor %}
                    {% endarchiveList %}
                </ul>
            </div>
            {% endfor %}
        </div>
    </section>
    {% endcategoryList %}
</div>

这段代码展示了如何遍历几个顶级分类，并在每个分类内部，再使用archiveList标签来获取该分类下的具体文章或产品。这样可以在不离开当前页面的情况下，向用户展示丰富且分类清晰的内容。

实用技巧与注意事项

• moduleId的重要性：始终记得根据您想要获取的内容类型（文章、产品等）来指定正确的moduleId，以避免获取到错误的分类数据。
• limit的灵活运用：无论是在导航还是内容区域，limit参数都能帮助您控制显示数量，避免页面过于臃肿。
• item.IsCurrent实现高亮：在导航菜单中，利用item.IsCurrent这个布尔值，可以轻松为当前用户正在访问的分类添加CSS类，使其高亮显示，提升用户体验。
• **样式与