网站导航是用户与网站互动的第一扇窗，清晰、直观的导航设计能极大提升访客的使用体验，并有效引导他们在网站中找到所需信息。在AnQiCMS中，设置网站导航菜单并支持多级下拉显示，是一个既灵活又实用的功能。接下来，我们将一起探索如何在AnQiCMS中实现这一目标。

构建网站导航的后台逻辑结构

要在AnQiCMS中创建和管理导航菜单，您需要进入后台的“导航设置”区域。这里不仅能定义主导航，还能为网站的不同区域（如页脚、侧边栏）设置独立的导航菜单，以满足多样化的布局需求。

首先，请登录AnQiCMS的后台管理界面。在左侧菜单栏中，点击“后台设置”，然后选择“导航设置”。进入这个界面后，您会看到一个导航列表，这里是所有导航菜单的“家”。

灵活管理导航类别

AnQiCMS允许您创建多个“导航类别”。这就像为不同目的的菜单设置不同的容器。例如，您可以有一个名为“主导航”的类别，用于网站顶部的全局菜单；另一个名为“页脚导航”的类别，用于底部的信息链接；甚至可以创建一个“侧边栏导航”用于特定页面的辅助菜单。如果默认的“默认导航”类别不够用，您可以通过“自定义导航类别”功能轻松添加新的类别。这大大增强了网站布局的灵活性。

逐一设置导航链接

接下来是设置具体的导航链接。每条导航链接都有自己的属性，这些属性共同决定了它在前台如何显示和链接到哪里。

  • 上级导航： 这是实现多级下拉菜单的关键。您可以选择将一个链接设置为“顶级导航”，使其作为主菜单项；也可以将其设置为某个现有导航的“子导航”，这样它就会在鼠标悬停或点击父级菜单时下拉显示。AnQiCMS目前支持最多两级的导航链接，也就是说，您可以在顶级菜单下再设置一层下拉菜单。
  • 显示名称： 这是访客在网站上看到的导航文字，您可以根据内容自由命名，不必与链接内容完全一致。
  • 子标题名称与导航描述： 如果您的设计需要，可以为导航添加额外的子标题或描述文字，用于提供更丰富的上下文信息。
  • 链接类型： AnQiCMS提供了三种灵活的链接类型：
    • 内置链接： 适用于链接到网站的固定功能页，例如首页、文章模型首页、产品模型首页或其他自定义模型首页。选择这些选项后，系统会自动生成对应的链接。
    • 分类页面链接： 方便地链接到您网站中已创建的任何分类页面或单页面（如“关于我们”、“联系我们”等）。
    • 外部链接： 提供了最大的自由度，您可以输入任何内部或外部的URL地址。这对于链接到外部合作伙伴网站或特定推广页面非常有用。
  • 显示顺序： 通过设置数字大小来控制导航链接的排列顺序，数字越小，显示越靠前。

通过以上步骤，您就为网站导航构建好了完整的逻辑骨架。这些在后台配置好的数据，接下来需要通过模板标签呈现在网站前台。

在模板中实现多级下拉导航显示

在AnQiCMS中，网站的显示逻辑由模板文件控制。要将后台设置好的多级导航菜单呈现在网站上，您需要在模板中运用 navList 标签。这个标签会获取您在后台配置的导航数据，并允许您通过循环将其渲染出来。

通常，导航菜单的代码会放置在网站的公共头部模板文件（如 partial/header.html 或 bash.html）中。

以下是一个实现两级下拉导航菜单的简化模板代码示例：

{# 使用 navList 标签获取后台配置的导航数据 #}
{% navList navs with typeId=1 %} {# typeId=1 默认获取主导航类别，您可以根据实际情况修改 #}
<ul>
    {# 遍历顶级导航项 #}
    {%- for item in navs %}
        {# 根据 IsCurrent 属性判断当前导航项是否是当前页面，以添加活跃（active）样式 #}
        <li class="{% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
            
            {# 检查当前导航项是否有子导航（即是否有下拉菜单） #}
            {%- if item.NavList %}
            <ul class="submenu"> {# 子导航菜单的容器，您可以自定义class名 #}
                {# 遍历子导航项 #}
                {%- for inner in item.NavList %}
                    <li class="{% if inner.IsCurrent %}active{% endif %}">
                        <a href="{{ inner.Link }}">{{inner.Title}}</a>
                    </li>
                {% endfor %}
            </ul>
            {% endif %}
        </li>
    {% endfor %}
</ul>
{% endnavList %}

在这段代码中：

  • {% navList navs with typeId=1 %} 会从后台获取 typeId 为1（通常是主导航）的导航数据，并将其赋值给 navs 变量。
  • 外层的 {% for item in navs %} 循环用于显示顶级导航菜单项。
  • item.IsCurrent 用于判断当前页面是否对应这个导航项，以便前端通过CSS样式突出显示。
  • {% if item.NavList %} 是关键，它检查当前顶级导航项下是否有子导航。如果有，就渲染一个 <ul> 标签作为下拉菜单的容器。
  • 内层的 {% for inner in item.NavList %} 循环则用于显示下拉菜单中的子导航项。

请注意，上述代码只提供了基本的HTML结构。要实现美观的下拉效果，您还需要编写相应的CSS样式和JavaScript代码（例如，控制鼠标悬停时显示下拉菜单）。

总结要点

掌握导航设置的这些要点，能帮助我们更高效地管理和优化网站结构：

  • 两级深度限制： AnQiCMS导航菜单目前支持一级主菜单和一级下拉子菜单，总共两级深度。在规划导航结构时请注意这一点。
  • 显示顺序： 通过精确设置每个导航链接的显示顺序，确保菜单项按照您的意愿排列。
  • 灵活的链接类型： 充分利用内置链接、分类页面链接和外部链接三种类型，满足各种页面跳转需求。
  • Active状态标记： item.IsCurrent 属性是实现当前页面导航高亮显示的关键，它能显著提升用户体验。

AnQiCMS在导航菜单的设置和显示上提供了直观而强大的功能，无论您是运营中小企业官网，还是管理个人博客，都能轻松构建出用户友好且功能完善的网站导航系统。

常见问题 (FAQ)

1. AnQiCMS的导航菜单是否支持超过两级的下拉显示？ 很抱歉，AnQiCMS目前默认支持最多两级的导航菜单：一个顶级菜单和其下的一级下拉子菜单。如果您需要更深层次的导航结构，可能需要考虑通过自定义开发或调整内容组织方式来模拟实现。

2. 如何让导航菜单在访问当前页面时显示为“活跃”（active）状态？ 在模板中渲染导航时，每个导航项对象（item 和 inner）都带有一个 IsCurrent 属性。这个属性是一个布尔值（true/false），当导航项链接与当前访问的页面URL匹配时，IsCurrent 为 true。您可以在HTML标签上（例如 <li> 或 <a>）根据 IsCurrent 的值添加一个 active 类，然后通过CSS为这个 active 类定义高亮样式。

3. 我可以为网站的不同区域（例如头部和页脚）设置不同的导航菜单吗？ 当然可以。AnQiCMS支持“导航类别管理”功能。您可以在后台创建多个导航类别（如“主导航”、“页脚导航”），然后分别在这些类别下添加对应的导航链接。在模板中调用时，只需在 navList 标签中使用 typeId 参数指定您想要渲染的导航类别即可。