怎样在导航栏中显示二级或多级分类列表？
网站导航就像是您的网站的骨架，它引导访客浏览网站的不同部分，找到他们感兴趣的内容。一个清晰、直观的导航系统对于提升用户体验和网站的专业度至关重要。安企CMS深知这一点，为您提供了灵活多样的方案来构建和管理网站的导航，特别是对于需要展示二级甚至多级分类列表的复杂导航结构。
今天，我们就来深入了解如何在安企CMS中设置并显示这些层级分明的分类列表，让您的网站导航更加强大和智能。
安企CMS导航体系概览
在安企CMS中，网站的导航管理集中在后台的“后台设置”区域，具体是“网站导航设置”功能。在这里，您可以创建不同类型的导航菜单，比如主导航、页脚导航或侧边栏导航等。系统默认提供了一个“默认导航”类别，您可以直接在其基础上进行修改，也可以根据需要创建新的导航类别。
导航链接的类型非常灵活，您可以选择：
- 内置链接：指向网站的首页、不同内容模型的首页（如文章首页、产品首页等）。
- 分类页面链接：直接关联到您已创建的文章分类或产品分类。
- 外部链接：可以指向站内任意URL，甚至是站外其他网站的链接。
对于多级分类列表，安企CMS主要提供了两种实现方式：一种是利用内置导航功能直接配置多级菜单，另一种是基于分类数据动态生成多级列表，两者各有侧重。
方法一：利用内置导航功能构建多级列表
这种方法适用于导航结构相对固定，或者您希望对每个导航项的显示内容进行精细化控制的场景。安企CMS的内置导航支持最多两级的导航链接，也就是一级主菜单和其下的二级子菜单。
第一步：在后台配置多级导航
- 进入导航设置：登录安企CMS后台，点击左侧菜单的“后台设置”，然后选择“网站导航设置”。
- 管理导航类别：如果您想创建除了“默认导航”以外的其他导航区域（比如“页脚导航”），可以在“导航类别管理”中新增。对于普通主导航，直接使用“默认导航”即可。
- 添加一级导航链接：
- 点击“添加导航链接”按钮。
- “上级导航”选择“顶级导航”。
- 填写“显示名称”（比如“产品中心”、“关于我们”）。
- 选择“链接类型”，如果您希望这个导航项指向某个分类，就选择“分类页面链接”，然后选择对应的分类。
- 设置“显示顺序”，数字越小越靠前。
- 添加二级导航链接：
- 再次点击“添加导航链接”。
- 这次“上级导航”就不能选“顶级导航”了，而是选择您刚刚创建的一级导航项（比如“产品中心”）。
- 同样填写“显示名称”，选择“链接类型”，并关联到相应的分类或页面。
- 设置“显示顺序”。
通过这种方式，您可以清晰地在后台管理每个导航项的显示文字、链接地址和所属层级。
第二步：在前端模板中调用并显示
配置好后台导航后，您需要在前端模板中通过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.