如何在前端模板中实现多级导航菜单的动态显示？

在网站设计中，一个结构清晰、易于使用的导航菜单是提升用户体验和网站专业度的关键。安企CMS（AnQiCMS）以其灵活的模板引擎和强大的内容管理功能，为我们提供了在前端模板中动态构建多级导航菜单的便利。理解其导航体系的后端配置与前端模板的调用逻辑，是实现这一目标的基础。

安企CMS 导航体系概览

安企CMS的导航功能设计得非常实用，它将导航菜单的创建与内容展示紧密结合。在后端，我们可以通过直观的界面配置导航结构；在前端，利用其基于Django模板引擎语法的标签系统，能够以高度灵活的方式动态渲染这些菜单。整个过程旨在将技术复杂性降到最低，让内容运营者和前端开发者都能轻松上手。

后端管理：构建导航菜单

首先，我们需要在安企CMS的后台管理界面中设置导航菜单。这通常在“后台设置”下的“导航设置”中完成。

1. 导航类别管理： 安企CMS允许创建多个导航类别，例如“顶部导航”、“底部导航”、“侧边栏导航”等。这使得我们可以为网站的不同区域定制独立的导航结构，极大增强了网站布局的灵活性。通过新增导航类别，可以为特定的展示位置（如页脚）创建专属菜单。
2. 导航链接设置： 在选定的导航类别下，我们可以添加具体的导航链接。每个链接都可以设置“显示名称”、“子标题名称”和“导航描述”，这些信息都可以在前端模板中调用。 最重要的是“链接类型”，安企CMS提供了三种灵活的链接方式：
   • 内置链接： 包含“首页链接”、“内容模型首页”（如文章列表、产品列表的首页）等，方便快速链接到常用页面。
   • 分类页面链接： 可以直接关联到已创建的文档分类或单页面。这意味着我们可以让导航菜单项直接指向某个产品分类页面或“关于我们”这类独立页面。
   • 外部链接： 提供了极大的自由度，可以链接到站内任何自定义URL，甚至是站外的其他网站。 值得注意的是，安企CMS目前支持最多两级的导航链接。这意味着我们可以创建主菜单项及其直接的子菜单项。在设置过程中，系统还会为每个菜单项提供“显示顺序”的选项，以便我们精细控制菜单的排列。

前端模板：动态渲染多级导航

在前端模板中，动态显示多级导航主要依赖于安企CMS提供的navList标签和基本的循环与条件判断语句。安企CMS的模板文件使用.html后缀，静态资源通常存放在/public/static/目录，并且支持类似Django的标签语法（{{变量}}用于变量输出，{% 标签 %}和{% end标签 %}用于逻辑控制）。

1. 调用 navList 标签： navList标签是获取导航数据的核心。它允许我们根据在后端设置的“导航类别ID”（typeId）来获取相应的导航列表。例如，如果你的“顶部导航”类别ID是1（默认通常是1），你可以这样调用：

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

   这里的navs是我们自定义的变量名，它将包含该类别下的所有导航菜单项数据。

2. 遍历一级导航菜单： navs变量是一个数组对象，我们需要使用for循环来遍历它，以显示一级导航菜单。每个item（或你自定义的循环变量）都包含了导航菜单项的各种属性，如item.Title（显示名称）、item.Link（链接地址）和item.IsCurrent（判断是否是当前页面链接）。

   <ul class="main-nav">
       {% for item in navs %}
           <li class="{% if item.IsCurrent %}active{% endif %}">
               <a href="{{ item.Link }}">{{item.Title}}</a>
           </li>
       {% endfor %}
   </ul>
   

   item.IsCurrent这个属性非常有用，它能让我们轻松地为当前访问的页面所对应的导航菜单项添加CSS样式，例如添加一个active类，以提供视觉上的反馈。

3. 渲染二级导航菜单： 由于安企CMS支持两级导航，item对象内部可能包含一个名为NavList的子导航列表。我们需要通过一个条件判断来检查NavList是否存在，如果存在，则嵌套一个for循环来渲染二级菜单。

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

   这样，一个基础的多级导航菜单就动态地显示出来了。

扩展应用：导航菜单中的动态内容

安企CMS的强大之处还在于它允许我们在导航菜单中进一步集成动态内容，例如在二级菜单下方显示该分类下的最新文章或产品。这需要结合archiveList或categoryList等标签实现。

1. 在导航菜单中显示分类下的文档： 假设你的二级导航链接到了某个分类，你希望在该菜单项下方显示该分类的最新几篇文章或产品。在后端配置导航链接时，选择“分类页面链接”并关联到具体分类后，该导航项的inner.PageId属性会存储该分类的ID。我们就可以利用这个ID来调用相关文档。

   {# ... 二级导航循环内部 ... #}
   {% if inner.NavList %} {# 判断是否存在子导航 #}
       <ul class="sub-nav">
           {% for inner in item.NavList %}
               <li class="{% if inner.IsCurrent %}active{% endif %}">
                   <a href="{{ inner.Link }}">{{inner.Title}}</a>
                   {# 在这里调用与该分类相关的文档 #}
                   {% archiveList products with type="list" categoryId=inner.PageId limit="8" %}
                   {% if products %}
                   <ul class="nav-content-list">
                       {% for product in products %}
                       <li><a href="{{product.Link}}">{{product.Title}}</a></li>
                       {% endfor %}
                   </ul>
                   {% endif %}
                   {% endarchiveList %}
               </li>
           {% endfor %}
       </ul>
   {% endif %}
   {# ... #}
   

   这段代码会在每个二级导航项下方，如果inner.PageId（即关联的分类ID）存在，就列出该分类下的8篇最新文档（产品或文章，取决于archiveList的moduleId设置）。

2. 在导航菜单中显示下级分类： 另一种常见需求是在二级导航项下方显示其所属分类的更深层级子分类。这可以通过在inner.PageId（如果它关联的是一个分类）的基础上，再次调用categoryList来实现。

   ”`twig {# … 二级导航循环内部 … #} {% if inner.NavList %} {# 判断是否存在子导航 #}

   <ul class="sub-nav">
       {% for inner in item.NavList %}
           <li class="{% if inner.IsCurrent %}active{% endif %}">
               <a href="{{ inner.Link }}">{{inner.Title}}</a>
               {% if inner.PageId > 0 %} {# 确保PageId有效，且通常是一个分类ID #}
                   {% categoryList subCategories with parentId=inner.PageId %}
                   {% if subCategories %}
                   <ul class="nav-sub-categories">
                       {% for subCat in subCategories %}