安企CMS如何显示后台配置的导航列表，并支持多级下拉菜单？
网站导航作为用户访问网站的“指南针”，其清晰度与易用性直接影响用户体验和信息获取效率。对于企业网站而言，一个结构良好、支持多级下拉的导航系统更是必不可少。安企CMS（AnQiCMS）深知这一点，为您提供了直观且强大的后台配置功能，让您轻松构建出富有层次感的导航菜单。
接下来，我们将一起探索如何在安企CMS的后台配置导航列表，并让它们在前台完美呈现多级下拉效果。
第一步：后台配置导航——规划您的菜单结构
管理网站导航，首先要从安企CMS的后台开始。进入后台管理界面后，找到并点击左侧菜单栏中的“后台设置”，接着选择“导航设置”。这里就是您规划和构建网站导航的“指挥中心”。
1. 创建导航类别：定义您的导航区域
在“导航设置”页面，您会看到一个“导航类别管理”区域。默认情况下，系统会有一个“默认导航”类别。如果您希望在网站的不同位置（例如顶部主导航、底部友情链接区、侧边栏菜单等）显示不同的导航内容，就可以在这里点击“新增导航类别”，创建新的类别，比如“页脚导航”或“侧边栏菜单”。这就像给不同的抽屉贴上标签，方便您分门别类地管理链接。
2. 设置导航链接：构建您的菜单项
创建好导航类别后，就可以开始添加具体的导航链接了。在页面下方的“导航链接设置”区域，点击“添加新链接”按钮。
显示名称：这是导航链接在前台显示给用户的文字，您可以根据需要自由填写。
子标题名称与导航描述：如果您需要导航项除了主标题外，还显示副标题或一段简短的描述（例如，中英文对照，或功能简介），可以在这里填写。这些信息在前台模板中也是可以调用的。
链接类型：安企CMS提供了三种灵活的链接类型，满足您多样化的需求：
- 内置链接：包括首页链接、文章模型首页、产品模型首页等常用页面的快捷选项。
- 分类页面链接：您可以直接从已有的文章分类、产品分类或单页面中选择作为导航链接。这意味着当您创建新的分类或页面时，它们可以很方便地被添加到导航中。
- 外部链接：如果您需要链接到站内某个特定URL，或者其他外部网站，可以选择此项并手动输入完整的网址。
上级导航：实现多级下拉的关键 这一点至关重要。安企CMS目前支持最多两级导航链接，即一个主菜单项下可以包含一个层级的下拉子菜单。
- 要创建一级导航（主菜单项），请选择“顶级导航”。
- 要创建二级下拉菜单项，您需要从下拉列表中选择其所属的“上级导航”。系统会智能地识别您之前设置的一级导航作为可选的上级。
显示顺序：您可以为每个导航链接设置一个数字，数字越小，该链接在导航列表中的显示位置越靠前。
完成这些设置后，点击“确定”，您的导航链接就会被保存并添加到列表中。您可以重复此过程，逐步构建出完整的导航结构。
第二步：前端模板调用——让导航在网站上生动呈现
后台配置完成后，接下来就是让这些精心设计的导航列表呈现在网站前端了。安企CMS采用了Django模板引擎语法，通过简洁的模板标签，您可以非常灵活地调用和渲染导航数据。
核心的导航调用标签是 navList。它能获取您在后台配置的所有导航数据。
1. 调用导航列表的基本结构
通常，您会在网站模板的 header.html 或 bash.html 等公共文件中使用 navList 标签来渲染主导航。
以下是一个基本的 navList 标签使用示例：
{% navList navs with typeId=1 %} {# 这里的 typeId=1 对应后台的“默认导航”类别ID #}
<ul>
{%- for item in navs %}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{item.Title}}</a>
{# 这里可以添加二级导航的逻辑 #}
</li>
{% endfor %}
</ul>
{% endnavList %}
在上面的代码中：
{% navList navs %}：声明您要调用导航列表，并将其数据赋值给navs变量。with typeId=1：指定调用ID为1的导航类别（通常是“默认导航”）。如果您创建了“页脚导航”类别，可能其ID为2，则使用with typeId=2。{% for item in navs %}：遍历navs数组，item变量代表每一个一级导航链接的数据。{{ item.Link }}和{{ item.Title }}：分别获取导航链接的URL和显示名称。{% if item.IsCurrent %}active{% endif %}：这是一个非常实用的功能，IsCurrent属性会自动判断当前页面是否与该导航链接匹配，如果匹配则返回true。您可以利用这个属性为当前页面对应的导航项添加active类，实现高亮显示，提升用户体验。
2. 实现多级下拉菜单
要实现多级下拉菜单，您需要在遍历一级导航项（item）时，检查它是否包含子导航（item.NavList）。如果包含，则再进行一次嵌套循环来渲染这些子导航。
{% navList navs with typeId=1 %}
<ul class="main-nav">
{%- for item in navs %}
<li class="nav-item {% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{item.Title}}</a>
{%- if item.NavList %} {# 检查当前导航项是否有子导航 #}
<ul class="dropdown-menu"> {# 下拉菜单容器 #}
{%- for inner in item.NavList %} {# 遍历子导航 #}
<li class="dropdown-item {% if inner.IsCurrent %}active{% endif %}">
<a href="{{ inner.Link }}">{{inner.Title}}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endnavList %}
在这个进阶示例中：
{%- if item.NavList %}：判断当前一级导航item是否有NavList（子导航列表）。请注意-符号，它可以移除标签产生的空行，让生成的HTML更整洁。item.NavList：如果存在，它本身也是一个数组，包含了二级导航项的数据。{%- for inner in item.NavList %}：嵌套循环遍历item.NavList中的每一个子导航项，将其数据赋值给inner变量。{{ inner.Link }}和{{ inner.Title }}：获取子导航链接的URL和显示名称。
通过这样的结构，您就能够在前端渲染出清晰的两级下拉导航菜单了。当然，具体的样式（CSS）需要您根据自己的网站设计进行编写，以达到美观的视觉效果。
3. 理解 navList 标签的参数与返回字段
为了更灵活地使用 navList 标签，了解其支持的参数和返回字段是很有帮助的：
typeId(参数)：用于指定要调用哪个导航类别的导航列表。例如，typeId=1可能对应“主导航”，而typeId=2可能对应“页脚导航”。siteId(参数)：如果您启用了多站点管理功能，并且需要调用其他站点的数据，可以通过这个参数指定站点ID。- 返回字段 (每个
item或inner对象都包含)：Title：导航项的显示名称。SubTitle：导航项的子标题（如果设置了）。 *