如何自定义网站导航菜单，实现多层级内容的链接显示？

在构建和运营网站的过程中，导航菜单扮演着至关重要的角色。它不仅是用户探索网站内容的指引，更是搜索引擎理解网站结构的关键。安企CMS（AnQiCMS）深知这一点，因此提供了灵活且强大的导航菜单自定义功能，让我们可以轻松实现多层级内容的链接显示，从而优化用户体验并提升网站的整体效率。

接下来，我们将一起了解如何在安企CMS中自定义和管理网站导航菜单，并使其能够灵活地展示多层级的内容链接。

第一步：后台配置导航菜单

安企CMS的导航设置集中在后台管理界面，通过简洁直观的操作，我们可以定义不同位置的菜单，并为它们添加丰富的链接内容。

1. 访问导航设置

首先，登录您的安企CMS后台。在左侧的菜单栏中，找到并点击“后台设置”，然后选择“导航设置”。这里就是您管理所有网站导航的中心。

2. 管理导航类别

进入导航设置页面后，您会看到一个“导航类别管理”区域。安企CMS默认会提供一个“默认导航”类别，但这远远不够。想象一下，您的网站可能需要在页头显示主导航，页脚显示友情链接或法律声明，侧边栏显示热门分类，甚至不同语种的网站需要独立的导航。

安企CMS允许您根据实际需求创建多个导航类别。例如，您可以添加一个名为“页脚导航”或“侧边栏菜单”的新类别。每个类别都有一个唯一的ID，这在后续前端模板调用时会用到。有了不同的类别，您可以为网站的不同区域配置专属的导航菜单，实现更精细的布局管理。

3. 添加和编辑导航链接

现在，我们开始为选定的导航类别添加具体的链接。点击“导航链接设置”部分的“添加新导航”按钮，或点击现有导航旁边的“编辑”按钮。

• 设定链接层级：安企CMS支持最多两级导航链接，足以满足大多数网站的需求。当您添加新链接时，可以通过“上级导航”选项来决定其层级。如果选择“顶级导航”，它将显示为一级菜单项；如果选择已存在的一级导航，它就成为该一级导航下的二级子菜单。这种层级关系是实现多层级内容显示的基础。

• 填写链接显示信息：

  • 显示名称：这是导航链接在前台页面上显示的文字，可以根据需要自由修改。
  • 子标题名称：如果您的导航需要显示双标题（例如中英文对照），可以在这里添加副标题。
  • 导航描述：为导航链接提供一段简短的介绍文字，在某些模板设计中可以用来显示提示信息。

• 选择链接类型：安企CMS提供了多种链接类型，满足不同内容连接的需求：

  • 内置链接：包括网站首页、文章模型首页、产品模型首页以及其他自定义模型首页。选择这些链接类型，系统会自动生成对应的URL，非常方便。
  • 分类页面链接：这是连接多层级内容的关键。您可以从已创建的文章分类、产品分类或单页面中选择。通过这种方式，您的导航可以直接指向某个分类的列表页或某个特定单页，让用户能快速找到所需内容。
  • 外部链接：如果您需要链接到站内某个特定页面、外部网站或自定义的URL，可以选择此项并手动填写完整的链接地址。

• 调整显示顺序：每个导航链接都可以设置一个“显示顺序”值，数字越小，该链接在导航菜单中越靠前显示。虽然目前不支持拖拽排序，但通过数字调整，您依然可以灵活控制菜单项的排列顺序。

完成以上设置后，点击“确定”保存您的导航配置。

第二步：前端模板调用与显示

后台配置好导航菜单后，我们需要在网站的前端模板中调用并展示它们。安企CMS采用了类似Django模板引擎的语法，通过特定的标签来获取和渲染数据。

1. 核心标签 navList 的使用

在安企CMS的模板系统中，用于调用导航菜单的核心标签是 navList。它的基本用法如下：

{% navList navs with typeId=1 %}
    {# 在这里循环输出导航项 #}
{% endnavList %}

navList 标签通常需要搭配 with typeId 参数，指定您在后台创建的导航类别ID。例如，typeId=1 表示调用“默认导航”类别。navs 是一个自定义的变量名称，用于接收获取到的导航数据，它是一个数组对象，您需要使用 for 循环来遍历其中的每一个导航项。

每个导航项（例如 item）都包含以下字段，可供您在模板中调用：

• {{item.Title}}：导航链接的显示名称。
• {{item.Link}}：导航链接的URL地址。
• {{item.IsCurrent}}：一个布尔值，表示当前页面是否是此导航链接。可用于添加 active 样式。
• {{item.NavList}}：这是一个关键字段，如果当前导航项有子级导航，它会包含一个子导航列表，您可以通过再次循环来显示多层级结构。

2. 基础两层级导航显示

基于 navList 标签，我们可以轻松构建一个基础的两层级导航菜单。请注意，这里的代码片段仅为结构示例，您需要根据自己的CSS样式进行美化。

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

这段代码会遍历所有一级导航项，如果某个一级导航项包含 NavList（即有子级导航），它会再循环输出所有的二级导航项，从而实现两层级的菜单结构。

3. 拓展：在导航中集成内容列表

安企CMS的强大之处在于，您不仅仅能链接到分类或页面，还能在导航菜单中动态地显示这些分类下的最新文章或产品列表。这对于“多层级内容的链接显示”主题来说，是一个非常实用的功能。

假设您希望在一个一级导航下，点击二级导航（某个分类）时，其下拉菜单不仅显示这个分类的子分类，还能直接列出该分类下的最新文档。这可以通过结合 archiveList 或 categoryList 标签实现。

示例1：在二级导航下显示分类的子分类和最新产品

”`twig