如何显示网站导航菜单,并支持多级下拉导航?

作为一名资深的安企CMS网站运营人员,我深知一个组织良好、易于使用的导航菜单对于网站的用户体验和内容发现至关重要。安企CMS提供了强大且灵活的导航管理功能,不仅能帮助我们轻松设置网站的主菜单,还能够支持多级下拉导航,以满足复杂的网站结构需求。

后台导航配置:构建菜单结构

在安企CMS中,导航菜单的设置首先从后台管理界面开始。我们需要访问后台首页,然后进入后台设置,并选择网站导航设置。这里是我们管理所有网站导航链接的核心区域。

首先,安企CMS允许我们根据不同的布局需求创建多个导航类别。例如,我们可以为主导航、页脚导航或侧边栏导航分别设置独立的类别。这通过在“导航类别管理”中新增类别来完成,每个类别都有其独特的typeId用于后续模板调用。通过这种方式,我们可以为网站的不同区域定义完全独立的菜单结构,极大地增加了网站布局的灵活性。

在选择或创建导航类别后,我们便可以添加具体的导航链接。每个链接都可以设置“显示名称”,这是前端页面上显示的菜单文字;“子标题名称”和“导航描述”则可以根据需要进行填充,以适应更复杂的设计需求。核心在于“链接类型”的选择,安企CMS支持三种类型的链接:

  • 内置链接:例如首页链接、文章模型首页、产品模型首页等,这些是系统预设的常用链接。
  • 分类页面链接:我们可以选择已有的文章分类、产品分类或单页面作为导航链接,系统会自动生成对应的链接地址。
  • 外部链接:这提供了极大的灵活性,我们可以手动输入任何自定义的URL,无论是站内链接还是外部网站链接。

要实现多级下拉导航,关键在于利用“上级导航”字段。在添加或编辑导航链接时,如果选择一个已存在的一级导航项作为其“上级导航”,那么这个新链接就会成为该一级导航下的子菜单项。安企CMS原生后台导航设置支持最多两级导航链接,即一个主菜单项下一级子菜单。这意味着我们可以轻松构建“主菜单 -> 下拉子菜单”的结构,这足以应对绝大多数网站的层级展示需求。通过“显示顺序”字段,我们可以灵活调整导航项的排列次序,数字越小越靠前,方便我们进行精细化控制。

前端模板调用:呈现动态导航

配置好后台导航后,接下来需要在前端模板文件中调用并显示这些菜单。安企CMS的模板引擎类似Django语法,模板文件通常位于网站根目录下的/template目录中。我们可以在这里编写HTML结构,并通过安企CMS提供的标签来动态获取后台配置的导航数据。

核心的模板标签是navList。它用于获取指定导航类别的所有链接数据。例如,要获取默认导航类别的菜单数据,我们可以这样调用:

{% navList navs %}
    {# 导航HTML结构将在这里生成 #}
{% endnavList %}

navList标签会返回一个包含导航项的数组对象(在上面的示例中是navs)。每个导航项(例如item变量)都可能包含以下关键字段:

  • Title:导航项的显示名称。
  • Link:导航项的链接地址。
  • IsCurrent:一个布尔值,指示当前导航项是否是当前页面。
  • NavList:这是实现多级导航的关键,如果当前导航项有子菜单,NavList将是一个包含子菜单项的数组。

为了构建多级下拉导航的HTML结构,我们可以通过嵌套的for循环来遍历主菜单项及其子菜单项。当一个主菜单项的item.NavList字段存在时,就意味着它有子菜单,我们便可以渲染第二级菜单。

以下是一个基本的代码示例,展示如何在模板中构建一个两级下拉导航菜单:

<ul class="main-nav"> {# 主菜单容器,这里通常是header.html的一部分 #}
    {% navList navs %}
        {%- for item in navs %} {# 遍历一级导航项 #}
            <li class="nav-item {% if item.IsCurrent %}active{% endif %}">
                <a href="{{ item.Link }}">{{item.Title}}</a>
                {%- if item.NavList %} {# 判断当前一级导航项是否有子菜单 #}
                <ul class="dropdown-menu"> {# 子菜单容器 #}
                    {%- for inner in item.NavList %} {# 遍历二级导航项 #}
                        <li class="dropdown-item {% if inner.IsCurrent %}active{% endif %}">
                            <a href="{{ inner.Link }}">{{inner.Title}}</a>
                        </li>
                    {% endfor %}
                </ul>
                {% endif %}
            </li>
        {% endfor %}
    {% endnavList %}
</ul>

请注意,为了实现美观的下拉效果和响应式布局,上述代码主要提供了导航的HTML结构。您还需要编写相应的CSS样式和JavaScript交互代码。这通常涉及到