In website content operation, the navigation menu is the first door through which users interact with the website content. AnQiCMS (AnQi Content Management System) provides flexible,navListLabels, help us easily manage and display website navigation.Sometimes, in order to achieve specific layouts, styles, or make dynamic adjustments, we need to know the exact number of top-level navigation menu items on the website.

This article will thoroughly introduce how to get the website navigation list in the AnQiCMS template.navListThe number of top-level menu items.

UnderstandingnavListNavigation tags

In AnQiCMS template design,navListLabels are the core tools used to call and render the website navigation menu. They are used in the template in the following way:

{% navList navs %}
    {# 这里是导航项的循环内容 #}
{% endnavList %}

In this code,navsis a variable that carries the collection of all top-level navigation menu items obtained from the backend. Eachnavsofitem都是一个独立的导航对象，包含标题、链接，甚至可能包含其自身的子导航列表 (English)item.NavList)。我们的目标就是计算这个(English)navsHow many top-level menu items are in the collection.

use cleverlylengthFilter calculation count

AnQiCMS's template engine provides rich "filter" functions for processing and converting variable data. Among them,lengthThe filter is specifically used to obtain the length of strings, arrays (or lists), and other iterable objects.

Its basic usage is very intuitive:

{{ 变量 | length }}

Therefore, to getnavsThe number of items representing the top-level navigation menu, we just need tolengthapply thenavsfilter to the variable.

Practice: Step by step to get the number of navigation items

Now, let's gonavListTags andlengthCombine the filter to get and utilize the number of navigation items.

第一步：调用navList标签并定义变量

首先，在您的模板文件中，使用navList标签来获取导航数据。我们通常会将其结果赋值给一个变量，例如navs:

{% navList navs %}
    {# 此时，navs 变量已包含所有顶级导航项的数据 #}
    {# 这里可以继续循环输出导航，或者先获取数量 #}
{% endnavList %}

Step 2: UselengthFilter retrieves the count and displays

InnavListInside the tag,navsVariables are available. We can apply them directlylengthFilter to get the count of top-level menu items. To better utilize this value, we can use{% set %}Label it and store it in a new variable:

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

In this way,topLevelCountThe variable will accurately store the number of top-level navigation menu items on your website.

Advanced usage example: Dynamic style adjustment

Understood the number of top-level menu items, you can apply it to more flexible template design, such as dynamically adjusting CSS styles based on the number of menus.

If you want the navigation bar to be more compact when there are more than 5 top-level menu items; if fewer than 5, a more spacious layout is used:

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

In this example, we base it ontopLevelCountto dynamically generate<nav>Element was addedcompact-menuorwide-menuclass, thus achieving adaptive layout under different numbers of menu items.

Summary and application scenarios

PassnavListTag combinationlengthFilter, you can easily get the number of top-level navigation menu items of AnQiCMS website.This method is not only simple and efficient, but also provides great convenience for the personalized customization of the website.

Master this skill and you can apply it to various scenarios, such as:

  • Dynamic layout adjustment:Automatically switch navigation layout based on the number of menu items (such as horizontal, vertical, or different spacing).
  • JavaScript Interaction:Get the number of menus in the front-end script to initialize specific carousels, collapse menus, or other interactive components.
  • Content Audit and Management:Quickly check the navigation structure, ensure the number of top-level menus conforms to the website plan.
  • SEO Optimization:Ensure the rationality of navigation hierarchy and quantity, which helps search engines better understand the website structure.

Common Questions (FAQ)

  1. navListthe tag innavsCan the variable name be changed arbitrarily?Yes,navsIt is just an example variable name. You can change it to any name you like, such asmainNavItemsortopMenus. The key is to ensure{% navList 新变量名 %}/{{ 新变量名|length }}and{% for item in 新变量名 %}the variable names are consistent.

  2. Can I get the number of secondary menus or deeper level menus?Of course you can.navListEach top-level navigation item returned by the tagitemIn the object, if there is a submenu, there will be oneNavListField (for example)item.NavList). You can use{{ item.NavList|length }}Get the number of secondary menus under a specific top-level menu item. For example:

    {% navList navs %}
    {% for item in navs %}
        <p>顶级菜单 "{{ item.Title }}" 包含 {{ item.NavList|length }} 个子菜单。</p>
    {% endfor %}
{% endnavList %}

  3. If my website has not set any navigation menus,lengthwhat will the filter return?If your website has not set any navigation menus in the AnQiCMS backend, ortypeIdthere are no menu items in the specified navigation category,navsThe variable will be an empty list. In this case,navs|lengthit will be returned safely.0You can use{% if navs|length > 0 %}such conditional judgments to decide whether to render the navigation area.