网站的顶部导航菜单是用户与内容互动的第一道关卡,它直接影响着用户对网站结构和内容的理解。一个设计合理、易于操作的导航菜单能显著提升用户体验和网站的专业度。安企CMS(AnQiCMS)提供了灵活而强大的功能,帮助我们轻松自定义和控制网站的顶部导航菜单,以满足不同的设计和运营需求。
理解导航类别与结构
在安企CMS中,导航菜单的管理围绕着“导航类别”这一核心概念。系统默认提供了一个“默认导航”类别,但您完全可以根据实际需求创建更多导航类别,例如“页脚导航”、“侧边栏导航”或是“移动端专属导航”等。这种分类管理让您可以为网站不同区域配置独立的菜单,保持网站布局的整洁和功能的专一。
要创建一个新的导航类别,只需进入安企CMS后台的“后台设置”区域,找到“网站导航设置”。在这里,您可以管理现有的导航类别,并添加新的类别。一旦类别创建完成,就可以开始向其中添加具体的导航链接了。
配置导航链接:内容与显示
为导航类别添加链接是自定义菜单的关键一步。每个导航链接都承载着引导用户前往特定页面的职责,并允许您对其显示方式进行精细控制。
核心配置项包括:
- 上级导航: 这是实现多级下拉菜单的基础。安企CMS支持两级导航链接,这意味着您可以设置一个链接作为主菜单项,再为其指定子菜单项。选择“顶级导航”则表示当前链接是主菜单项,而将其关联到某个现有菜单项下,则会使其成为子菜单。
- 显示名称: 这是导航链接在前台页面上显示的文字。您可以自由命名,无需与链接指向的页面标题完全一致,以优化用户视觉效果和点击诱惑力。
- 子标题名称与导航描述: 如果您的设计需要,可以为导航链接添加额外的子标题或描述信息,以提供更丰富的内容预览,这在某些展示型的网站设计中非常有用。
- 显示顺序: 通过设置数字来控制菜单项的排列顺序。数字越小,菜单项显示得越靠前。这让您可以轻松调整菜单项的位置,而无需重新创建。
链接类型:
安企CMS提供了三种灵活的链接类型,确保您可以指向网站内外的任何位置:
- 内置链接: 包含网站的首页、不同内容模型的首页(如文章模型首页、产品模型首页)等常用链接。选择这些内置选项可以确保链接的稳定性和准确性。
- 分类页面链接: 允许您将导航链接直接指向网站中已有的分类页面或独立页面。当您想在导航中突出某个产品分类或“关于我们”这类独立页面时,这个选项非常实用。
- 外部链接: 提供了最大的灵活性,您可以输入任何有效的URL地址,无论是站内其他页面的自定义链接,还是外部网站的链接,都可以轻松集成到您的导航菜单中。
在模板中控制导航菜单的显示
配置好导航链接后,我们需要在网站的前端模板中调用并显示这些菜单。安企CMS使用 navList 标签来实现这一功能。
假设您已经创建了一个用于顶部导航的类别,其类别ID为 1。您可以在模板文件中使用如下代码来展示两级菜单:
{% navList navs with typeId=1 %} {# 假设1是您的顶部导航类别ID #}
<nav class="main-navigation">
<ul>
{% for item in navs %}
<li class="{% if item.IsCurrent %}active{% endif %}"> {# 使用IsCurrent判断是否为当前页面,添加active样式 #}
<a href="{{ item.Link }}">{{ item.Title }}</a>
{% if item.NavList %} {# 如果有子导航,则渲染第二级菜单 #}
<ul class="sub-menu">
{% for subItem in item.NavList %}
<li class="{% if subItem.IsCurrent %}active{% endif %}">
<a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
{% endnavList %}
在这段模板代码中:
{% navList navs with typeId=1 %}指定了要调用的导航类别(这里是ID为1的类别)。{% for item in navs %}循环遍历主菜单项。{{ item.Link }}和{{ item.Title }}分别输出菜单项的链接地址和显示名称。{% if item.IsCurrent %}用于判断当前菜单项是否与用户正在访问的页面匹配,通常用于高亮显示当前所在的导航项。{% if item.NavList %}检查当前主菜单项下是否有子菜单。如果有,则再次通过{% for subItem in item.NavList %}循环渲染二级子菜单。
通过这样的机制,安企CMS将后台配置的灵活性与前端模板的展示控制完美结合,让您可以根据网站的设计风格和交互需求,自由定制导航菜单的样式和功能。
常见问题 (FAQ)
Q1: 为什么我设置了导航链接,但在网站前台却没有显示出来?
A1: 首先,请确认您在后台“网站导航设置”中,已经将导航链接添加到了正确的“导航类别”下,并且该导航类别ID在模板中通过 typeId 参数被正确调用。其次,检查您添加的导航链接是否包含了所有必要的字段(如显示名称、链接地址),并且“显示顺序”是否合理。最后,确保您的模板文件(例如 base.html 或特定的导航区块文件)中正确使用了 navList 标签来渲染该导航类别。
Q2: 我想创建一个三级导航菜单,安企CMS支持吗?
A2: 安企CMS的后台管理界面中,导航链接的“上级导航”设置默认支持两级结构(即主菜单项和其下的子菜单项)。如果需要实现更深层次的三级甚至多级导航,你需要在模板代码中进行手动调整,通过判断 subItem.NavList(即二级菜单项的子菜单)是否存在来额外渲染,但这通常需要更复杂的CSS和JavaScript支持,并且可能会影响用户体验,建议慎重考虑。
Q3: 如何让某个导航链接点击后在新窗口打开,而不是当前页面?
A3: 安企CMS后台目前没有直接设置导航链接在新窗口打开的选项。您需要在模板文件中,手动修改 <a> 标签,添加 target="_blank" 属性来实现。例如,将 <a> 标签修改为 <a href="{{ item.Link }}" target="_blank">{{ item.Title }}</a>,这样点击后链接就会在新窗口中打开。