在网站建设中,一个清晰、易用的导航菜单对于提升用户体验和网站整体结构至关重要。安企CMS(AnQiCMS)在导航菜单的管理上提供了灵活的设置,让用户可以轻松实现多级分类的嵌套展示,从而更好地组织网站内容,引导访客探索。

要实现多级分类的嵌套导航,我们主要通过安企CMS后台的“导航设置”功能来完成。这项功能位于“后台设置”区域,它不仅能管理网站的顶部主导航,还能根据需要创建各种自定义导航,比如页脚导航或侧边栏导航。

配置导航菜单:后台操作指引

首先,进入安企CMS后台,找到“后台设置”下的“导航设置”。在这里,您会看到一个“导航类别管理”区域。如果您的网站需要多个独立的导航区域(例如,一个主导航,一个底部链接导航),您可以在这里新增不同的导航类别。系统默认会有一个“默认导航”类别,我们可以直接使用或创建新的类别。

接下来是设置具体的导航链接。在“导航链接设置”部分,每一个导航项都是一个独立的链接。这里的关键在于“上级导航”这个选项。

  1. 创建一级导航: 当您创建一个新的导航链接时,如果希望它作为主菜单项(即顶级菜单),只需将“上级导航”设置为“顶级导航”即可。您可以为其指定“显示名称”、“链接类型”等信息。
  2. 创建二级导航(嵌套): 安企CMS支持最多两级的导航嵌套。要创建一个二级菜单项,您需要在“上级导航”选项中选择您刚刚创建的某个一级导航项。这样,这个新的链接就会嵌套在该一级导航之下,成为其子菜单。例如,如果您有一个名为“产品中心”的一级导航,您可以将“产品分类A”和“产品分类B”设置为“产品中心”的下级导航。

在设置链接类型时,安企CMS提供了三种常用选择:

  • 内置链接: 适用于链接到网站的特定功能页面,如首页、文章模型首页、产品模型首页等。
  • 分类页面链接: 这是将网站内容与导航结合的关键。您可以直接选择已创建的“文档分类”或“单页面”作为导航链接。例如,如果您在内容管理中创建了“新闻动态”分类,可以在导航设置中选择这个分类,让导航项直接链接到新闻列表页。
  • 外部链接: 允许您灵活地添加任何站内或站外的URL地址。

此外,“显示顺序”字段让您可以控制同一级别导航项的排列次序,数字越小通常越靠前,便于您根据网站布局调整菜单的展示顺序。

在网站前端展示多级导航:模板调用方法

完成了后台配置后,我们就需要将这些多级导航菜单呈现在网站页面上。这需要通过模板文件中的特定标签来调用。安企CMS采用了类似Django模板引擎的语法,对于变量使用双花括号 {{变量}},而逻辑控制标签则使用单花括号和百分号 {% 标签 %}

要显示导航菜单,您会用到 navList 标签。这个标签能够获取您在后台配置的导航列表,并支持多级嵌套的输出。

以下是一个典型的 navList 标签调用示例,它能展示两级导航:

{% navList navs %}
<ul>
    {%- for item in navs %} {# 遍历一级导航项 #}
        <li class="{% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
            {%- if item.NavList %} {# 如果存在子导航列表 #}
            <dl>
                {%- for inner in item.NavList %} {# 遍历二级导航项 #}
                    <dd class="{% if inner.IsCurrent %}active{% endif %}">
                        <a href="{{ inner.Link }}">{{inner.Title}}</a>
                    </dd>
                {% endfor %}
            </dl>
            {% endif %}
        </li>
    {% endfor %}
</ul>
{% endnavList %}

在这段代码中:

  • {% navList navs %} 调用了导航列表,并将结果赋值给 navs 变量。如果您在后台创建了多个导航类别,可以通过 with typeId=X 来指定调用特定的类别。
  • 外层的 {% for item in navs %} 循环用于遍历所有的一级导航项。每个 item 都代表一个导航链接,其 Title 是显示名称,Link 是链接地址。
  • {% if item.NavList %} 判断当前一级导航项是否包含子菜单。如果包含,item.NavList 会是一个包含所有二级导航项的数组。
  • 内层的 {% for inner in item.NavList %} 循环则用于遍历二级导航项。inner 也同样具有 TitleLink 等属性。
  • {% if item.IsCurrent %}active{% endif %} 这样的判断可以用于为当前页面对应的导航项添加 active 类,方便通过CSS样式高亮显示,提升用户体验。

通过这样的模板结构,您可以清晰地将后台配置的多级导航菜单呈现在网站页面上。如果您的导航项链接到的是具体的分类页面(如文章分类、产品分类),您甚至可以在二级导航项下进一步调用 archiveList 标签,展示该分类下的部分文章或产品,形成更丰富的内容展示效果。

安企CMS的导航设置旨在提供直观且功能强大的菜单管理方案。通过合理规划后台的导航结构和恰当地在模板中调用,您的网站将拥有一个既美观又高效的多级导航系统,有效提升用户在网站中的浏览体验。

常见问题 (FAQ)

1. 安企CMS导航菜单最多支持多少级嵌套? 安企CMS的导航菜单目前支持最多两级嵌套。这意味着您可以设置一级主菜单和其下方的二级子菜单。

2. 我如何将网站的“文章分类”或“产品分类”添加到导航菜单中? 在后台“导航设置”中创建或编辑导航链接时,选择“链接类型”为“分类页面链接”,然后从弹出的列表中选择您想要链接的“文档分类”或“单页面”即可。

3. 为什么我设置了二级菜单,但前端页面只显示了一级菜单? 这通常是由于模板文件没有正确地编写或配置来显示二级菜单。请检查您的模板代码中是否使用了类似 {% if item.NavList %} 这样的逻辑来判断并循环输出子菜单项,确保模板能够识别并渲染 item.NavList 中的内容。同时,也要确认后台的“上级导航”设置正确,确保二级菜单确实关联到了一级菜单。