我能如何构建和显示多级嵌套的分类导航菜单？
在安企CMS中构建和展示多级嵌套的分类导航菜单，是网站内容组织和用户体验优化的重要一环。一个设计良好、层级清晰的导航不仅能帮助访问者快速找到所需信息，更能为搜索引擎提供明确的网站结构信号，从而提升SEO效果。
安企CMS作为一款以Go语言开发的企业级内容管理系统，在内容模型的灵活性和模板标签的强大支持下，让实现多级分类导航变得非常直观和高效。接下来，我们将探讨如何一步步构建这样的导航。
后台准备：构建你的内容骨架
在开始制作漂亮的导航菜单之前，我们需要在安企CMS的后台把内容分类的骨架搭建好。这就像为一栋大楼设计好承重结构，它是后续一切展示的基础。
首先，你需要进入“内容管理”模块下的“文档分类”页面。在这里，你可以创建各种分类来组织你的网站内容。 创建分类时，你需要为其选择一个“文档模型”（例如“文章模型”或“产品模型”），这决定了该分类下可以发布的内容类型和字段。
构建多级导航的关键在于设定“上级分类”。例如，如果你想创建一个关于“电子产品”的导航，你可以：
- 创建一个名为“电子产品”的顶级分类，不选择任何上级分类。
- 在“电子产品”下，创建“智能手机”、“笔记本电脑”等二级分类，并将它们的“上级分类”都设置为“电子产品”。
- 如果需要更深的层级，你可以在“智能手机”下继续创建“安卓手机”、“苹果手机”等三级分类，并将它们的“上级分类”设置为“智能手机”。
通过这种方式，后台的分类管理界面将清晰地呈现出树状的层级结构，为前端的导航展示打下坚实的基础。
模板实现：灵活展现多级菜单
安企CMS的模板系统采用类似Django的简洁语法，通过内置的标签，我们可以非常方便地调用后台数据并进行灵活展示。要构建多级分类导航，核心就是使用categoryList标签。
1. 调用顶级分类
首先，我们可以用categoryList标签来获取所有顶级分类，通常这些分类会作为你的主导航菜单项。
{% categoryList categories with moduleId="1" parentId="0" %}
<ul class="main-nav">
{% for item in categories %}
<li><a href="{{ item.Link }}">{{item.Title}}</a></li>
{% endfor %}
</ul>
{% endcategoryList %}
这里，moduleId="1"假设你正在调用“文章模型”下的分类（具体ID需根据你后台设置的模型ID来确定），parentId="0"则表示只获取没有上级分类的顶级分类。item.Link会输出分类的访问链接，item.Title则输出分类的名称。
2. 实现多级嵌套
多级导航的精髓在于“嵌套”。安企CMS的categoryList标签结合for循环和条件判断，可以轻松实现任意深度的嵌套。我们可以在循环每个分类时，检查它是否有子分类（通过item.HasChildren字段），如果有，就再次调用categoryList来获取并显示这些子分类。
下面是一个三级分类导航的示例代码：
{% categoryList categories with moduleId="1" parentId="0" %}
<ul class="main-nav">
{% for item in categories %}
<li class="nav-item {% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{item.Title}}</a>
{# 判断当前分类是否有子分类 #}
{% if item.HasChildren %}
<ul class="sub-nav">
{# 获取当前分类的子分类，parentId设置为当前item的ID #}
{% categoryList subCategories with parentId=item.Id %}
{% 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 deepSubCategories with parentId=subItem.Id %}
{% for deepSubItem in deepSubCategories %}
<li class="deep-sub-nav-item {% if deepSubItem.IsCurrent %}active{% endif %}">
<a href="{{ deepSubItem.Link }}">{{deepSubItem.Title}}</a>
{# 理论上可以继续嵌套，但通常不建议导航层级过深，以免影响用户体验 #}
</li>
{% endfor %}
{% endcategoryList %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endcategoryList %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endcategoryList %}
在这段代码中，我们首先获取顶级分类，然后在每个顶级分类的循环内部，利用item.HasChildren判断是否有子分类。如果存在，我们便再次使用categoryList标签，并将parentId参数设置为当前顶级分类的item.Id，从而获取其下级分类。这个过程可以根据你的实际需求，继续向下嵌套，以支持更多层级的分类。
item.IsCurrent这个字段也非常有用，它能帮助你判断当前循环到的分类是否是用户正在访问的页面所对应的分类或其祖先分类，从而可以在CSS中添加active类名来高亮显示。
3. 样式美化
虽然上述代码已经构建了多级导航的HTML结构，但要使其在视觉上呈现出层级感和美观性，还需要配合CSS样式。你可以根据自己的网站设计，为.main-nav, .sub-nav, .deep-sub-nav以及它们内部的li和a标签添加合适的样式，例如使用display: none;和JavaScript或CSS的:hover伪类来实现下拉菜单的交互效果。
进一步优化与考虑
- 当前页面高亮： 为了提升用户