在网站运营中，清晰有效的导航系统是提升用户体验和网站专业度的关键。安企CMS（AnQiCMS）凭借其灵活的内容管理和强大的模板引擎，能够帮助我们轻松实现复杂的导航需求。今天，我们就来探讨如何在网站的导航栏中，不仅展示主分类，还能在鼠标悬停时，以下拉菜单的形式呈现该分类下的最新产品。

一、理解 AnQiCMS 的导航与内容管理基础

安企CMS的核心优势之一在于其模块化的内容管理体系。它允许我们为不同类型的内容（如“文章”和“产品”）定义不同的“内容模型”，并对这些内容进行精细的分类管理。网站的导航栏作为用户与网站互动的第一扇窗，其设计直接影响到用户能否快速找到所需信息。一个设计得当的导航，能有效引导用户，同时也有助于搜索引擎更好地理解网站结构，从而提升SEO表现。

要实现在导航栏中显示主分类及其最新产品，我们需要结合安企CMS的后台“导航设置”功能与前端模板的标签调用能力。

二、配置主分类导航项

首先，我们需要在安企CMS的后台管理系统中配置导航结构。

  1. 进入导航设置：登录安企CMS后台，前往“后台设置”菜单，选择“导航设置”项。
  2. 选择或创建导航类别：系统通常会有一个默认的导航类别，例如“顶部导航”。如果你有特殊需求，也可以通过“导航类别管理”新增一个导航类别。我们将以默认的“顶部导航”为例进行操作。
  3. 添加主分类导航链接：点击“导航链接设置”中的“添加链接”按钮，开始配置你的主分类导航项。
    • 显示名称：填写你希望在导航栏中显示的主分类名称，例如“电子产品”。
    • 上级导航：选择“顶级导航”，确保它作为一级菜单显示。
    • 链接类型：这是一个关键步骤，请选择“分类页面链接”。
    • 选择分类：在弹出的分类选择器中，务必选择你希望展示最新产品的主分类。例如，如果你的产品都归属于“产品模型”下的某个大分类（如“手机”、“电脑”等），请选择这个大分类。系统会识别这个分类的ID，这在后续的前端模板开发中非常重要。
  4. 保存设置：完成配置后，点击“确定”保存导航链接。此时，你的网站导航栏中应该会显示这个新添加的主分类链接。

三、实现下拉菜单中的最新产品展示

完成了后台配置，接下来我们需要修改前端模板文件，利用安企CMS强大的模板标签功能，动态地获取并展示最新产品。

安企CMS的模板文件通常位于你的网站根目录下的 /template/你的模板名/ 文件夹中。导航栏的代码通常在 partial/header.html 或直接在 index.html 等主模板文件中被 include 进来。你需要找到负责渲染主导航的代码块。

以下是一个示例代码片段，它展示了如何在导航项下方，通过嵌套循环和标签调用，实现下拉菜单中最新产品的展示：

{# 假设你的主导航类别ID是1，请根据实际情况调整 #}
{% navList navItems with typeId=1 %}
    <ul>
        {%- for mainNavItem in navItems %}
            <li {% if mainNavItem.IsCurrent %}class="active"{% endif %}>
                <a href="{{ mainNavItem.Link }}">{{mainNavItem.Title}}</a>

                {# 判断当前主导航项是否拥有子导航，即是否需要显示下拉菜单 #}
                {%- if mainNavItem.NavList %}
                    <ul class="sub-menu"> {# 这个ul是下拉菜单的容器，请根据你的CSS调整类名 #}
                        {# 遍历子导航项，这些子导航项通常也是分类 #}
                        {%- for subNavItem in mainNavItem.NavList %}
                            <li>
                                <a href="{{ subNavItem.Link }}">{{subNavItem.Title}}</a>

                                {# 关键步骤：获取并展示该子分类下的最新产品 #}
                                {# subNavItem.PageId 存储了子导航所关联的分类ID #}
                                {% if subNavItem.PageId > 0 %}
                                    <ul class="product-list-dropdown"> {# 最新产品列表的下拉容器 #}
                                        {# 使用 archiveList 标签获取最新产品 #}
                                        {% archiveList latestProducts with type="list" categoryId=subNavItem.PageId moduleId=2 order="id desc" limit="5" %}
                                            {% if latestProducts %}
                                                {% for product in latestProducts %}
                                                    <li><a href="{{product.Link}}" title="{{product.Title}}">{{product.Title}}</a></li>
                                                {% endfor %}
                                            {% else %}
                                                {# 当该分类下没有产品时，可以显示提示信息 #}
                                                <li>暂无最新产品</li>
                                            {% endif %}
                                        {% endarchiveList %}
                                    </ul>
                                {% endif %}
                            </li>
                        {% endfor %}
                    </ul>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endnavList %}

代码解释：

  1. {% navList navItems with typeId=1 %}：
    • 这个标签用于获取你在后台“导航设置”中配置的所有导航链接。navItems 是一个自定义的变量名，用来存储这些导航数据。
    • typeId=1 假定你的主导航（如顶部导航）的类别ID是1。如果你的导航类别ID不同，请根据实际情况进行调整。你可以在后台“导航设置”的“导航类别管理”中查看或编辑类别ID。
  2. **`mainNavItem.