In website content operation, the navigation menu is the first door for users to interact with the website content. AnQiCMS (AnQiCMS) provides flexiblenavListTags, help us easily manage and display website navigation. Sometimes, to achieve specific layouts, styles, or for dynamic adjustments, we need to know the specific number of top-level navigation menu items on the website.
This article will thoroughly introduce how to obtain the website navigation list in the AnQiCMS templatenavListof the top-level menu items.
UnderstandingnavListNavigation tags
In the AnQiCMS template design,navListTags 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 block,navsis a variable that carries the collection of all top-level navigation menu items obtained from the background. EachnavsofitemA navigation object is independent, containing a title, link, and may even include its own sub-navigation list (item.NavList) and our goal is to calculate thisnavsHow many top-level menu items are there in the set.
Use cleverlylengthThe filter calculates the number.
AnQiCMS's template engine provides a rich set of "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 representing the top-level navigation menu items list, we just need tolengtha filter tonavsthe variable.
Practice: Step by step to get the number of navigation items
Now, let's transformnavListTags andlengthCombine the filters to get and utilize the number of navigation items.
Step 1: CallnavListLabel and define variables
First, use it in your template file,navListLabel to get navigation data. We usually assign the result to a variable, such asnavs:
{% navList navs %}
{# 此时，navs 变量已包含所有顶级导航项的数据 #}
{# 这里可以继续循环输出导航，或者先获取数量 #}
{% endnavList %}
Second step: uselengthFilter to get the number and display
InnavListInside the tag,navsThe variable is available. We can apply it directlylengthA filter to get the number of top-level menu items. To better utilize this number, we can use{% set %}a label to 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 %}
By this means,topLevelCountThe variable will accurately store the number of top-level navigation menu items on your website.
An example of more advanced usage: Dynamic style adjustment
After understanding the number of top-level menu items, you can apply them to more flexible template designs, such as dynamically adjusting CSS styles based on the number of menus.
Assume you want the navigation bar to become more compact when the top-level menu items exceed 5; if fewer than 5, use a wider layout:
{% 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 on.topLevelCountvalue, dynamically add or remove<nav>to the elementcompact-menuorwide-menuBy class, it can achieve adaptive layout under different numbers of menu items.
Summary and Application Scenarios
BynavListLabel combinationlengthFilter, you can easily get the number of top-level navigation menu items on the AnQiCMS website.This method is not only simple and efficient, but also provides great convenience for the customization of the website.
After mastering this skill, you can apply it to various scenarios, such as:
- Dynamic layout adjustment:Automatically switch navigation layout based on the number of menus (such as horizontal, vertical, or different spacing).
- JavaScript interaction:In the frontend script, retrieve the number of menus to initialize specific sliders, collapsing menus, or other interactive components.
- Content auditing and management:Quickly check the navigation structure to ensure that the number of top-level menus conforms to the website plan.
- SEO Optimization:Ensure the rationality of navigation levels and quantities, which helps search engines better understand the website structure.
Frequently Asked Questions (FAQ)
navListin the labelnavsCan 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 within it remain consistent.Can I get the number of secondary menus or deeper level menus?Of course you can.
navListEach top-level navigation item returned by the tagitemIf there is a submenu in the object, there will be oneNavListfields such asitem.NavList）。You can go through{{ item.NavList|length }}To 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 %}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 or currentlytypeIdthere are no menu items in the specified navigation category, thennavsThe variable will be an empty list. In this case,navs|lengthit will be returned safely0. You can use{% if navs|length > 0 %}such conditional judgments to determine whether to render the navigation area.