网站导航作为用户访问网站的“指南针”，其清晰度与易用性直接影响用户体验和信息获取效率。对于企业网站而言，一个结构良好、支持多级下拉的导航系统更是必不可少。安企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：导航项的子标题（如果设置了）。 *