在运营网站的过程中，清晰、高效的导航菜单是用户体验的核心。一个设计良好的导航不仅能帮助访客快速找到所需内容，还能有效引导搜索引擎抓取，提升网站的整体SEO表现。在AnQiCMS中，创建和管理网站导航菜单，并控制其显示层级，是一个直观且功能强大的过程。

后台管理：创建与组织导航菜单

要在AnQiCMS中管理网站导航，首先需要登录后台，找到“后台设置”菜单下的“网站导航设置”入口。这里是您构建网站导航体系的起点。

AnQiCMS的导航系统非常灵活，它允许您根据网站布局的需求，创建不同的“导航类别”。例如，您可能需要一个位于页面顶部的“主导航”，一个在页面底部的“底部导航”，甚至是一个用于特定功能页面的“侧边栏导航”。通过“导航类别管理”，您可以轻松添加这些不同的导航集合，让它们在网站的不同区域各司其职。

在选定或创建导航类别后，接下来就是添加具体的导航链接了。AnQiCMS提供了三种主要类型的链接，以满足各种内容指向的需求：

  1. 内置链接： 这些是AnQiCMS系统内预设的常用链接，比如网站的首页，或者是文章、产品等内容模型的首页。选择这类链接，系统会自动为您生成正确的地址，非常便捷。
  2. 分类页面链接： 如果您的网站已发布了文章分类、产品分类或独立页面（如“关于我们”、“联系我们”等），您可以直接将它们作为导航链接。系统会列出所有可用的分类和页面供您选择，确保链接指向内容的准确性。
  3. 外部链接： 对于需要指向站外资源或者网站内任意特定URL的情况，例如合作伙伴网站、社交媒体主页，甚至是某个特定的下载地址，“外部链接”便派上用场。您只需手动输入完整的URL即可。

每个导航链接都有一些额外的显示选项，让您的导航更具描述性：

  • 显示名称： 这是导航在前台页面上实际显示的文字，您可以灵活设定，不一定需要和链接内容完全一致。
  • 子标题名称： 如果您的导航设计需要双标题，例如中文主标题配上英文子标题，可以在此填写。
  • 导航描述： 为导航项添加一段简短的介绍文字，在某些模板设计中，这可以作为提示信息显示。

控制显示层级：构建多级导航

AnQiCMS允许您轻松创建两级导航菜单，这对于构建清晰的网站结构至关重要。实现这一功能的核心在于“上级导航”选项。

在创建或编辑导航链接时，如果您希望当前链接成为某个已存在的一级导航的子级，只需在“上级导航”选项中选择相应的一级导航。当前链接就会自动成为它的子级菜单。AnQiCMS目前原生支持最多两级导航的显示层级，这对于大多数企业网站和内容站点的需求来说已经足够。

调整导航顺序：精确控制显示排列

为了让导航项按照您的期望排列，“显示顺序”字段起着关键作用。这是一个数字输入框，您可以为每个导航链接设置一个数字。AnQiCMS会根据这些数字从小到大进行排序，数字越小，导航项在列表中就越靠前。

举例来说，如果您希望“首页”始终排在第一位，可以给它设置一个较小的数字，比如“1”；“关于我们”排在第二位，可以设置为“2”，以此类推。当前系统尚未支持拖拽排序，但您可以通过调整数字来精确控制顺序，确保导航菜单的逻辑性和美观性。

前端展示：在模板中集成导航菜单

在后台设置好导航后，前端如何展示出来呢？这需要我们在模板文件中使用AnQiCMS提供的特定标签。通常，导航菜单会放置在网站的公共头部（例如 bash.html）或作为独立的代码片段（在 partial/ 目录中）。

核心就是 navList 标签，它是AnQiCMS用于调用后台导航列表的主要工具。

要显示基础的一级导航，您可以在模板中使用类似这样的结构来遍历导航项：

{% navList navs with typeId=1 %} {# typeId=1通常代表默认主导航 #}
<ul>
    {% for item in navs %}
        <li class="{% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
        </li>
    {% endfor %}
</ul>
{% endnavList %}

这里 typeId 参数非常重要，它决定了您要调用哪个“导航类别”的菜单。比如 typeId=1 可能是主导航，typeId=2 可能是底部导航，这取决于您在后台“导航类别管理”中创建的ID。

展示两级菜单

对于两级导航菜单，navList 标签返回的每个主导航项（item）都含有一个 NavList 属性，这个属性本身也是一个包含子导航项的数组。因此，您可以通过嵌套的 {% for %} 循环，构建出清晰的二级菜单结构：

{% 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 %}

通过这样的代码结构，当用户访问带有此模板的页面时，就会看到您在AnQiCMS后台精心设置的两级导航菜单。

总结

通过以上步骤，您就能在AnQiCMS中创建、管理并展示出结构清晰、层级分明的网站导航了。从后台的“网站导航设置”定义导航类别、添加链接、设置层级和顺序，到前端模板中使用 navList 标签进行调用和渲染，整个过程流畅且易于掌握。AnQiCMS的灵活性让您能够根据实际的网站设计需求，打造出既美观又实用的导航系统，从而提升用户体验和网站的专业度。

常见问题 (FAQ)

1. AnQiCMS的导航菜单能否创建超过两级的多层导航？ 目前AnQiCMS的导航系统原生支持最多两级导航。如果您的网站设计对三级或更多级导航有严格要求，可以考虑通过自定义模板标签结合分类列表标签来实现更复杂的展示，但这通常需要一定的模板开发知识和前端逻辑处理能力。

2. 为什么我设置了导航的“显示顺序”，但前台的顺序却没有变化？ 请首先检查您是否在“显示顺序”字段中输入了有效的数字。AnQiCMS会根据这些数字从小到大进行排序，数字越小，导航项越靠前。如果多个导航项的数字相同，它们的相对顺序可能取决于创建时间或其他内部逻辑。为了确保精确排序，建议给每个需要特定顺序的导航项设置一个唯一的“显示顺序”数字。

3. 如何在网站的不同区域（如顶部、底部、侧边栏）显示不同的导航菜单？ 在“网站导航设置”中，您可以创建多个“导航类别”（例如，“顶部导航”、“底部导航”、“侧边栏导航”）。在您的模板文件中，通过在 navList 标签中指定不同的 typeId 参数，来调用并显示相应类别的导航