如何在AnQiCMS中创建和显示多级导航菜单？

在网站运营中，清晰有效的导航菜单是用户体验的核心，它能帮助访问者快速找到所需信息。安企CMS（AnQiCMS）深知这一点，为您提供了灵活且强大的功能，让您可以轻松创建和管理多级导航菜单，无论是简单的两级下拉菜单，还是结合动态内容展示的复杂菜单，都能满足您的需求。

接下来，我们将一起了解如何在AnQiCMS中创建和显示多级导航菜单。

一、后台管理：构建导航菜单的基础

创建多级导航菜单的第一步，是在AnQiCMS的后台管理界面进行设置。这里不仅可以定义菜单项，还能规划它们的层级关系。

1. 访问导航设置

登录您的AnQiCMS后台，在左侧的菜单栏中，找到并点击“后台设置”，然后选择“导航设置”选项。这里是您管理所有网站导航的中心。

2. 创建导航类别（可选，但推荐）

AnQiCMS默认提供了一个名为“默认导航”的类别，通常用于网站的主导航。但如果您的网站需要多个导航区域，比如顶部主导航、页脚导航、侧边栏导航，或者针对特定场景的特殊导航，您可以创建新的导航类别。

在“导航类别管理”部分，点击“新增导航类别”，输入一个有意义的名称（例如“页脚导航”、“侧边菜单”），保存后，您就拥有了一个独立的导航区域，方便未来管理和调用。

3. 添加导航链接：定义菜单结构

这是创建多级导航的核心步骤。在“导航链接设置”区域，您会看到“添加导航链接”按钮。点击它，就可以开始定义您的菜单项了。

• 显示名称：这是导航菜单上展示给用户的文字。
• 链接类型：AnQiCMS提供了三种灵活的链接类型，您可以根据需要选择：
  • 内置链接：包括网站首页、文章模型首页、产品模型首页等系统预设的页面。
  • 分类页面链接：您可以直接选择已创建的文章分类、产品分类或单页面作为导航链接，让菜单项动态指向您的内容。
  • 外部链接：如果您需要链接到站外网站，或者站内某个自定义URL，可以选择此项并填写完整的链接地址。
• 上级导航：这是实现多级菜单的关键。
  • 要创建一级菜单，请选择“顶级导航”作为上级。
  • 要创建二级菜单（即一级菜单的下拉子菜单），请从列表中选择一个已存在的一级导航作为其上级。目前AnQiCMS支持直接在后台配置两级导航。
• 显示顺序：通过设置数字大小来决定菜单项的排列顺序，数字越小越靠前。
• 子标题名称与导航描述：这些字段提供了额外的文字信息，可以在模板中调用，让您的导航菜单内容更丰富，例如为菜单项添加英文翻译或简短介绍。

重复以上步骤，您可以为不同导航类别添加多个一级菜单，并在这些一级菜单下创建相应的二级子菜单，从而构建出清晰的导航层级。

二、模板调用：在网站前端展示导航菜单

后台配置好导航菜单后，下一步就是将这些菜单结构在您的网站前端显示出来。AnQiCMS采用了Django模板引擎语法，通过特定的模板标签，您可以非常灵活地将导航数据渲染到页面上。

1. 找到模板文件

导航菜单通常会出现在网站的公共头部（header）或侧边栏、页脚等位置。根据您的模板设计，您可能需要在 /template 目录下当前模板文件夹中的 bash.html（公共基础模板）或 partial/header.html（头部片段）等文件中进行编辑。

2. 使用navList标签调用导航数据

navList是AnQiCMS专为调用导航列表设计的模板标签。

您可以使用以下基本结构来调用导航数据：

{% navList navs with typeId=1 %}
    <ul>
        {%- for item in navs %}
            <li class="{% if item.IsCurrent %}active{% endif %}">
                <a href="{{ item.Link }}">{{item.Title}}</a>
                {%- if item.NavList %} {# 判断是否有下级导航 #}
                <dl>
                    {%- for inner in item.NavList %} {# 遍历二级导航 #}
                        <dd class="{% if inner.IsCurrent %}active{% endif %}">
                            <a href="{{ inner.Link }}">{{inner.Title}}</a>
                        </dd>
                    {% endfor %}
                </dl>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endnavList %}

• {% navList navs with typeId=1 %}：这个标签用于获取导航列表数据。navs是您为导航列表定义的变量名，typeId=1表示调用ID为1的导航类别（通常是默认导航）。如果您创建了其他导航类别，请将typeId替换为相应类别的ID。
• {% for item in navs %}：这里会遍历所有的一级导航菜单项。
• item.Title和item.Link：分别用于显示菜单项的名称和链接地址。
• {% if item.IsCurrent %}：IsCurrent是一个布尔值，如果当前页面与该导航项匹配，它会返回true。您可以利用这个属性为当前页面对应的导航项添加高亮样式，提升用户体验。
• {% if item.NavList %}：这是实现多级导航的关键。NavList是当前菜单项的子菜单集合。如果NavList存在（即该一级菜单下有二级菜单），则进入嵌套循环。
• {% for inner in item.NavList %}：这个循环会遍历所有二级导航菜单项，同样可以使用inner.Title、inner.Link和inner.IsCurrent来渲染。

3. 丰富您的导航菜单：结合动态内容

虽然后台直接支持两级导航，但通过模板标签的灵活组合，您可以创建视觉上更丰富、层级更深的菜单。例如，在一个二级菜单项下，显示其关联分类的最新文章列表或所有子分类列表。

示例：在二级菜单项下显示最新文章

假设您有一个一级导航“产品”，其下有一个二级导航“电子产品”，您希望在鼠标悬停在“电子产品”上时，除了显示“电子产品”链接，还能显示“电子产品”分类下的几篇最新产品文章。

<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>
                {% if inner.PageId > 0 %} {# 假设PageId存储了关联的分类ID #}
                    {% archiveList products with type="list" categoryId=inner.PageId limit="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 %}
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>

在这个例子中，我们在一级导航的二级菜单项中，通过inner.PageId获取到关联的分类ID，