AnQiCMS如何自定义导航菜单并在前端实现多级下拉显示？

在网站运营中，清晰、直观的导航菜单是用户体验的核心，也是内容组织和推广的关键。安企CMS（AnQiCMS）深知这一点，为您提供了灵活强大的导航菜单自定义功能，并支持在前台实现多级下拉显示，让您的网站结构更加清晰，内容触达更加便捷。

接下来，我们将一起了解如何在AnQiCMS中轻松设置并应用这些导航。

第一步：在后台创建和管理导航菜单

要构建一个有层次感的导航菜单，我们首先需要进入AnQiCMS的后台进行配置。

1. 进入导航设置界面：登录您的AnQiCMS后台后，请在左侧菜单中找到并点击“后台设置”，然后选择“导航设置”。这里是管理网站所有导航链接的中心。

2. 管理导航类别：AnQiCMS允许您创建不同位置的导航，比如顶部主导航、页脚导航或侧边栏导航。系统默认会有一个“默认导航”类别。如果您需要为网站的不同区域设置独立的导航，可以在“导航类别管理”中添加新的类别，例如“页脚导航”。这有助于您更清晰地组织和管理不同用途的菜单项。

3. 添加导航链接：

   • 设置基本信息：点击“添加导航链接”，您会看到一系列可供填写的选项。首先是“显示名称”，这是菜单项在前台显示给用户的文字，您可以根据需要灵活命名。如果您的设计需要，还可以填写“子标题名称”或“导航描述”，它们可以在前端模板中被调用以提供额外信息。
   • 选择链接类型：AnQiCMS提供了三种灵活的链接类型：
     • 内置链接：包含了网站首页以及文章、产品等内容模型的首页链接，方便您快速引用网站核心页面的入口。
     • 分类页面链接：您可以直接选择已创建的文章分类、产品分类或单页面作为导航链接。这非常适合将您的内容分类直接集成到主导航中。
     • 外部链接：如果您需要链接到站内某个自定义URL，或者是外部网站的页面，可以选择此类型并手动输入完整的URL地址。
   • 构建多级菜单（下拉菜单）：要实现多级下拉菜单，关键在于设置“上级导航”。在添加新的导航链接时，如果这个链接是某个一级导航的子菜单项，您只需在“上级导航”下拉框中选择其对应的一级菜单。目前，AnQiCMS的导航列表支持最多两级结构，即一个主菜单项下可以有一个子菜单层级。
   • 调整显示顺序：通过设置“显示顺序”的数字，您可以轻松调整菜单项的排列位置。数字越小，该菜单项在前台显示时越靠前。

通过以上步骤，您就可以在后台构建出清晰、有序且带有下拉层级的导航菜单结构了。

第二步：在前台模板中实现多级下拉显示

后台菜单配置完成后，下一步就是在网站的前端模板中将这些结构化的导航数据呈现出来，并赋予它们美观的下拉效果。

1. 确定模板文件位置：通常，网站的顶部导航代码会放置在模板目录（如/template/您的模板目录/）下的公共部分文件里，例如 bash.html 或 header.html。您需要编辑这些文件来插入导航代码。

2. 使用 navList 标签获取导航数据：AnQiCMS提供了一个专门用于获取导航列表数据的navList标签。您只需在模板中调用它，就能获取到后台配置好的所有导航菜单数据：

   {% navList navs with typeId=1 %}
       {# 这里的 navs 变量将包含您后台配置的导航数据。typeId=1 默认指主导航类别 #}
       {# 如果您创建了其他导航类别，比如ID为2的“页脚导航”，则改为 typeId=2 #}
       <ul class="main-menu"> {# 这是一个示例性的HTML结构，您需要根据您的设计自定义 #}
       {% for item in navs %}
           <li class="menu-item {% if item.NavList %}has-dropdown{% endif %} {% if item.IsCurrent %}active{% endif %}">
               <a href="{{ item.Link }}">{{ item.Title }}</a>
               {# 检查当前菜单项是否有子菜单，如果有，则渲染子菜单 #}
               {% if item.NavList %}
                   <ul class="submenu"> {# 子菜单的HTML结构 #}
                   {% for sub_item in item.NavList %}
                       <li class="submenu-item {% if sub_item.IsCurrent %}active{% endif %}">
                           <a href="{{ sub_item.Link }}">{{ sub_item.Title }}</a>
                       </li>
                   {% endfor %}
                   </ul>
               {% endif %}
           </li>
       {% endfor %}
       </ul>
   {% endnavList %}
   

3. 理解模板代码的关键逻辑：

   • {% navList navs %}：这行代码会从后台获取您配置的导航数据，并将其存储在 navs 这个变量中。
   • {% for item in navs %}：这是一个循环，用于遍历所有的一级导航菜单项。
   • {{ item.Link }} 和 {{ item.Title }}：分别输出当前菜单项的链接地址和显示名称。
   • {% if item.NavList %}：这是实现下拉菜单的关键判断。item.NavList 会包含当前菜单项的所有子菜单项。如果这个列表不为空，说明存在二级菜单，我们就渲染一个下拉容器。
   • {% for sub_item in item.NavList %}：这个内层循环用于遍历并显示所有二级子菜单项的链接和名称。
   • {% if item.IsCurrent %}active{% endif %}：这是一个非常有用的判断，它会检查当前菜单项是否对应用户正在访问的页面。如果是，您就可以给它添加一个active类名，通过CSS来高亮显示，提升用户体验。

4. 结合CSS和JavaScript实现下拉效果：AnQiCMS的模板标签负责提供导航的数据结构和内容，但实际的下拉动画、hover效果和整体美观度，都需要依靠您编写的CSS样式和可能需要的JavaScript脚本来实现。例如，您可以编写CSS规则来控制.submenu在鼠标悬停在.has-dropdown上时显示，并添加一些过渡动画。

实用技巧与注意事项

• 多站点导航的调用：如果您的AnQiCMS部署了多个站点，并且希望在某个站点的模板中调用其他站点的导航菜单，可以在navList标签中添加siteId参数，例如 {% navList navs with typeId=1 siteId=2 %}，这里的siteId=2表示调用ID为2的站点的导航。
• SEO优化：在设置导航链接时，尽量选择能够准确描述页面内容的“显示名称”，并配合AnQiCMS强大的伪静态规则功能，生成对搜索引擎友好的URL结构。
• 及时更新缓存：后台对导航菜单进行任何修改后，请记得点击后台顶部的“更新缓存”按钮，确保前台页面能立即显示最新的更改。 *