在构建一个功能完善的网站时，清晰直观的导航菜单无疑是用户体验的核心要素之一。AnQiCMS 提供了功能强大且灵活多变的 navList 标签，让用户能够轻松创建和管理网站的顶部、侧边或底部导航菜单，满足不同的布局和内容展示需求。

navList 标签的基础用法

navList 标签是 AnQiCMS 模板引擎中用于获取网站导航列表的关键工具。它的基本使用方式非常直观，通常以一个开放标签 {% navList 变量名 %} 开始，中间包含用于遍历导航项的 for 循环，并以闭合标签 {% endnavList %} 结束。例如，我们可以将获取到的导航列表命名为 navs：

{% navList navs %}
    {# 在这里使用 for 循环遍历 navs 中的每个导航项 #}
{% endnavList %}

这个标签支持两个主要参数，用以精确控制您希望展示的导航内容：

  • typeId (导航列表 ID): 这是一个核心参数，用于指定您要调用的导航菜单类别。在 AnQiCMS 的后台设置中，您可以创建多个导航类别，例如“主导航”、“页脚导航”、“侧边导航”等。默认情况下，typeId 的值为 1，对应于后台的“默认导航”。如果您创建了其他导航类别，只需将 typeId 设置为对应类别的 ID，即可调用该类别的导航菜单。
  • siteId (站点 ID): 如果您正在使用 AnQiCMS 的多站点管理功能，并希望在当前站点的模板中调用其他站点的导航数据，可以通过指定 siteId 参数来实现。对于单站点用户，通常无需设置此参数。

解构导航项：理解其内部数据

在 navList 标签内部的 for 循环中，每个遍历到的 item 都代表一个导航链接，它包含了构建丰富菜单所需的所有信息。了解这些字段将帮助您更精细地控制导航菜单的显示：

  • Title (导航标题)：这是导航链接的显示名称，即用户在菜单上看到的文本。
  • SubTitle (子标题)：如果您的设计需要为导航项添加额外的副标题或辅助说明文字，可以在后台设置此字段，并在模板中调用。
  • Description (导航描述)：用于为导航项提供更详细的描述信息，可用于鼠标悬停时的提示或更复杂的布局。
  • Link (导航链接)：导航项指向的目标 URL。在后台，您可以灵活选择链接类型，包括内置链接（如首页、模型首页）、分类页面链接或任意外部链接。
  • PageId (对应分类 ID)：如果导航项是链接到一个分类页面，此字段将包含该分类的 ID。这在需要根据导航项获取更多分类相关内容时非常有用。
  • IsCurrent (是否当前链接)：这是一个布尔值，用于判断当前导航项是否对应于用户正在访问的页面。利用此属性，您可以轻松为当前页面对应的菜单项添加高亮样式，提升用户体验。
  • NavList (下级导航列表)：这是 navList 标签实现多级菜单的关键。如果一个导航项下面还有子菜单，那么 NavList 将会是一个包含这些子菜单项的数组，其内部结构与顶级导航项完全相同。AnQiCMS 支持最多两级的导航链接，即主菜单项下可以有一个子菜单层级。

构建多样化的导航结构

掌握了 navList 标签的参数和导航项的字段后，您就可以灵活地构建各种导航结构了。

1. 主导航、侧边导航与底部导航

最常见的应用场景是创建网站的主导航。通常，主导航会使用默认的 typeId=1。如果您的网站需要多个独立的导航区域，比如一个位于页面顶部的“主导航”，一个在页面侧边的“产品分类导航”，以及一个在页面底部的“友情链接”或“关于我们”导航，您可以在 AnQiCMS 后台的“网站导航设置”中创建不同的“导航类别”。例如，您可以创建一个名为“页脚导航”的新类别，系统会为其分配一个唯一的 typeId。然后，在模板中，您只需通过 typeId 参数调用相应的导航列表：

{# 顶部主导航 #}
<nav class="main-nav">
    {% navList mainNavs with typeId=1 %}
        <ul>
            {% for item in mainNavs %}
                <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 %}
        </ul>
    {% endnavList %}
</nav>

{# 底部页脚导航 #}
<footer class="footer">
    {% navList footerNavs with typeId=2 %} {# 假设页脚导航的 typeId 为 2 #}
        <ul>
            {% for item in footerNavs %}
                <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
            {% endfor %}
        </ul>
    {% endnavList %}
</footer>

2. 高级下拉菜单：集成内容与分类

navList 标签的强大之处不仅在于显示简单的链接列表，还在于能够与 archiveList（文档列表标签）和 categoryList（分类列表标签）等其他 AnQiCMS 标签结合，构建出内容丰富的下拉菜单。例如，您可以在主导航的某个分类菜单项下方，直接展示该分类下的热门文章或产品列表：

{# 假设这是一个产品分类导航，并在下拉菜单中展示产品 #}
<nav class="product-menu">
    <ul>
        {% navList productCategories with typeId=3 %} {# 假设产品分类导航的 typeId 为 3 #}
            {% for item in productCategories %}
                <li class="{% if item.IsCurrent %}active{% endif %}">
                    <a href="{{ item.Link }}">{{ item.Title }}</a>
                    {# 如果该导航项链接到分类，并且有 PageId #}
                    {% if item.PageId > 0 %}
                        <ul class="product-dropdown">
                            {% archiveList products with type="list" categoryId=item.PageId limit="5" %}
                                {% for product in products %}
                                    <li><a href="{{ product.Link }}">{{ product.Title }}</a></li>
                                {% endfor %}
                            {% endarchiveList %}
                        </ul>
                    {% endif %}
                </li>
            {% endfor %}
        {% endnavList %}
    </ul>
</nav>

同样地，如果您的导航项是父级分类，您可以在其下拉菜单中展示其直接的子分类：

”`twig {# 在导航下拉菜单中显示子分类 #}