安企CMS作为一个功能强大的内容管理系统，为用户提供了灵活构建和展示多层级产品分类导航的能力。这不仅有助于网站访问者更轻松地查找所需产品，也能有效提升网站的SEO表现，优化用户体验。接下来，我们一起探索如何在安企CMS中实现这一目标。

核心基础：理解安企CMS的分类体系

在安企CMS中，多层级产品分类导航的构建离不开其核心的“内容模型”和“文档分类”功能。

首先，内容模型是定义网站内容结构的基础。如果您的网站主要展示产品，那么通常会有一个专门的“产品模型”。这个模型可以自定义字段，比如产品的价格、库存、品牌等，确保每件产品都有其特定的属性。分类都依附于特定的内容模型。

其次，文档分类是组织内容的骨架。在安企CMS中，每个分类都可以拥有上级分类，从而形成清晰的层级关系。例如，您可以创建“电子产品”作为一级分类，在其下再创建“手机”、“电脑”等二级分类，甚至在“手机”下进一步创建“智能手机”、“功能机”等三级分类。每个分类不仅有名称、链接、描述等基本信息，还可以设置缩略图、Banner图，甚至独立的分类内容，这些都极大地丰富了分类展示的可能性。

构建多层级产品分类导航：后端操作

构建多层级产品分类导航的第一步，是在安企CMS的后台进行细致的配置。

  1. 确保产品模型已创建或定义完善 进入后台的“内容管理”模块，选择“内容模型”。如果您还没有专门的“产品模型”，可以新建一个，或者修改现有的模型以适应产品展示的需求。确保该模型包含了产品所需的各项自定义字段。

  2. 创建和组织产品分类 在“内容管理”下找到“文档分类”。

    • 添加一级分类： 点击“添加新分类”，选择您为产品定义的“产品模型”，并输入分类名称（例如“电子产品”）。此时，“上级分类”保持为空，表示这是一个顶级分类。您可以为这个分类添加简介、SEO标题、关键词，甚至上传一个代表性的Banner图或缩略图。
    • 创建子分类： 继续点击“添加新分类”，选择“产品模型”，并在“上级分类”中选择您刚刚创建的一级分类（例如“电子产品”）。输入子分类的名称（例如“手机”）。依此类推，您可以根据产品线的深度，创建多层级的子分类。
    • 完善分类信息： 在创建或编辑分类时，务必注意“其他参数”部分。
      • 自定义URL： 为分类设置一个简洁、有意义的自定义URL，这对于SEO非常重要。
      • 分类模板： 如果某些分类需要独特的布局或样式，您可以在这里指定一个自定义模板文件（例如product/list-12.html，其中12是该分类的ID），而不是使用默认的分类列表模板。
      • Banner图/缩略图： 这些图片可以用于前端导航或分类页面中，提供更直观的视觉引导。
      • 分类内容： 您可以在这里为分类添加一段介绍性文字，这在分类页面中会非常有帮助。

展示多层级产品分类导航：前端模板实现

后端分类结构搭建完成后，接下来就是通过前端模板标签，将其生动地展示在网站上。安企CMS的模板引擎提供了强大的categoryList和navList标签，以及灵活的循环控制，帮助我们实现这一目标。

  1. 使用 categoryList 标签展示分类层级 categoryList标签是获取分类列表的核心。通过嵌套使用，您可以轻松构建多层级导航。

    首先，获取顶级产品分类：

    {% categoryList productCategories with moduleId="您的产品模型ID" parentId="0" %}
    <ul>
        {% for item in productCategories %}
            <li>
                <a href="{{ item.Link }}">{{ item.Title }}</a>
                {# 在这里检查是否有子分类，并继续嵌套调用 #}
            </li>
        {% endfor %}
    </ul>
{% endcategoryList %}

    为了实现多层级，我们可以在每个分类项的内部，再次使用categoryList标签来获取其子分类。利用item.HasChildren属性可以判断当前分类是否有子分类，从而决定是否渲染下一级导航：

    {% categoryList productCategories with moduleId="您的产品模型ID" parentId="0" %}
    <ul class="main-nav">
        {% for item in productCategories %}
            <li class="nav-item">
                <a href="{{ item.Link }}">{{ item.Title }}</a>
                {% if item.HasChildren %} {# 判断是否有子分类 #}
                    <ul class="sub-nav">
                        {% categoryList subCategories with parentId=item.Id %} {# 获取当前分类的子分类 #}
                            {% for subItem in subCategories %}
                                <li class="sub-nav-item">
                                    <a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
                                    {# 甚至可以在这里继续嵌套，如果您的分类层级更深 #}
                                </li>
                            {% endfor %}
                        {% endcategoryList %}
                    </ul>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endcategoryList %}

    在上述代码中，moduleId应替换为您的产品模型ID（通常在后台“内容模型”中查看），parentId="0"表示获取所有顶级分类。item.Id用于指定获取当前分类的子分类。

  2. 结合 navList 标签构建主导航 如果您的主导航菜单是需要在后台灵活配置的，并且其中包含了产品分类，那么navList标签会是更合适的选择。在后台“后台设置” -> “导航设置”中，您可以创建一个新的导航类别，例如“产品主导航”，然后将各个产品分类添加进去，并设置好层级关系。 前端模板中，您可以这样调用： “`twig {% navList mainNav with typeId=“您的产品主导航类别ID” %} {# 假设您的产品主导航类别ID是2 #}

    <ul class="main-menu">
    {% for navItem in mainNav %}
        <li class="menu-item {% if navItem.IsCurrent %}active{% endif %}">
            <a href="{{ navItem.Link }}">{{ navItem.Title }}</a>
            {% if navItem.NavList %} {# 检查是否有子导航项 #}
                <ul class="submenu">
                    {% for subNavItem in navItem.NavList %}
                        <li class="submenu-item {% if subNavItem.IsCurrent %}active{% endif %}">
                            <a href="{{ subNavItem.Link }}">{{ subNavItem.Title }}</a>
                            {# 也可以在此处显示产品列表或更深层级的分类 #}
                            {% if subNavItem.PageId > 0 %} {# 如果是分类链接，PageId会大于0 #}
                                {% categoryList subCategories with parentId=subNavItem.PageId %}
                                    {% if subCategories %}
                                        <ul class="sub-submenu">
                                            {% for thirdLevelCat in subCategories %}
                                                <li><a href="{{ thirdLevelCat.Link }}">{{ thirdLevelCat