网站导航就像是您的网站的骨架，它引导访客浏览网站的不同部分，找到他们感兴趣的内容。一个清晰、直观的导航系统对于提升用户体验和网站的专业度至关重要。安企CMS深知这一点，为您提供了灵活多样的方案来构建和管理网站的导航，特别是对于需要展示二级甚至多级分类列表的复杂导航结构。

今天，我们就来深入了解如何在安企CMS中设置并显示这些层级分明的分类列表，让您的网站导航更加强大和智能。

安企CMS导航体系概览

在安企CMS中，网站的导航管理集中在后台的“后台设置”区域，具体是“网站导航设置”功能。在这里，您可以创建不同类型的导航菜单，比如主导航、页脚导航或侧边栏导航等。系统默认提供了一个“默认导航”类别，您可以直接在其基础上进行修改，也可以根据需要创建新的导航类别。

导航链接的类型非常灵活，您可以选择：

  • 内置链接：指向网站的首页、不同内容模型的首页（如文章首页、产品首页等）。
  • 分类页面链接：直接关联到您已创建的文章分类或产品分类。
  • 外部链接：可以指向站内任意URL，甚至是站外其他网站的链接。

对于多级分类列表，安企CMS主要提供了两种实现方式：一种是利用内置导航功能直接配置多级菜单，另一种是基于分类数据动态生成多级列表，两者各有侧重。

方法一：利用内置导航功能构建多级列表

这种方法适用于导航结构相对固定，或者您希望对每个导航项的显示内容进行精细化控制的场景。安企CMS的内置导航支持最多两级的导航链接，也就是一级主菜单和其下的二级子菜单。

第一步：在后台配置多级导航

  1. 进入导航设置：登录安企CMS后台，点击左侧菜单的“后台设置”，然后选择“网站导航设置”。
  2. 管理导航类别：如果您想创建除了“默认导航”以外的其他导航区域（比如“页脚导航”），可以在“导航类别管理”中新增。对于普通主导航，直接使用“默认导航”即可。
  3. 添加一级导航链接：
    • 点击“添加导航链接”按钮。
    • “上级导航”选择“顶级导航”。
    • 填写“显示名称”（比如“产品中心”、“关于我们”）。
    • 选择“链接类型”，如果您希望这个导航项指向某个分类，就选择“分类页面链接”，然后选择对应的分类。
    • 设置“显示顺序”，数字越小越靠前。
  4. 添加二级导航链接：
    • 再次点击“添加导航链接”。
    • 这次“上级导航”就不能选“顶级导航”了，而是选择您刚刚创建的一级导航项（比如“产品中心”）。
    • 同样填写“显示名称”，选择“链接类型”，并关联到相应的分类或页面。
    • 设置“显示顺序”。

通过这种方式，您可以清晰地在后台管理每个导航项的显示文字、链接地址和所属层级。

第二步：在前端模板中调用并显示

配置好后台导航后，您需要在前端模板中通过navList标签来调用这些数据。通常，这部分代码会放在 header.html 或 base.html 这样的公共模板文件中。

navList标签的使用方式如下：

{% navList navs with typeId=1 %} {# typeId=1 默认为主导航，如果自定义了类别请填写对应ID #}
<ul class="main-nav">
    {%- for item in navs %} {# 遍历一级导航项 #}
        <li class="{% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
            {%- if item.NavList %} {# 判断当前一级导航项是否有二级子菜单 #}
            <dl class="sub-nav">
                {%- for inner in item.NavList %} {# 遍历二级导航项 #}
                    <dd class="{% if inner.IsCurrent %}active{% endif %}">
                        <a href="{{ inner.Link }}">{{inner.Title}}</a>
                    </dd>
                {% endfor %}
            </dl>
            {% endif %}
        </li>
    {% endfor %}
</ul>
{% endnavList %}

在上面的代码中，navs 变量会包含您在后台配置的所有一级导航项，每个 item 都代表一个导航项。如果 item.NavList 存在，则表示该导航项下有二级子菜单，您可以再次使用 for 循环遍历 item.NavList 来显示二级菜单内容。item.IsCurrent 属性可以帮助您判断当前导航项是否是当前页面，从而添加 active 类名来高亮显示。

进阶用法：在二级导航下显示对应内容

有时候，您可能希望在二级导航项展开时，不仅显示子分类名称，还能直接列出该分类下的文章或产品列表。这在产品展示或资讯网站中非常实用。安企CMS通过 item.PageId 字段提供了实现这种功能的可能性，item.PageId会返回当前导航项所关联的分类或页面的ID。

例如，在一个产品导航中，显示二级分类下的8个产品：

<ul>
    {% navList navList with typeId=1 %}
    {%- for item in navList %}
    <li>
        <a href="{{ item.Link }}">{{item.Title}}</a>
        {%- if item.NavList %}
        <ul class="nav-menu-child">
            {%- for inner in item.NavList %}
            <li>
                <a href="{{ inner.Link }}">{{inner.Title}}</a>
                {% archiveList products with type="list" categoryId=inner.PageId limit="8" %} {# 使用 inner.PageId 获取产品列表 #}
                {% if products %}
                <ul class="nav-menu-child-child">
                    {% for product in products %}
                    <li><a href="{{product.Link}}">{{product.Title}}</a></li>
                    {% endfor %}
                </ul>
                {% endif %}
                {% endarchiveList %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>

另一个常见需求是在二级导航下显示其三级分类，以此类推。这时，您可以在inner循环内部再次使用categoryList标签：

<ul>
    {% navList navList with typeId=1 %}
    {%- for item in navList %}
    <li>
        <a href="{{ item.Link }}">{{item.Title}}</a>
        {%- if item.NavList %}
        <ul class="nav-menu-child">
            {%- for inner in item.NavList %}
            <li>
                <a href="{{ inner.Link }}">{{inner.Title}}</a>
                {% if inner.PageId > 0 %}
                    {% categoryList categories with parentId=inner.PageId %} {# 使用 inner.PageId 获取三级分类 #}
                    {% if categories %}
                    <ul>
                        {% for subCategory in categories %}
                        <li>
                            <a href="{{ subCategory.Link }}">{{subCategory.Title}}</a>
                        </li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                    {% endcategoryList %}
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>

方法二：纯分类驱动的动态多级导航

如果您的网站分类结构非常庞大，并且经常有调整，或者您希望导航完全根据分类的层级关系动态生成，那么直接使用 categoryList 标签构建导航会更加高效。这种方法可以实现任意深度的多级分类列表。

第一步：确保分类结构完善

首先，您需要在安企CMS后台的“内容管理”->“文档分类”中，确保您的分类层级关系已经设置好。例如，一级分类下有二级分类，二级分类下有三级分类等。

第二步：在前端模板中动态调用

通过递归调用或嵌套 categoryList 标签，您可以轻松构建出多级分类导航。

以下是一个三级分类导航的示例代码：

”`twig {% categoryList topCategories with moduleId=“1” parentId=“0” %} {# 获取文章模型的顶级分类 #} 

    {% for level1_item in topCategories %} {# 遍历一级分类 #}
<li>
    <a href="{{ level1_item.Link }}">{{level1_item.