安企CMS提供了一套直观而强大的导航菜单管理系统，让您能够轻松地为网站构建清晰、用户友好的导航结构，包括多级的下拉菜单。这不仅能提升网站的用户体验，还能帮助搜索引擎更好地理解您的网站内容层级，从而优化SEO表现。

理解安企CMS的导航体系

在安企CMS中，导航菜单的设置和管理都集中在后台的“网站导航设置”功能中。这里是您构建网站菜单的核心区域。安企CMS的导航体系允许您创建不同用途的导航类别，例如主导航、页脚导航或侧边栏导航，并且每个导航类别都支持多达两级的菜单结构，即一级主菜单和其下的一级下拉子菜单。

这种设计使得内容组织更为灵活，您可以将相关联的内容聚合在同一父菜单下，通过下拉菜单的形式展示给访问者，既保持了界面的整洁，又方便用户快速找到所需信息。

后台设置：构建二级菜单的基石

要开始设置二级下拉菜单，您首先需要进入安企CMS后台的“后台设置”区域，然后选择“网站导航设置”。

  1. 管理导航类别： 默认情况下，系统会有一个“默认导航”类别。如果您需要为网站的不同区域（如主导航、页脚等）设置独立的菜单，可以通过“导航类别管理”功能添加新的类别。例如，您可以添加一个名为“页脚导航”的新类别。每个类别都将拥有独立的导航链接集合。

  2. 配置导航链接： 在选定的导航类别下，您可以开始添加和组织导航链接。

    • 创建一级导航： 首先，添加您网站的主菜单项。在添加新链接时，将“上级导航”选项设置为“顶级导航”。这些将是您网站主导航条上显示的主要入口。
    • 创建二级下拉菜单： 接着，为需要下拉功能的每一个一级导航项添加子菜单。在添加这些子菜单项时，关键在于将“上级导航”选项设置为对应的一级导航项。这样，这些链接就会自动归属到其父级菜单下，形成下拉效果。 在配置每个导航链接时，您会发现“链接类型”提供了多种选项，这是关联不同内容的关键：
      • 内置链接： 适用于链接到网站的首页或特定内容模型（如文章、产品）的首页。
      • 分类页面链接： 这是最常用的内容关联方式。您可以直接选择已创建的“文档分类”或“单页面”作为导航目标。当您选择一个分类时，导航链接将自动指向该分类的页面；选择单页面则指向该单页面。这样一来，您的下拉菜单可以直接引导用户访问特定的内容列表或信息页面。
      • 外部链接： 允许您链接到站内任意自定义URL或外部网站，提供了极大的灵活性。
    • 调整显示顺序： 您可以使用“显示顺序”字段来控制导航项在菜单中的排列位置。数值越小，显示越靠前，这有助于您精细调整菜单的布局。

通过上述后台配置，您就已经为网站的导航菜单定义了清晰的层级结构和内容指向。

模板实现：让导航在前台“动起来”

后台设置好导航链接后，还需要在前端模板文件中调用这些数据，才能让它们在网站上实际显示出来。安企CMS采用类似Django的模板引擎语法，让模板开发变得简单。

  1. 定位模板文件： 通常，网站的头部导航菜单会定义在公共的模板文件里，比如 /template/您的模板名称/partial/header.html 或 /template/您的模板名称/bash.html 这类文件中。

  2. 使用 navList 标签： 安企CMS提供了 navList 模板标签，用于获取您在后台配置的导航列表数据。这个标签会返回一个包含导航项及其子项的结构化数据。

    下面是一个通用的示例代码片段，展示了如何使用 navList 标签来渲染一个支持二级下拉的菜单结构：

    <nav class="main-navigation">
    {% navList navs with typeId=1 %} {# 假设 typeId=1 是您的主导航类别 #}
    <ul>
        {%- for item in navs %} {# 遍历一级导航项 #}
            <li class="{% if item.IsCurrent %}active{% endif %}">
                <a href="{{ item.Link }}">{{item.Title}}</a>
                {%- if item.NavList %} {# 判断当前一级导航是否有子菜单 #}
                    <ul class="sub-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 %}
    </ul>
    {% endnavList %}
</nav>

    在这段代码中，{% navList navs with typeId=1 %} 会获取后台ID为1的导航类别下的所有导航数据。外层 for 循环遍历一级导航项，内层的 {%- if item.NavList %} 是判断当前主菜单项下是否存在子菜单的关键。如果存在，就会渲染一个 sub-menu 列表，并通过内层的 for 循环遍历并显示所有二级子菜单项。

    进一步拓展： 除了简单的子菜单，您还可以根据需求，在下拉菜单中显示更丰富的内容。例如，在二级菜单项下，您可以通过 categoryId=subItem.PageId 结合 archiveList 标签，直接显示该分类下的热门文章或产品列表，极大地提升了导航的实用性。在后台设置导航链接时，如果选择了“分类页面链接”，subItem.PageId 就会自动带有对应分类的ID，方便您在模板中调用。

关联不同类型内容：导航的灵活性

安企CMS的导航系统在内容关联方面表现出极高的灵活性。在后台配置导航链接时，您可以自由选择将导航项关联到：

  • 内置页面： 如首页或特定内容模型的列表页。
  • 具体的分类或单页面： 当您将一个下拉菜单项关联到某个文章分类、产品分类或特定的“关于我们”、“联系我们”等单页面时，系统会自动处理其URL。在模板中，您只需通过 {{item.Link}} 或 {{subItem.Link}} 就能正确引用这些页面的地址。如果需要，item.PageId 或 subItem.PageId 还能进一步帮助您在模板中获取该分类或单页面的详细信息，例如显示分类下的文章列表等。
  • 外部网站或自定义URL： 对于需要链接到外部资源或站内特定自定义URL的情况，也可以直接填写。

这种灵活的内容关联机制，让您可以根据网站的整体内容架构和用户访问习惯，打造出既清晰又富有信息量的导航菜单。

总结

通过安企CMS的导航管理功能，您可以方便快捷地创建并维护多级下拉菜单，将网站内容有效组织起来。从后台的导航类别管理、链接配置，到前端模板的 navList 标签应用，每一步都旨在提供高效且灵活的解决方案，帮助您的网站更好地服务用户，并获得更佳的在线表现。

常见问题 (FAQ)

  1. 导航菜单只能有两级吗？ 是的，安企CMS内置的导航管理功能目前原生支持最多两级菜单结构，即一个主菜单项和其下的一级下拉子菜单。这种设计是为了兼顾大部分网站的需求和用户体验的简洁性。如果您需要更深层次的导航结构，可能需要通过自定义模板或结合前端JS/CSS来实现，但这超出了系统原生支持的范围。

  2. 为什么我设置了二级菜单，但前台网站没有显示出来？ 这通常是因为前端模板文件没有正确地调用或渲染二级菜单的数据。请检查以下几点：

    • 模板标签是否正确使用： 确认您的模板文件中使用了 {% navList ... %} 标签，并且在其内部正确地遍历了 item.NavList 来显示子菜单项。
    • CSS样式问题： 即使数据被正确渲染，如果缺乏相应的CSS样式来控制下拉菜单的显示（例如，默认隐藏，鼠标悬停时显示），用户可能也无法看到。请确保您的CSS文件包含了处理下拉菜单显示/隐藏、布局等样式规则。
    • 缓存问题： 有时系统缓存或浏览器缓存可能导致更改未能及时显示，尝试清除安企CMS后台缓存和浏览器缓存。

  3. 我可以让二级菜单直接显示某个分类下的文章列表或产品列表吗？ 当然可以。在模板中，当您遍历到二级菜单项 subItem 时，