如何使用AnQiCMS标签在导航菜单中显示分类和文档？

在AnQiCMS中，网站的导航菜单不仅是用户探索内容、理解网站结构的重要入口，更是搜索引擎抓取和理解网站层级关系的关键。利用AnQiCMS强大的模板标签功能，我们可以轻松地将分类和文档动态地呈现在导航菜单中，从而构建一个既美观又高效的网站导航。

一、后台准备工作：搭建导航骨架

在深入模板代码之前，我们需要在AnQiCMS的后台进行一些基础配置。毕竟，前端标签所能获取并展示的数据，都源于后台的精心组织。

1. 创建和管理导航类别 首先，进入AnQiCMS后台，找到“后台设置”下的“导航设置”。系统默认会有一个“默认导航”类别，但您也可以根据需要自定义更多的导航类别，例如“页脚导航”、“侧边栏导航”等。每一个类别都代表了一组独立的导航菜单，方便您在网站不同位置调用。

2. 添加导航链接，关联分类和文档 在选定或创建好导航类别后，接下来是添加具体的导航链接。点击“添加新导航”或编辑现有导航项，您会看到“链接类型”的选项。这是关键所在：

   • “内置链接”：适用于指向首页、各种模型（如文章模型、产品模型）的首页等。
   • “分类页面链接”：这是我们主要用于在导航中显示分类和文档的方式。当您选择此类型时，系统会允许您从已有的分类或单个页面中选择一个作为导航的目标。当您选中一个分类作为导航链接后，AnQiCMS会在内部为其分配一个 PageId，这个ID在模板中将非常有用。
   • “外部链接”：如果需要链接到站外或其他自定义URL，可以使用此选项。

   通过“分类页面链接”选择您的文章分类、产品分类或特定的单页面，并设置好“显示名称”，就为前端导航打下了坚实的基础。您可以设置一级导航，也可以通过选择“上级导航”来创建二级下拉菜单。AnQiCMS目前支持最多两级导航链接。

二、模板层面：利用标签灵活呈现内容

后台配置完成后，我们就需要在模板文件中运用AnQiCMS的标签来动态展示这些导航项了。AnQiCMS的模板语法类似Django，变量用双花括号 {{变量}}，逻辑控制用单花括号和百分号 {% 标签 %}。

在您的模板文件（通常是 bash.html 或特定的导航头部文件）中，我们可以使用 navList、categoryList 和 archiveList 这几个核心标签。

1. 基础导航菜单：仅显示一级导航链接 最简单的导航菜单只包含后台设置的一级导航项。我们可以直接使用 navList 标签来获取它们。

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

   这里，navs 是我们为 navList 标签定义的变量，通过 for 循环遍历 navs 数组，item.Link 提供链接地址，item.Title 显示导航名称。item.IsCurrent 则可以帮助我们判断当前页面是否为该导航项，从而添加 active 类名以高亮显示。

2. 进阶导航菜单：下拉显示子分类 如果您的导航设计需要实现二级下拉菜单，且二级菜单的内容是某个一级分类下的子分类，那么可以在 navList 的循环中嵌套 categoryList。

   假设您的后台导航中，一级导航“产品中心”链接到了一个产品主分类，而其下的二级导航则链接到了该产品主分类的几个子分类。当一级导航的 item.NavList 存在时，我们就可以进一步遍历这些二级导航项。如果二级导航项是“分类页面链接”，那么 inner.PageId 就会对应到该分类的ID。

   <ul>
       {% navList navList with typeId=1 %} {# 假设您的主导航类别ID是1 #}
       {%- for item in navList %}
       <li>
           <a href="{{ item.Link }}">{{item.Title}}</a>
           {%- if item.NavList %} {# 判断是否存在二级导航 #}
           <ul class="nav-menu-child">
               {%- for inner in item.NavList %}
               <li>
                   <a href="{{ inner.Link }}">{{inner.Title}}</a>
                   {% if inner.PageId > 0 %} {# 检查是否关联了分类/页面 #}
                       {% categoryList categories with parentId=inner.PageId %} {# 获取二级分类下的子分类 #}
                       {% if categories %}
                       <ul>
                           {% for subCategory in categories %}
                           <li>
                               <a href="{{ subCategory.Link }}">{{subCategory.Title}}</a>
                           </li>
                           {% endfor %}
                       </ul>
                       {% endif %}
                       {% endcategoryList %}
                   {% endif %}
               </li>
               {% endfor %}
           </ul>
           {% endif %}
       </li>
       {% endfor %}
       {% endnavList %}
   </ul>
   

   这段代码中，item.NavList 用来循环后台配置的二级导航。如果某个二级导航项 inner 关联了一个分类 (inner.PageId > 0)，我们就可以利用 categoryList 标签，通过 parentId=inner.PageId 来动态获取该分类下的子分类，从而实现更深层次的下拉菜单展示。

3. 高级导航菜单：下拉显示文档列表 除了显示子分类，您可能还希望在下拉菜单中直接展示某个分类下的文档列表，例如“新闻中心”下拉显示最新的几篇新闻。这同样可以通过在 navList 中嵌套 archiveList 来实现。

   <ul>
       {% navList navList with typeId=1 %}
       {%- for item in navList %}
       <li>
           <a href="{{ item.Link }}">{{item.Title}}</a>
           {%- if item.NavList %}
           <ul class="nav-menu-child">
               {%- for inner in item.NavList %}
               <li>
                   <a href="{{ inner.Link }}">{{inner.Title}}</a>
                   {% archiveList products with type="list" categoryId=inner.PageId limit="8" %} {# 获取该分类下的最新8篇文档 #}
                   {% if products %}
                   <ul class="nav-menu-child-child">
                       {% for product in products %}
                       <li><a href="{{product.Link}}">{{product.Title}}</a></li>
                       {% endfor %}
                   </ul>
                   {% endif %}
                   {% endarchiveList %}
               </li>
               {% endfor %}
           </ul>
           {% endif %}
       </li>
       {% endfor %}
       {% endnavList %}
   </ul>