AnQiCMS如何构建多级导航菜单以优化网站结构显示？

网站的导航系统，就像是一座城市的地图，它指引着访客探索您网站的每一个角落，清晰、直观的多级导航不仅能大幅提升用户体验，更是搜索引擎优化（SEO）不可或缺的一环，帮助搜索引擎更好地理解网站结构，从而提升内容收录和排名。在AnQiCMS中，构建一套高效且美观的多级导航菜单，实际上比您想象的要简单，它提供了灵活的后台配置和强大的模板标签，让您能够轻松实现。

构建导航基础：从后台配置开始

在AnQiCMS中搭建多级导航，我们首先需要前往后台的“后台设置”区域，找到“导航设置”功能。这里是您所有导航菜单的指挥中心。

1. 导航类别管理：定义菜单位置

在“导航设置”里，您会发现一个“默认导航”类别。这通常是用于网站顶部主导航的。但您的网站可能还需要在页脚、侧边栏，甚至移动端有不同的菜单布局。AnQiCMS非常贴心地允许您创建多个“导航类别”，比如您可以新增一个名为“页脚导航”的类别，或者“移动端菜单”的类别。这样做的好处是，您可以为不同位置和场景定制专属的导航内容，互不干扰，管理起来也更加清晰。

2. 导航链接设置：填充菜单内容

定义好导航类别后，接下来便是为这些类别填充具体的链接。AnQiCMS的导航链接设置支持最多两级导航，这意味着您可以实现一级主菜单和一级下拉子菜单的结构。

在添加新的导航链接时，您会看到以下几个关键设置项：

• 上级导航： 这是实现多级导航的核心。如果您想创建一个主菜单项，就选择“顶级导航”；如果想让它成为某个主菜单项的子菜单，只需从下拉列表中选择对应的上级菜单项即可。
• 显示名称： 这是导航在前台页面上显示的文字。您可以灵活设置，不一定要与链接指向的页面标题完全一致，以求更简洁或更具吸引力。
• 子标题名称与导航描述： 如果您的设计需要，可以为导航项添加一个子标题或简短的描述，这在某些特色模板中可以用来丰富导航的展示信息。
• 链接类型： AnQiCMS提供了三种灵活的链接类型，以适应各种内容组织需求：
  • 内置链接： 适用于网站的首页、文章模型首页、产品模型首页以及其他自定义模型首页。选择后系统会自动填充对应的链接。
  • 分类页面链接： 这是将您在AnQiCMS中创建的分类（如“公司新闻”、“产品分类”）或单页面（如“关于我们”、“联系我们”）直接作为导航项的便捷方式。您只需从列表中选择即可。
  • 外部链接： 当您需要链接到站内某个特定URL，或是外部网站（如合作伙伴官网、社交媒体主页）时，可以选择此项并手动输入完整的URL地址。
• 显示顺序： 您可以通过设置数字来控制导航项的排列顺序，数字越小，该导航项在列表中的位置就越靠前。目前AnQiCMS采用数字排序，未来也将支持拖拽排序，进一步提升操作便利性。

通过以上步骤，您就能在AnQiCMS后台构建出一个结构清晰的多级导航菜单体系了。

模板调用：让导航呈现在网站上

后台配置完成，接下来就是如何在网站前台展示这些精心设计的导航菜单。AnQiCMS的模板系统采用了类似Django模板引擎的语法，通过navList标签，您可以非常便捷地将后台配置好的导航数据调用出来。

1. 理解 navList 标签

navList标签是您在AnQiCMS模板中调用导航数据的关键。它的基本用法是 {% navList navs %}{% endnavList %}，其中navs是您为导航列表定义的变量名，您可以根据喜好自定义。

如果您想调用特定“导航类别”下的菜单，比如前面创建的“页脚导航”，可以通过typeId参数来指定：{% navList footerNavs with typeId=2 %}{% endnavList %}（这里的typeId=2假设“页脚导航”在后台的ID是2，您可以在后台的导航类别管理中查看）。

navs变量是一个数组对象，您需要使用for循环来遍历其中的每一个导航项（item）。每个item都包含了Title（显示名称）、Link（链接地址）、IsCurrent（是否为当前页面链接）等字段。最重要的是，如果一个导航项包含子菜单，它的NavList字段也会是一个数组，同样可以通过嵌套的for循环来遍历。

2. 嵌套结构实现多级导航

要实现两级导航的显示，您需要利用HTML的嵌套列表结构，并结合navList标签的NavList子字段进行循环：

<nav>
    <ul class="main-nav">
        {% navList navs with typeId=1 %} {# 假设1是主导航的typeId #}
            {% 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 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>

在这段代码中，外层的ul代表一级菜单，内层的ul则通过item.NavList实现二级下拉菜单。IsCurrent字段可以帮助您为当前访问的页面链接添加active类名，实现高亮显示，进一步优化用户体验。

3. 动态内容与导航结合

AnQiCMS的模板标签灵活性非常高，您甚至可以在二级导航中不仅显示链接，还动态地展示该分类下的文章列表或更深层级的子分类。这能为您的网站带来更丰富的交互和信息展示。

例如，在一个产品分类的二级菜单下，您可能希望直接展示该分类下的几个热门产品：

”`html