网站的导航菜单,就像是网站的骨架和路标,它引导访客迅速找到所需信息,是用户体验和网站信息架构的核心。一个清晰、直观的导航系统不仅能提升用户满意度,对于搜索引擎优化(SEO)也至关重要。安企CMS(AnQiCMS)在设计之初就充分考虑了这一点,提供了灵活且易于操作的导航菜单管理功能,让网站运营者能够轻松构建和维护网站的导航体系。

搭建网站主导航:从零到一的实践

要在安企CMS中创建和管理网站导航,我们首先需要进入系统的后台管理界面。在左侧的菜单中找到并点击“后台设置”,接着选择“导航设置”。这里就是我们掌控网站菜单的地方。

安企CMS将导航菜单进行了分类管理,默认会有一个“默认导航”类别,这通常就是我们网站的主导航。如果你有特殊需求,比如想在页脚或侧边栏放置一套独立的导航菜单,可以通过“导航类别管理”来新增类别,例如创建“页脚导航”或“侧边栏导航”,这大大增加了导航布局的灵活性。

接下来,我们就可以开始添加导航链接了。点击“导航链接设置”,你会看到一个添加或编辑导航项的表单。

  • 显示名称:这是导航菜单上直接展现给访客的文字,比如“首页”、“产品中心”、“关于我们”。你可以根据实际需要自由命名。
  • 子标题名称:如果你希望在导航中显示双语标题,或者为标题添加一些额外的简短说明,这个字段就能派上用场。
  • 导航描述:这里可以为导航项提供更详细的描述,虽然通常不在导航条上直接显示,但在某些主题设计中可能会作为鼠标悬停提示等形式出现。
  • 链接类型:这是定义导航指向何处的核心。安企CMS提供了三种灵活的链接类型:
    • 内置链接:包括“首页链接”、各种“内容模型首页”(如文章模型首页、产品模型首页等),这些是系统预设的常用入口。
    • 分类页面链接:你可以选择网站中已存在的文章分类、产品分类或单页面作为导航目标。这意味着你的内容结构可以直接映射到导航上。
    • 外部链接:如果你想链接到站内某个特定页面,或者外部网站,可以使用此选项。只需输入完整的URL地址即可。
  • 显示顺序:这个字段用来控制导航项的排列顺序。通常,数字越小,导航项在菜单中就越靠前。你可以通过调整这些数字来方便地重新排序。

通过上述步骤,我们就能逐一添加网站的一级导航菜单项。

实现二级导航的巧妙展示

安企CMS原生支持二级导航菜单的创建和展示,这对于构建层次清晰的网站结构至关重要。实现二级导航的关键在于利用“上级导航”这个字段。

在添加新的导航链接时,如果你希望它作为某个一级导航下的子菜单,只需在“上级导航”字段中选择对应的一级导航即可。例如,如果你有一个名为“产品中心”的一级导航,而你想在其下添加“产品A”、“产品B”等子菜单,那么在创建“产品A”和“产品B”这两个导航链接时,将它们的“上级导航”设置为“产品中心”。安企CMS会自动识别这种层级关系。

后台的设置仅仅是定义了导航的逻辑结构,要在网站前端页面上实际展示出二级导航的效果,还需要模板层面的支持。安企CMS的模板引擎提供了强大的 navList 标签,使得前端调用变得非常便捷。

在你的模板文件中(通常是 header.html 或包含主导航的部分),你可以使用 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> {# 或者使用ul/ol,根据你的HTML结构来 #}
                {%- 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 %}

在这段代码中:

  1. {% navList navs %} 获取了后台配置的所有导航菜单,并将其赋值给 navs 变量。
  2. 第一个 for 循环遍历 navs,渲染一级导航项。item.Titleitem.Link 分别用于显示标题和链接。item.IsCurrent 则可以用来判断当前页面是否是该导航项,以便添加样式。
  3. {%- if item.NavList %} 是实现二级导航的关键。item.NavList 是一个布尔值,如果当前一级导航项包含子导航,它就会是 true
  4. 如果 item.NavListtrue,则内部的第二个 for 循环会遍历该一级导航项的所有子导航 (item.NavList),渲染出二级菜单的内容。

通过这种嵌套结构,你的网站导航就能清晰地展示出一级和二级菜单,从而提供更加丰富和友好的用户浏览体验。此外,你还可以根据需求在二级导航中进一步嵌入内容分类下的文章列表,或者更深层的分类,充分利用安企CMS内容模型的灵活性。

导航菜单的维护与优化

创建好导航菜单并非一劳永逸,随着网站内容的增多和业务发展,导航菜单也需要持续的维护和优化。在安企CMS中,你可以随时回到“导航设置”页面,对已有的导航项进行编辑、删除或调整顺序。例如,通过修改“显示顺序”,可以快速调整菜单项的位置,无需触碰任何代码。

在进行导航设计时,考虑到搜索引擎优化也很重要。使用有意义的关键词作为导航名称,确保链接的可访问性,以及避免过深的导航层级(原生两级已经非常友好),都有助于提升网站的SEO表现。安企CMS内置的伪静态和SEO工具也为导航链接的优化提供了坚实的基础。

总而言之,安企CMS提供了一套直观而强大的导航菜单管理系统,无论是简单的单层菜单,还是复杂的两级导航,都能在后台轻松配置,并通过灵活的模板标签在前端完美呈现。这使得网站的结构规划和内容呈现变得高效且富有创意。


常见问题解答 (FAQ)

1. 安企CMS是否支持创建三级或更多级的导航菜单? 安企CMS在后台导航设置中原生支持两级导航菜单的创建和管理。虽然没有直接提供三级或更多级的后台配置入口,但你可以通过结合分类管理功能和自定义模板标签(例如在二级导航下再次调用 categoryList 来展示其下级分类),实现更复杂的导航结构,但这需要一定的模板开发能力。

2. 如何调整导航菜单的显示顺序? 在安企CMS后台的“导航设置”页面,每个导航链接都有一个“显示顺序”字段。通过调整这个字段中的数字大小,你可以控制导航菜单项的排列顺序。通常,数字越小,该导航项在菜单中就会显示得越靠前。

3. 我可以在页脚或侧边栏设置不同于主导航的菜单吗? 完全可以。安企CMS提供了“导航类别管理”功能。除了默认的主导航类别外,你可以根据需要创建新的导航类别,例如“页脚导航”、“侧边栏导航”等。然后,为这些不同的导航类别分别添加和管理链接,并在模板中通过指定 typeId 参数的 navList 标签来调用它们。