如何在网站主导航中显示一级和二级菜单及其链接？

作为一名经验丰富的网站运营人员，我深知一个清晰、直观的导航系统对网站用户体验和内容发现的重要性。安企CMS（AnQiCMS）凭借其灵活的内容管理功能，让我们可以轻松构建出满足各类业务需求的导航结构。今天，我将基于AnQiCMS的强大功能，详细为您解读如何在网站主导航中巧妙地设置和展示一级和二级菜单及其链接。

理解安企CMS的导航体系

安企CMS的导航系统设计精巧，它允许我们为网站创建多个“导航类别”。这意味着除了传统的主导航，您还可以根据需要为网站创建如页脚导航、侧边栏导航等不同的菜单组。每个导航类别之下，我们可以添加各式各样的链接，它们既可以指向网站内部的核心内容，例如文章分类或独立的单页面，也能灵活地链接到外部网站。这种分层且高度可定制的设计，使得网站的内容组织结构清晰明了，极大地便利了用户对信息的浏览和获取。

配置主导航类别

要开始构建您的网站导航，首先需要登录到安企CMS的后台管理界面。请您导航至左侧菜单栏中的“后台设置”，然后选择“导航设置”选项。在这个页面中，您会看到一个名为“导航类别管理”的区域。系统通常会默认提供一个“默认导航”类别，您可以直接使用它作为您的主导航。当然，如果您希望拥有更清晰的菜单结构管理，也可以点击“新增导航类别”按钮，创建一个全新的类别，例如命名为“主导航”或“顶部导航”。一旦您选定或创建了主导航类别，后续所有的一级和二级菜单都将归属于这个特定的类别进行集中管理。

添加一级导航菜单

接下来，我们将在“导航链接设置”区域开始创建主导航的一级菜单项。请点击页面上方的“添加导航链接”按钮。在随后弹出的配置表单中，关键的一步是“上级导航”选项的选择。在这里，您需要选择“顶级导航”，这明确表示您正在创建一个独立的、不隶属于任何其他菜单的一级主菜单。

“显示名称”字段用于填写用户在网站前端实际看到的菜单文字，请确保其表意清晰、简洁。而“链接类型”是定义菜单行为的核心设置，安企CMS提供了三种主要类型供您选择：

• 内置链接：这类链接预设了指向网站首页、特定内容模型（如文章模型或产品模型）的首页等常见目标，方便快速配置。
• 分类页面链接：通过此选项，您可以轻松地选择网站中已创建的文章分类、产品分类或独立的单页面作为导航目标，将用户导向具体的内容列表或详情页。
• 外部链接：如果您需要将用户引导至站内任何自定义URL，或者完全跳转到外部网站，则可以选择此类型，并填写完整的链接地址。 选择适合您需求的链接类型后，请根据提示填写对应的链接地址或选择具体内容。“显示顺序”字段则决定了菜单项的排列位置，数值越小，菜单项在导航栏中显示得越靠前。

创建二级导航菜单

要为已建立的一级导航添加二级下拉菜单，操作流程与添加一级菜单非常相似，但其中最关键的区别在于“上级导航”的选择。您需要再次点击“添加导航链接”按钮，在弹出的表单中，此时“上级导航”不再选择“顶级导航”，而是要精确地选择您此前创建的某个一级导航的“显示名称”。例如，如果您已经设置了一个名为“产品分类”的一级导航，那么在此处，您就应该选择“产品分类”作为上级导航。这样，您所创建的诸如“电子产品”、“家居用品”等链接，就会自动成为“产品分类”下的二级子菜单，并以下拉形式呈现。其余的设置，如“显示名称”、“链接类型”和“显示顺序”，都将遵循与添加一级菜单时相同的逻辑进行配置。安企CMS目前支持最多两级导航，这足以构建出大多数网站所需的层级结构，确保导航的实用性和易用性。

模板中的导航调用

完成安企CMS后台的导航配置后，下一步便是将这些精心设置的菜单渲染到网站的前端页面上。通常，这项工作会在您网站模板的公共部分进行，例如header.html或base.html这些文件中。安企CMS为此提供了一个专门的navList标签，用于获取并输出您配置的导航数据。

以下是一个基础的navList标签使用示例，它能够展示出包含一级和二级菜单的导航结构：

”`twig {% navList navs %} {# 获取所有导航数据，并赋值给变量 navs #}

{%- for item in navs %} {# 遍历一级菜单项 #}
    <li class="{% if item.IsCurrent %}active{% endif %}"> {# 根据 IsCurrent 属性添加激活样式 #}
        <a href="{{ item.Link }}">{{item.Title}}</a>
        {%- if item.NavList %} {# 检查当前一级菜单项是否包含二级子菜单 #}
        <dl> {# 如果存在二级菜单，则使用 dl 标签包裹 #}
            {%- for inner in item.NavList %} {# 遍历二级菜单项 #}
                <dd class="{% if inner.IsCurrent %}active{% endif %}"> {# 根据 IsCurrent 属性添加激活样式 #}
                    <a href="{{ inner.Link }}">{{inner.Title}}</a>
                </dd>
            {% endfor %}
        </dl>
        {% endif %}
    </li>