Unveiling the AnQiCMS navigation tags:item.NavListThe internal structure of the attribute and the wisdom of building a multi-level menu.
As an experienced website operations expert, I am well aware of the importance of a flexible and efficient navigation system for user experience and website SEO.AnQiCMS showcases its strong capabilities in building enterprise-level websites with its high-performance architecture based on the Go language and excellent customizability.item.NavListUnderstand the internal structure of the attribute, and explore how to cleverly use it to build the multi-level navigation menu of our ideal.
In AnQiCMS template design, we often use tags to get the website navigation list. This tag is usually innavListthe form of{% navList navs %}This form appears, it will provide us with a collection containing all top-level navigation items. When we iterate over thisnavsWhen compiling a collection, each independent navigation item is usually nameditem. Then, thisitemcontains what information, especially the information within itNavListWhat properties are there, and how do you organize the submenu data?
itemThe skeleton and core information of the first-level navigation:
Firstly, each one fromnavListis obtained from the labelitemAll bear a series of core information, which is enough to support the display and function of a complete first-level navigation link. It includesTitle(the display text of the navigation item),Link(Click to jump to the target website),IsCurrent(A boolean value used to indicate whether the current page matches the navigation item, often used for highlighting the active state) and so on. In addition, there areSubTitle/DescriptionEquivalent to providing more descriptive properties,PageIdThis attribute is especially critical, as it may be associated with a specific category or single page ID, providing the possibility for deeper content integration.
After understanding these basic properties, we can easily build the top navigation bar of the website, allowing users to clearly see the various main sections of the website. However, modern websites often require more complex navigation forms, such as dropdown menus or multi-level nested menus, at this point, item.NavList[en] Just made an appearance.
In-depth analysisitem.NavList[en] The mystery of multi-level menus.
[en] Unlike some CMS that treat sub-menus as a completely independent entity, AnQiCMS cleverly provides within each main navigation item.NavListThis property is. What's more noteworthy is that itNavListitself is also aarray, carrying all the direct child navigation items of the current navigation item.
And this nestedNavListEach sub-navigation item, its internal structure, and its parent navigation item, which is what you are traversing through,item——iscompletely consistent. This means that a sub-menu item also hasTitle/Link/IsCurrentThis design pattern of recursion for all fields that are the same is a highlight of AnQiCMS in navigation management, bringing extremely high flexibility and scalability.
Imagine if you had a primary navigation item called "Product Center", itsitem.NavListMay include sub-navigation items such as 'Electronics', 'Home Goods', 'Beauty and Personal Care', etc. If 'Electronics' itself needs to be further divided into 'Phones', 'Computers', 'Digital Accessories', then within the sub-navigation item 'Electronics', there will also be aNavListProperties, which include deeper sub-items such as 'mobile phone', 'computer', etc.
This structure allows you to render in a highly consistent and logical manner in the front-end template based on the level of navigation settings in the background, making it easy to achieve a two-level even multi-level dropdown menu effect.
Application Practice: Flexible Construction of Dynamic Navigation Menu
Understooditem.NavListAfter the structure of the navigation bar is implemented, it becomes very intuitive to realize multi-level navigation in the template. We usually use nestedforLoop and conditional judgment to complete this task:
{% navList navs with typeId=1 %}
<ul>
{%- for item in navs %} {# 遍历一级导航 #}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{item.Title}}</a>
{%- if item.NavList %} {# 判断是否存在子导航 #}
<ul class="sub-menu">
{%- for inner in item.NavList %} {# 遍历二级导航 #}
<li class="{% if inner.IsCurrent %}active{% endif %}">
<a href="{{ inner.Link }}">{{inner.Title}}</a>
{# 如果需要更多层级，可以继续嵌套 inner.NavList #}
{%- if inner.NavList %}
<ul class="third-level-menu">
{%- for thirdItem in inner.NavList %} {# 遍历三级导航 #}
<li><a href="{{ thirdItem.Link }}">{{thirdItem.Title}}</a></li>
{%- endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endnavList %}
As you can see,{% if item.NavList %}This conditional judgment is crucial, it ensures that the navigation item will only be rendered when it indeed contains a submenu<ul>Labels, avoiding unnecessary empty structures, makes the HTML code more concise and semantically meaningful.
Furthermore, combiningPageIdProperties, we can even dynamically display related content in the navigation dropdown menu. For example, in the dropdown menu of a product category navigation item, we can not only display its subcategories, but also directly throughPageId(If the navigation item is associated with a product category) callarchiveListTags, display a list of popular products under this category, thereby creating a "Mega Menu" with more features and a higher user conversion rate.
{# 示例：在二级导航下显示对应分类的产品列表 #}
{% navList navList with typeId=1 %}
<ul>
{%- for item in navList %}
<li>
<a href="{{ item.Link }}">{{item.Title}}</a>
{%- if item.NavList %}
<ul class="nav-menu-child">
{%- for inner in item.NavList %}
<li>
<a href="{{ inner.Link }}">{{inner.Title}}</a>
{% if inner.PageId > 0 %} {# 假设PageId关联分类 #}
{% archiveList products with type="list" categoryId=inner.PageId limit="8" %}
{% if products %}
<ul class="nav-menu-child-child"> {# 显示产品列表 #}
{% for productItem in products %}
<li><a href="{{productItem.Link}}">{{productItem.Title}}</a></li>
{% endfor %}
</ul>
{% endif %}
{% endarchiveList %}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endnavList %}
This design philosophy perfectly fits the positioning of AnQiCMS to provide efficient, customizable, and easy-to-expand content management solutions.It closely integrates the backend navigation configuration with the flexible front-end display, empowering operators and developers to easily handle various complex content display requirements.item.NavListThe nested structure, we can not only build beautiful website menus, but also transform them into powerful tools that guide users, improve conversion rates, and optimize SEO.
Common Questions and Answers (FAQ)
1. How many levels of nesting does AnQiCMS navigation menu support?
AnQiCMSitem.NavListDesign supports theoretically infinite levels of nesting, because the structure of each sub-navigation item is completely consistent with its parent, and can continue to containNavList.However, from the perspective of actual user experience and website usability, the AnQiCMS backend management interface usually limits the navigation links to 2nd or 3rd level to maintain simplicity and operability.In the template, you can decide on the number of levels to render based on business requirements and design complexity, but it is generally recommended not to exceed three levels to avoid user confusion.
How to determine if a navigation item is in the 'active' state of the current page?
Each navigation item (including the main navigation item and sub-navigation items) has aIsCurrentBoolean attribute. In the template, you can use such conditional judgments to add a specific CSS class to the currently active navigation item (for example,{% if item.IsCurrent %}to add a specific CSS class to the currently active navigation item (for example,activeThus, the highlighting effect is achieved, enhancing the user's perception of the current position.
3. How can I display other dynamic content besides the submenu (such as popular articles or specific images) in a dropdown menu of a navigation item?
This is exactlyPageIdThe strength of attributes and the powerful tag system of AnQiCMS template. If your navigation item is associated with a category ID or a single page ID in the background, this ID will be passed throughPageIdPass to the front-end. You can use it after traversing the submenu items of the navigation item.{% if inner.PageId > 0 %}such judgment, combined witharchiveList/categoryList/bannerListetc. AnQiCMS built-in tags, according toinner.PageIdTo fetch and render the latest articles, popular products, or specific Banner images and other dynamic content under this category, thereby achieving a richer 'giant menu' effect.