构建一个清晰、易用的网站导航菜单，是提升用户体验和网站专业度的重要一环。在安企CMS中，我们可以借助强大的navList标签，轻松实现支持二级下拉的导航菜单，让网站内容层级分明，方便访客浏览。
接下来，我们将一起探索如何利用navList标签，从后台配置到前端模板渲染，一步步打造一个功能完善的二级下拉导航。
一、后台设置：为导航菜单打下坚实基础
要让navList标签在前台发挥作用，我们首先需要在安企CMS的后台管理系统中进行相应的配置。这就像是为我们的导航菜单绘制蓝图，规划好它的结构和内容。
管理导航类别 安企CMS允许我们创建不同的导航类别，例如“顶部主导航”、“页脚导航”或“侧边栏导航”等。系统默认会有一个“默认导航”类别。如果你需要为不同的位置定制导航，可以在“后台设置”下的“导航设置”中，找到“导航类别管理”来新增类别。为你的导航选择一个有意义的名称，比如“主导航”，这样在模板调用时会更清晰。
设置导航链接 在选定或创建好导航类别后，我们就可以开始添加具体的导航链接了。这里的关键在于如何定义主导航和二级下拉菜单。
- 主导航（一级菜单）：当你添加一个新链接时，在“上级导航”选项中选择“顶级导航”。这就是你的主菜单项。你需要填写“显示名称”（如“产品中心”）、选择“链接类型”（可以是“内置链接”如首页，或指向某个“分类页面”、“单页面”，甚至是一个“外部链接”）。
- 二级下拉菜单（子菜单）：要创建一个二级菜单项，你需要将它的“上级导航”设置为对应的主导航项。例如，如果“产品中心”是主导航，你可以创建一个名为“产品分类一”的链接，并将其“上级导航”指定为“产品中心”。同样，你可以选择合适的链接类型来指引用户到具体的产品分类页面或产品详情页。
通过这种方式，后台的导航列表会形成清晰的层级关系，为前端的二级下拉效果做好数据准备。别忘了，每个导航链接还可以设置“显示顺序”，让你的菜单排列整齐。
二、前端模板：灵活运用navList标签渲染菜单
在后台配置好导航数据后，接下来就是将这些数据通过navList标签呈现在网站前台了。安企CMS采用类似Django的模板引擎语法，让数据的调用变得直观。
navList标签的基本用法是这样的：
{% navList navs with typeId=1 %}
{# 这里是导航的渲染逻辑 #}
{% endnavList %}
这里，navs是你为导航数据指定的一个变量名，你可以根据自己的喜好命名，比如mainNav。typeId参数则对应后台设置的“导航类别ID”。如果你的主导航类别ID是1，就像上面代码所示。
在navList标签内部，我们会通过for循环来遍历导航数据。每一个循环项（我们通常命名为item）都包含了导航的各种信息，比如item.Title（显示名称）、item.Link（链接地址）等。而实现二级下拉菜单的关键，则在于item.NavList这个字段。如果一个主导航项下有二级子导航，那么item.NavList就会是一个包含这些子导航链接的数组。
下面是一个基础的二级下拉导航菜单的模板代码示例：
<nav class="main-navigation">
<ul>
{% navList mainNav with typeId=1 %} {# 假设主导航的ID是1 #}
{%- for item in mainNav %}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
{# 判断是否有二级下拉菜单 #}
{%- if item.NavList %}
<ul class="dropdown-menu"> {# 下拉菜单容器 #}
{%- for subItem in item.NavList %}
<li class="{% if subItem.IsCurrent %}active{% endif %}">
<a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
在这段代码中：
- 我们首先使用
{% navList mainNav with typeId=1 %}来获取ID为1的导航类别下的所有主导航数据，并将其赋值给mainNav变量。 - 外层的
for循环遍历mainNav，生成一级菜单项。item.IsCurrent可以帮助你给当前页面所在的一级菜单添加active类，以便通过CSS进行高亮显示。 {%- if item.NavList %}是一个非常关键的条件判断。它检查当前一级菜单项是否包含子导航列表。如果item.NavList有数据，说明这是一个带有下拉菜单的主导航项。- 内层的
for循环{%- for subItem in item.NavList %}则用于遍历并渲染这些二级子菜单项。subItem.Title和subItem.Link分别对应子菜单的显示名称和链接。同样，subItem.IsCurrent可用于子菜单项的激活状态。 - 代码中的
{%-和%}之间的-号是为了移除标签所占用的空行，让生成的HTML代码更加紧凑，避免不必要的空白行。
进阶应用：下拉菜单中展示更多动态内容
navList的强大之处远不止于此。你甚至可以在二级下拉菜单中，进一步结合其他标签，如archiveList（文档列表）或categoryList（分类列表），来展示更丰富、更动态的内容。
例如，在一个“产品中心”下拉菜单中，你可能希望展示每个二级产品分类下的热门产品：
<nav class="main-navigation">
<ul>
{% navList mainNav with typeId=1 %}
{%- for item in mainNav %}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
{%- if item.NavList %}
<ul class="dropdown-menu">
{%- for subItem in item.NavList %}
<li>
<a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
{# 如果二级菜单是分类页面，且有对应的分类ID，可以进一步展示该分类下的文档 #}
{%- if subItem.PageId > 0 %}
<ul class="sub-dropdown-list"> {# 第三级展示，例如相关产品列表 #}
{% archiveList products with type="list" categoryId=subItem.PageId limit="5" %}
{% for product in products %}
<li><a href="{{ product.Link }}">{{ product.Title }}</a></li>
{% endfor %}
{% endarchiveList %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
在这个进阶示例中，我们利用了subItem.PageId（如果二级导航链接类型是“分类页面”，它会包含该分类的ID），并结合archiveList标签，在该二级分类下再动态列出5篇相关产品文档。这样，你的导航菜单不仅仅是简单的链接，更是一个内容丰富的迷你展示区。
三、样式美化：让导航菜单更加出彩
有了完善的结构和丰富的内容，接下来就是利用CSS为你的导航菜单添加样式，使其美观且响应式。由于CSS部分千变万化，这里不提供具体代码，但请记住以下几点：
- 使用CSS将
.dropdown-menu类默认隐藏，并在鼠标悬停在父级<li>上时显示。 - 为手机端适配，可以考虑使用媒体查询（Media Queries）将下拉菜单转换为折叠菜单，提升移动设备上的用户体验。
- 确保链接的可点击区域足够大，方便用户操作。
总结
安企CMS的navList标签为我们构建多级导航菜单提供了极大的便利和灵活性。通过后台清晰的层级管理和前端模板的巧妙运用，无论是简单的二级下拉，还是集成动态内容的复杂菜单，都能轻松实现。一个精心设计的导航菜单，无疑会成为网站的一大亮点，有效引导用户探索更多精彩内容。
常见问题（FAQ）
- 为什么我按照步骤设置了，但二级下拉菜单没有显示出来？