如何构建和显示网站的多级导航菜单？

网站导航，如同网站的骨架和指南针，它引导访问者探索网站内容，是用户体验和信息架构的核心。一个结构清晰、易于访问的导航菜单，不仅能帮助用户快速找到所需信息，对于搜索引擎优化（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 标签，从而在导航菜单中动态地显示了相关产品列表。

三、**实践与提示

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