在网站内容运营中，导航菜单是用户与网站内容互动的第一扇门。安企CMS（AnQiCMS）提供了灵活的 navList 标签，帮助我们轻松管理和展示网站导航。有时，为了实现特定的布局、样式或进行动态调整，我们需要知道网站顶级导航菜单项的具体数量。
这篇文章将详细介绍如何在 AnQiCMS 的模板中，获取网站导航列表 navList 中顶级菜单项的数量。
理解 navList 导航标签
在 AnQiCMS 的模板设计中，navList 标签是用于调用和渲染网站导航菜单的核心工具。它通过以下方式在模板中使用：
{% navList navs %}
{# 这里是导航项的循环内容 #}
{% endnavList %}
在这段代码中，navs 是一个变量，它承载了从后台获取到的所有顶级导航菜单项的集合。每个 navs 中的 item 都是一个独立的导航对象，包含标题、链接，甚至可能包含其自身的子导航列表 (item.NavList)。我们的目标就是计算这个 navs 集合里有多少个顶级菜单项。
巧用 length 过滤器计算数量
AnQiCMS 的模板引擎提供了丰富的“过滤器”功能，用于对变量数据进行处理和转换。其中，length 过滤器就是专门用来获取字符串、数组（或列表）以及其他可迭代对象长度的。
它的基本用法非常直观：
{{ 变量 | length }}
因此，要获取 navs（代表顶级导航菜单项列表）的数量，我们只需将 length 过滤器应用到 navs 变量上。
实践：一步步获取导航项数量
现在，让我们将 navList 标签和 length 过滤器结合起来，获取并利用导航项的数量。
第一步：调用 navList 标签并定义变量
首先，在您的模板文件中，使用 navList 标签来获取导航数据。我们通常会将其结果赋值给一个变量，例如 navs：
{% navList navs %}
{# 此时，navs 变量已包含所有顶级导航项的数据 #}
{# 这里可以继续循环输出导航，或者先获取数量 #}
{% endnavList %}
第二步：使用 length 过滤器获取数量并显示
在 navList 标签的内部，navs 变量是可用的。我们可以直接对其应用 length 过滤器来获取顶级菜单项的数量。为了更好地利用这个数值，我们可以使用 {% set %} 标签将其存储在一个新的变量中：
{% navList navs %}
{% set topLevelCount = navs|length %} {# 获取顶级菜单项的数量并存储在 topLevelCount 变量中 #}
<p>当前网站共有 <strong>{{ topLevelCount }}</strong> 个顶级导航菜单项。</p>
<ul class="main-nav">
{% for item in navs %}
<li class="nav-item">
<a href="{{ item.Link }}">{{ item.Title }}</a>
{# 这里可以继续处理子导航项 item.NavList #}
</li>
{% endfor %}
</ul>
{% endnavList %}
通过这种方式，topLevelCount 变量将精确地存储了您网站顶级导航菜单项的数量。
更高级的用法示例：动态样式调整
了解了顶级菜单项的数量后，您可以将其应用于更灵活的模板设计，例如根据菜单数量动态调整 CSS 样式。
假设您希望当顶级菜单项超过 5 个时，导航栏的样式变得更紧凑；如果少于 5 个，则使用更宽敞的布局：
{% navList navs %}
{% set topLevelCount = navs|length %}
<nav class="main-navigation {% if topLevelCount > 5 %}compact-menu{% else %}wide-menu{% endif %}">
<ul>
{% for item in navs %}
<li class="nav-item">
<a href="{{ item.Link }}">{{ item.Title }}</a>
{# 处理子菜单 #}
{%- if item.NavList %}
<ul class="sub-nav">
{%- for inner in item.NavList %}
<li class="sub-nav-item"><a href="{{ inner.Link }}">{{ inner.Title }}</a></li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
{% endnavList %}
在这个例子中，我们根据 topLevelCount 的值，动态地为 <nav> 元素添加了 compact-menu 或 wide-menu 类，从而实现不同数量菜单项下的自适应布局。
总结与应用场景
通过 navList 标签结合 length 过滤器，您可以轻松获取 AnQiCMS 网站顶级导航菜单项的数量。这种方法不仅简单高效，而且为网站的个性化定制提供了极大的便利。
掌握这一技巧后，您可以将其应用于多种场景，例如：
- 动态布局调整： 根据菜单数量自动切换导航布局（如横向、纵向，或不同间距）。
- JavaScript 交互： 在前端脚本中获取菜单数量，以初始化特定的轮播、折叠菜单或其他交互组件。
- 内容审计与管理： 快速检查导航结构，确保顶级菜单数量符合网站规划。
- SEO 优化： 确保导航层级和数量的合理性，有助于搜索引擎更好地理解网站结构。
常见问题 (FAQ)
navList标签中的navs变量名称可以随意更改吗？ 是的，navs只是一个示例变量名。您可以将其更改为任何您喜欢的名称，例如mainNavItems或topMenus。关键在于确保{% navList 新变量名 %}、{{ 新变量名|length }}和{% for item in 新变量名 %}中的变量名始终保持一致。我能否获取二级菜单或更深层级菜单的数量？ 当然可以。
navList标签返回的每个顶级导航项item对象中，如果存在子菜单，会有一个NavList字段（例如item.NavList）。您可以通过{{ item.NavList|length }}来获取特定顶级菜单项下的二级菜单数量。例如：{% navList navs %} {% for item in navs %} <p>顶级菜单 "{{ item.Title }}" 包含 {{ item.NavList|length }} 个子菜单。</p> {% endfor %} {% endnavList %}如果我的网站没有设置任何导航菜单，
length过滤器会返回什么？ 如果您的网站在 AnQiCMS 后台未设置任何导航菜单，或者当前typeId指定的导航类别中没有任何菜单项，那么navs变量将是一个空的列表。在这种情况下，navs|length将安全地返回0。您可以使用{% if navs|length > 0 %}这样的条件判断来决定是否渲染导航区域。