在构建和管理网站时，清晰、直观的导航系统是用户体验和搜索引擎优化的基石。AnQiCMS 提供了一套灵活且功能强大的导航管理机制，让您可以轻松地组织网站结构，并将其优雅地呈现在用户面前。

一、 后台导航管理：构建你的网站骨架

AnQiCMS 的导航管理功能位于后台的“后台设置”菜单中，点击“导航设置”即可进入。在这里，您可以像搭积木一样，为网站构建起清晰的导航体系。

1. 导航类别的创建与管理

AnQiCMS 默认会有一个“默认导航”类别，这通常用于网站的主导航栏。但网站往往不止一个导航位置，例如，页脚可能需要一个“关于我们”、“联系我们”等组成的辅助导航，或者侧边栏可能需要一个产品分类导航。为了满足这些多样化的需求，AnQiCMS 允许您创建多个“导航类别”。

您可以根据实际用途，为每个导航类别命名，比如“页脚导航”、“侧边栏产品导航”等。这样，您可以将不同位置的导航链接分组管理，互不干扰，大大提高了管理的效率和灵活性。

2. 导航链接的精细化配置

在选定或创建了导航类别后，接下来就是为该类别添加具体的导航链接。AnQiCMS 提供了丰富多样的配置选项，让每一个导航项都能满足您的需求：

  • 层级关系：构建多级菜单 AnQiCMS 支持两级导航链接。在添加链接时，您可以指定其“上级导航”。如果选择“顶级导航”，它将作为一级菜单项；如果选择某个现有的一级菜单项，它将成为该一级菜单下的二级子菜单。这使得创建常见的下拉菜单变得非常简单。

  • 显示信息：让菜单更丰富

    • 显示名称：这是导航链接在前台页面上直接呈现的文字，您可以根据需要自由修改。
    • 子标题名称：某些设计可能需要导航项显示双语标题或额外信息，此字段可满足这类需求。
    • 导航描述：为导航项添加一段简短的说明，在某些模板设计中可作为提示信息显示。

  • 链接类型：连接所有内容 这是导航链接的核心功能，AnQiCMS 提供了三种灵活的链接类型：

    • 内置链接：包含“首页链接”、“文章模型首页”、“产品模型首页”以及其他自定义模型首页。选择这类链接，AnQiCMS 会自动生成对应的 URL，方便快捷。
    • 分类页面链接：您可以直接从网站已有的分类（如文章分类、产品分类）或单页面中选择一个作为导航目标。这意味着无需手动输入复杂的 URL，系统会自动关联。
    • 外部链接：如果您需要链接到站内某个自定义 URL、其他网站的页面，或任何符合 URL 规范的地址，都可以使用此选项。它提供了最大的灵活性。

  • 显示顺序：随心所欲调整位置 通过设置一个数字来决定导航链接的排列顺序，数字越小，显示越靠前。这使得您无需删除重添，就能轻松调整导航项的相对位置。

二、 前台页面展示：用 navList 标签点亮你的菜单

后台配置好导航后，如何在网站前台页面将其展示出来呢？AnQiCMS 使用其强大的模板引擎和 navList 标签，让这个过程变得直观而高效。

navList 标签是 AnQiCMS 模板语言中的一个核心组件，专门用于获取和渲染网站的导航数据。它的基本使用方式是 {% navList navs %} ... {% endnavList %}，其中 navs 是您为导航数据定义的变量名。

1. navList 标签的核心参数

  • typeId：关联后台导航类别 这是 navList 标签最重要的参数之一。它允许您指定要调用哪个后台配置的“导航类别”。例如，如果您创建了一个 ID 为 2 的“页脚导航”类别，那么在前台调用时就可以使用 {% navList footerNavs with typeId="2" %}。如果省略 typeId，它将默认调用 ID 为 1 的“默认导航”。

  • siteId：多站点数据调用 如果您在使用 AnQiCMS 的多站点管理功能，并且希望在一个站点中调用另一个站点的导航数据，可以通过 siteId 参数指定目标站点 ID。

2. 循环输出：遍历导航项

navList 标签获取到的数据是一个包含多个导航项的数组对象。您需要使用 for 循环来遍历这些导航项并将其显示出来。每个导航项在循环中通常被命名为 item，它具有以下重要的字段：

  • item.Title：导航项的显示名称。
  • item.Link：导航项的目标链接地址。
  • item.IsCurrent：一个布尔值，如果当前页面是该导航项所指向的页面，则为 true。这对于为当前活跃菜单项添加高亮样式非常有用。
  • item.NavList：如果当前导航项有子菜单（即后台配置的二级导航），这个字段会包含一个与 navs 结构类似的子导航数组。这使得您可以轻松地实现嵌套的下拉菜单。
  • item.PageId：如果导航项链接到某个分类或单页面，此字段会返回该分类或单页的 ID。这在需要进一步获取分类下的内容时非常有用。

3. 实战示例：打造你的导航菜单

  • 基本单层导航菜单

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

  • 带有二级下拉菜单的导航

    {% navList mainNavs %}
<nav class="main-navigation">
    <ul>
        {% for item in mainNavs %}
        <li {% if item.IsCurrent %}class="active"{% endif %}>
            <a href="{{ item.Link }}">{{ item.Title }}</a>
            {% if item.NavList %} {# 判断是否有子菜单 #}
            <ul class="sub-menu">
                {% for subItem in item.NavList %}
                <li {% if subItem.IsCurrent %}class="active"{% endif %}>
                    <a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
                </li>
                {% endfor %}
            </ul>
            {% endif %}
        </li>
        {% endfor %}
    </ul>
</nav>
{% endnavList %}

  • 结合其他标签：在下拉菜单中显示分类下的最新文章

    这个例子展示了 AnQiCMS 模板标签的强大组合能力。在二级导航项下，我们不仅显示了子分类链接，还进一步调用了该分类下的最新文章。

    ”`twig {% navList mainNavs %}