怎样在安企CMS的模板中实现灵活的导航菜单和子菜单显示？

在网站运营中，清晰、直观的导航菜单是用户体验的核心。它不仅能帮助访问者快速找到所需信息，更是网站结构和内容组织逻辑的直接体现。安企CMS（AnQiCMS）凭借其基于Go语言的高效架构和Django风格的模板引擎，为内容创作者和开发者提供了极大的灵活性，以实现各种复杂的导航菜单和子菜单显示需求。

要在安企CMS的模板中实现灵活的导航菜单和子菜单，我们通常需要结合后台的导航配置功能与前端模板标签的使用。这个过程既直观又强大，可以满足从简单的扁平化菜单到多层级、动态内容混合菜单的各种场景。

灵活导航菜单的后台配置

首先，灵活的导航菜单离不开精心的后台规划。安企CMS提供了“导航设置”功能，在这里，你可以像搭积木一样构建你的网站菜单体系。

1. 导航类别管理： 你可以创建不同的导航类别，例如“顶部主导航”、“页脚导航”、“侧边栏导航”等。这使得在网站不同位置显示不同菜单成为可能，每一套导航都可以独立管理，互不干扰。
2. 导航链接设置： 在每个导航类别下，你可以添加具体的导航链接。安企CMS支持三种主要类型的链接：
   • 内置链接： 包含“首页链接”、“文章模型首页”、“产品模型首页”等系统预设的常用链接，方便快速添加。
   • 分类页面链接： 这是构建动态菜单的关键。你可以选择已有的文章分类、产品分类或单页面作为导航项。这意味着当你新增或修改了某个分类或页面时，菜单会自动更新，无需手动修改代码。
   • 外部链接： 允许你链接到站内任意自定义URL，甚至是外部网站。这为整合外部资源或特定的营销页面提供了便利。
3. 层级与排序： 安企CMS的导航链接支持最多两级嵌套，即一个主导航项下可以有一个子导航层级。你可以通过设置“上级导航”来定义链接的层级关系，并通过“显示顺序”来精确控制每个导航项的显示次序，数字越小越靠前。

这些后台设置是前端模板调用导航数据的基础，它决定了你的菜单内容的广度与深度。

模板中导航菜单的实现

安企CMS的模板引擎语法类似Django，变量用双花括号{{ 变量 }}表示，逻辑控制如条件判断、循环则用单花括号和百分号{% 标签 %}。在模板中，实现导航菜单主要依赖 navList、categoryList 和 pageList 等核心标签。

1. 使用 navList 标签实现后台配置的导航菜单

navList 标签是调用后台“导航设置”中最直接的方式。它能获取你在后台精心配置的主导航、子导航以及它们的各种属性。

假设你已经在后台配置了一个名为“顶部主导航”的导航类别，并且其中包含了一级和二级菜单项。在模板中，你可以这样调用：

<nav class="main-navigation">
    <ul>
        {% navList navs with typeId=1 %} {# 假设“顶部主导航”的typeId为1 #}
            {%- for item in navs %}
                <li class="{% if item.IsCurrent %}active{% endif %}">
                    <a href="{{ item.Link }}">{{ item.Title }}</a>
                    {%- if item.NavList %} {# 判断是否有子菜单 #}
                        <ul class="sub-menu">
                            {%- for subItem in item.NavList %}
                                <li class="{% if subItem.IsCurrent %}active{% endif %}">
                                    <a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </li>
            {% endfor %}
        {% endnavList %}
    </ul>
</nav>

代码解析：

• {% navList navs with typeId=1 %}：这个标签会从后台获取 typeId 为 1 的导航类别下的所有导航链接，并将它们赋值给 navs 变量。
• {% for item in navs %}：循环遍历一级导航项。
• {{ item.Link }} 和 {{ item.Title }}：分别输出导航项的链接和标题。
• {% if item.IsCurrent %}active{% endif %}：这是非常实用的一个功能，IsCurrent 会自动判断当前页面是否就是该导航项所指向的页面，如果是，则返回 true。你可以利用这个属性为当前激活的菜单项添加 active 类，从而通过CSS实现高亮显示。
• {% if item.NavList %}：判断当前一级导航项是否有子菜单。NavList 本身又是一个列表，包含了该导航项的所有子导航。
• {% for subItem in item.NavList %}：如果存在子菜单，则嵌套循环遍历子菜单项，逻辑与一级菜单类似。

通过这种方式，你可以在后台灵活调整导航结构和内容，前端模板无需改动，即可自动适配。

2. 使用 categoryList 标签构建动态分类菜单

对于内容驱动的网站，尤其是博客或产品展示网站，往往需要将分类作为主要的导航结构。categoryList 标签能够动态获取指定内容模型下的分类列表，非常适合构建分类导航。

例如，要在主导航下显示文章分类，并在分类下拉菜单中显示其子分类，甚至可以在子分类下直接列出几篇最新的文章：

”`twig