如何自定义网站的顶部导航菜单，并控制其显示
网站的顶部导航菜单是用户与内容互动的第一道关卡，它直接影响着用户对网站结构和内容的理解。一个设计合理、易于操作的导航菜单能显著提升用户体验和网站的专业度。安企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>，这样点击后链接就会在新窗口中打开。