网站导航，如同网站的骨架和指南针，它引导访问者探索网站内容，是用户体验和信息架构的核心。一个结构清晰、易于访问的导航菜单，不仅能帮助用户快速找到所需信息，对于搜索引擎优化（SEO）也至关重要。安企CMS（AnQiCMS）深谙此道，提供了强大而灵活的导航管理功能，让您轻松构建和展示多级导航菜单。

接下来，我们将深入了解如何在安企CMS中一步步构建和显示您的网站导航。

一、在安企CMS后台配置导航菜单

首先，构建导航菜单的起点位于安企CMS的后台管理界面。这里是您定义菜单结构、链接类型和层级的地方。

  1. 进入导航设置界面 在安企CMS的后台左侧菜单中，您会找到“后台设置”选项。点击展开后，选择“导航设置”便能进入导航管理的核心区域。

  2. 管理导航类别 在“导航设置”页面，您会看到一个名为“导航类别管理”的部分。系统通常会预设一个“默认导航”类别，这通常用于您网站的主菜单。但如果您希望为网站的不同区域（例如页脚、侧边栏）设置独立的菜单，您可以点击“自定义导航类别”来新增更多导航类别，比如“页脚导航”或“产品导航”。为每个类别赋予一个清晰的名称，这将有助于您后续的管理和调用。

  3. 添加和编辑导航链接 在选定或创建好导航类别后，您就可以开始添加具体的导航链接了。点击“新增导航链接”，会弹出一个配置表单，其中包含以下关键选项：

    • 显示名称：这是导航菜单项在前台展示的文字，您可以根据需要自由设定。
    • 子标题名称：某些设计风格需要主标题下方再显示一行副标题（例如中英文对照），这里便可以设置。
    • 导航描述：为导航项添加简短的描述，这在某些模板设计中可以作为鼠标悬停时的提示信息。
    • 上级导航：这是实现多级导航的关键。安企CMS原生支持两级导航。如果您想创建一个二级菜单项，只需将其“上级导航”设置为已存在的一级菜单即可。选择“顶级导航”则表示这是一个独立的一级菜单。
    • 链接类型：安企CMS提供了三种灵活的链接类型，以适应不同的需求：
      • 内置链接：这包括“首页链接”、各种“模型首页”（如文章模型首页、产品模型首页），以及您自定义的模型首页。选择这类链接，系统会自动获取对应的URL。
      • 分类页面链接：您可以直接选择网站中已创建好的某个分类（例如“公司新闻”、“产品系列”）或单个页面（例如“关于我们”、“联系我们”）作为导航链接。这种方式极大地简化了内部页面链接的创建。
      • 外部链接：如果您需要链接到站内某个特定URL或者外部网站，可以选择此项，然后手动输入完整的URL地址。这提供了最大的灵活性。
    • 显示顺序：每个导航链接都可以设置一个显示顺序，数字越小，显示位置越靠前。这让您可以精确控制菜单项的排列次序。

完成所有信息的填写后，点击“确定”保存，您的导航菜单结构便在后台构建完成了。您可以重复上述步骤，创建所有需要的一级和二级导航菜单项。

二、在前端模板中展示多级导航菜单

后台配置好菜单后，接下来就是将这些结构化的导航数据呈现在网站的前端页面上。这主要通过安企CMS提供的 navList 模板标签来实现。

  1. 调用 navList 标签 在您的网站模板文件（例如 base.html、header.html 等）中，使用 navList 标签来获取您在后台配置的导航数据。您需要为其指定一个变量名（如 navs）来存储获取到的数据。

    {% navList navs with typeId=1 %}
    {# 导航菜单的HTML结构将在这里呈现 #}
{% endnavList %}

    这里的 typeId=1 表示您想调用“默认导航”类别（通常是第一个创建的导航类别）。如果您在后台创建了其他导航类别，请根据其实际的 typeId 进行调用。

  2. 遍历并渲染一级导航 navs 变量是一个数组对象，其中包含了您配置的所有一级导航菜单项。您可以使用 for 循环来遍历这些菜单项，并构建相应的HTML结构。

    <ul class="main-nav">
    {% for item in navs %}
    <li class="nav-item {% if item.IsCurrent %}active{% endif %}">
        <a href="{{ item.Link }}">{{ item.Title }}</a>
        {# 这里是二级导航的占位符 #}
    </li>
    {% endfor %}
</ul>

    在循环中，item.Link 会输出导航链接，item.Title 则显示导航名称。item.IsCurrent 是一个非常有用的布尔值，当当前页面与该导航项链接匹配时为 true，您可以利用它为当前活跃菜单项添加 active 类名，以实现高亮效果。

  3. 渲染二级导航（多级菜单） 如果某个一级导航项在后台配置了二级导航，那么 item 对象会包含一个名为 NavList 的子数组。您可以检查 item.NavList 是否存在，如果存在，则继续嵌套一个 for 循环来渲染二级菜单项。

    <ul class="main-nav">
    {% for item in navs %}
    <li class="nav-item {% if item.IsCurrent %}active{% endif %}">
        <a href="{{ item.Link }}">{{ item.Title }}</a>
        {% if item.NavList %} {# 检查是否存在二级导航 #}
        <ul class="sub-nav">
            {% for subItem in item.NavList %}
            <li class="sub-nav-item {% if subItem.IsCurrent %}active{% endif %}">
                <a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
</ul>

    通过这种方式，您就能够轻松构建并显示出多级导航菜单。请注意，以上代码只是一个基础的HTML结构示例，您可以根据您的网站设计，为其添加CSS样式和JavaScript交互，以实现更美观和动态的菜单效果。

  4. 在导航中嵌入动态内容（高级应用） 安企CMS的强大之处在于其模板标签的高度组合性。如果您的需求不仅仅是简单的两级链接，例如您希望在某个导航项的下拉菜单中显示特定分类下的最新文章，或者某个模型的所有分类列表，您可以在 item.NavList 的渲染逻辑中，结合其他标签（如 archiveList 或 categoryList）来实现。

    例如，如果您有一个“产品中心”导航项，希望其下拉菜单不仅是产品分类，还能展示每个产品分类下的热门产品，您可以这样做：

    {# 假设外层已经有一个for item in navs循环，item是产品中心这个导航项 #}
{% if item.NavList %}
<ul class="sub-nav">
    {% for subItem in item.NavList %}
    <li class="sub-nav-item">
        <a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
        {% if subItem.PageId > 0 %} {# 如果这个二级导航链接的是某个分类 #}
        <ul class="product-list-in-nav">
            {# 调用该分类下的最新产品 #}
            {% archiveList products with type="list" categoryId=subItem.PageId limit="5" %}
            {% for product in products %}
            <li><a href="{{ product.Link }}">{{ product.Title }}</a></li>
            {% endfor %}
            {% endarchiveList %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
</ul>
{% endif %}

    这里利用了 subItem.PageId（如果二级导航链接的是一个分类，这个ID就是该分类的ID），并结合 archiveList 标签，从而在导航菜单中动态地显示了相关产品列表。

三、**实践与提示

  • 规划先行：在后台设置导航之前，最好先在纸