网站导航是用户浏览网站的地图，它不仅引导用户找到所需信息，更是网站结构和用户体验的集中体现。在安企CMS中，自定义和管理网站的导航菜单，包括它们的显示顺序和层级关系，是一项灵活且高效的操作。无论是为了优化用户体验，还是为了更好地支持内容营销和SEO策略，安企CMS都提供了强大而直观的工具。

接下来，我们将一起探索如何在安企CMS中精细化定制你的网站导航。

一、后台操作：构建和管理导航菜单的骨架

网站导航的设置始于安企CMS的后台管理界面。进入后台，你会发现“后台设置”菜单下有一个“导航设置”选项，这里就是你创建和管理所有导航菜单的控制中心。

1. 导航类别管理：定义不同的菜单区域

网站的不同位置，比如页面顶部的主导航、页脚的辅助导航、或者侧边栏的功能导航，往往需要展示不同的菜单。安企CMS充分考虑了这种多样性，提供了“导航类别管理”功能。

默认情况下，系统会有一个“默认导航”类别。如果你想为页脚创建一个独立的菜单，可以点击“新增导航类别”，将其命名为“页脚导航”或其他任何你方便识别的名称。这样，你就可以根据网站的不同展示区域，创建和管理多套相互独立的导航菜单了。

2. 导航链接设置：填充菜单内容与层级

在选择了或创建了导航类别后，你就可以开始为这个菜单添加具体的导航链接了。每个导航链接都有丰富的配置选项，让你能精确控制其行为和外观。

  • 上级导航：确立层级关系 这是控制菜单层级关系的关键。如果你要添加一个主菜单项（一级菜单），通常会选择“顶级导航”。而如果你想创建一个二级子菜单，比如在“关于我们”下面添加“公司简介”，那么在添加“公司简介”时，就选择“关于我们”作为它的“上级导航”。目前安企CMS支持两级导航链接，即主菜单及其下一级子菜单。

  • 显示名称、子标题名称与导航描述：丰富展示信息 “显示名称”是导航链接在前台页面上呈现给用户的文字。你可以灵活设置，使其更具吸引力。如果你的网站需要更丰富的信息展示，例如同时显示中文和英文名称，或者为某个菜单项提供简短的说明，那么“子标题名称”和“导航描述”就能派上用场了。它们能让你的导航不仅清晰，还能传达更多信息。

  • 链接类型：指向不同目标 安企CMS提供了三种主要的链接类型，以满足你将导航指向不同内容的需要：

    • 内置链接： 这种类型可以直接指向网站的首页、文章模型首页、产品模型首页，或其他自定义模型的首页。这对于快速添加核心页面的入口非常方便。
    • 分类页面链接： 这是最常用的链接类型之一，允许你选择已经创建的文档分类（如“新闻动态”、“产品中心”）或单个页面（如“联系我们”、“服务介绍”）作为导航目标。系统会自动生成对应的链接。
    • 外部链接： 当你需要将用户引导到站外的其他网站，或者一些非安企CMS管理的站内页面时，可以使用外部链接。只需填写完整的URL地址即可。

  • 显示顺序：自定义排列次序 为了让导航菜单项按照你期望的顺序排列，你可以通过“显示顺序”字段进行控制。这个字段接受数字，数字越小，该菜单项在同级菜单中的显示位置就越靠前。比如，如果你想让“关于我们”排在“产品中心”之前，只需将“关于我们”的显示顺序设置为一个比“产品中心”更小的数字即可。

通过上述设置，你就可以在后台为网站的不同位置构建出结构清晰、内容丰富的导航菜单骨架了。

二、前端展示：让导航菜单在网站上“活”起来

在后台精心设置好导航菜单后，还需要通过模板标签将其调用并渲染到网站的前端页面上。安企CMS采用类似Django模板引擎的语法，提供了简洁高效的标签来完成这项任务。

1. navList 标签：导航数据的心脏

安企CMS提供了一个非常核心且实用的模板标签——navList，它专门用于调用后台配置的导航数据。

你可以这样使用它：

{% navList navs with typeId=1 %}
    {# 你的导航循环内容 #}
{% endnavList %}

这里的 navs 是你为导航数据定义的变量名，你可以根据自己的喜好来命名。typeId=1是一个关键参数，它告诉系统你要调用哪个“导航类别”的数据。默认的“默认导航”通常对应 typeId=1，如果你在后台创建了名为“页脚导航”的新类别，其typeId可能为2或更高，需要根据实际情况替换。

2. 循环遍历与层级显示

navList标签会返回一个包含所有导航项的数组对象。你需要使用for循环来遍历这些导航项并进行渲染：

<ul class="main-nav">
    {% navList navs with typeId=1 %}
        {% for item in navs %}
            <li class="{% if item.IsCurrent %}active{% endif %}">
                <a href="{{ item.Link }}">{{ item.Title }}</a>
                {% if item.NavList %} {# 判断是否有子导航 #}
                <dl class="sub-nav">
                    {% for subItem in item.NavList %}
                        <dd class="{% if subItem.IsCurrent %}active{% endif %}">
                            <a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
                        </dd>
                    {% endfor %}
                </dl>
                {% endif %}
            </li>
        {% endfor %}
    {% endnavList %}
</ul>

在这个示例中：

  • {% for item in navs %} 遍历主导航项。
  • item.Link 和 item.Title 分别用于输出导航链接和显示名称。
  • {% if item.IsCurrent %}active{% endif %} 是一个非常实用的技巧，它会检查当前导航项是否与用户正在访问的页面匹配。如果匹配，就会添加active这个CSS类，你可以利用这个类来设计当前页面的