As an expert deeply involved in the operation of the Anqi CMS website, I am well aware that an efficient and flexible navigation system is crucial for the user experience of the website and search engine optimization (SEO). Anqi CMS provides strong support in navigation management, especially in thenavListTemplate tags provide clear and powerful tools for developers to understand and implement multi-level navigation.
navListTags: the foundation of multi-level navigation.
navListTags are core tools used to retrieve the website navigation list in AnQi CMS template engine.It exposes the navigation data configured in the background in a structured form to the front-end template, allowing developers to freely build various complex navigation menus, from simple top menus to complex dropdown navigation with sub-menus, even to the deeper level of associated content display.
The basic usage of this tag is concise and clear, usually with{% navList navs %}...{% endnavList %}is presented in the form. Here,navsis an array composed of navigation items, accessed throughforto loop through and visit each navigation item's details one by one.navListTags support throughtypeIdThe parameter specifies the invocation of different navigation categories in the background, which allows a website to easily manage and present multiple independent navigation structures, such as main navigation, footer navigation, or sidebar navigation.siteIdThe parameter provides flexibility in data calls for multi-site management.
Reveal the mysteries of multi-level structures:NavListThe secrets of properties
navListTags can achieve multi-level navigation because each navigation item returned (i.e., in the loop) may contain an embedded attribute nameditem(variable) may contain an embedded attribute namedNavList. ThisNavListThe property itself is an array, which contains elements with the same field structure as the parent navigation item, for exampleTitle/Link/IsCurrentEnglish. This recursive data structure design is the fundamental for arbitrary depth navigation rendering.
Developers can check while traversing the first-level navigation items,item.NavListDoes it exist or is it not empty, to determine whether the current navigation item has a submenu. If it exists, it can be used againforto iterateitem.NavListThe sub-navigation items, thus easily rendering the second-level menu.This pattern can theoretically be nested infinitely, allowing developers to build multi-level navigation structures according to actual needs and backend data depth.
Flexible backend configuration and frontend rendering
The backend navigation settings of Anqi CMS allow website operators to create navigation categories and add navigation links.These links can be built-in home pages, model home pages, or linked to specific category pages or independent pages, or even links to external websites.PageIdThe attribute will benavListThe output reflects in the label.
[en] It is this one.PageIdField, providing developers with powerful capabilities to deeply associate navigation with actual content. By combining other security CMS template tags,archiveList(Document list) orcategoryList(Category list), developers can further expand the navigation menu to not only display navigation titles but also directly present related content lists or subcategories in the dropdown menu.
For example, when building the navigation of a product website, the first-level navigation can be "Product CenterPageId. At this point, the developer can use this in the front-end template.PageIdThrougharchiveListLabel the latest product list under the "Electronics" category and directly display it in the dropdown menu, greatly improving the user experience.
Example analysis: From two layers to a deeper level of implementation
Anqi CMS'snavList代码示例清晰地展示了如何构建一个两级导航：English
{% navList navs %}
<ul>
{%- for item in navs %}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{item.Title}}</a>
{%- if item.NavList %} {# 检查是否存在二级导航 #}
<dl>
{%- for inner in item.NavList %} {# 遍历二级导航 #}
<dd class="{% if inner.IsCurrent %}active{% endif %}">
<a href="{{ inner.Link }}">{{inner.Title}}</a>
</dd>
{% endfor %}
</dl>
{% endif %}
</li>
{% endfor %}
</ul>
{% endnavList %}
此示例通过简单的English{% if item.NavList %}Evaluate, the rendering of the second-level dropdown menu has been implemented. If you want to go further from this, and implement third-level or even deeper navigation, you can refer to the approach in the 'Common Usage Examples' section of the documentation.PageIdAs a parameter, dynamically invokearchiveListorcategoryListto retrieve and render associated content.
For example, a second-level navigation item(inner)is associated with a category, and we can expand its dropdown content like this:
{# 假设这是二级导航项 'inner' 的内部 #}
<li>
<a href="{{ inner.Link }}">{{inner.Title}}</a>
{% if inner.PageId > 0 %} {# 检查是否关联了分类/页面 #}
{% categoryList categories with parentId=inner.PageId %} {# 获取该分类的子分类 #}
{% if categories %}
<ul class="nav-menu-tertiary">
{% for category in categories %}
<li>
<a href="{{ category.Link }}">{{category.Title}}</a>
{# 这里可以继续嵌套，例如获取此子分类下的文档 #}
{% archiveList docs with type="list" categoryId=category.Id limit="5" %}
{% if docs %}
<ul>
{% for doc in docs %}
<li><a href="{{ doc.Link }}">{{doc.Title}}</a></li>
{% endfor %}
</ul>
{% endif %}
{% endarchiveList %}
</li>
{% endfor %}
</ul>
{% endif %}
{% endcategoryList %}
{% endif %}
</li>
By using this combination, developers can not only achieve the visual presentation of multi-level navigation, but also make the navigation menu a direct content entry point, greatly enhancing the interactivity and information density of the website.navListLabel with its data-driven features and flexible nesting capabilities has become an indispensable tool for AQ CMS to achieve high performance and scalable multi-level navigation.
Common Questions (FAQ)
Question: The navigation setting interface of Anqi CMS backend seems to support only two-level navigation. How can the front-end template implement the display of three-level or more navigation?
答：English CMS backend navigation settings are mainly used to manage the hierarchical relationship and link type of navigation items, butnavListTags in the templateNavListThe property is designed recursively. This means that if your content categories (such as article categories or product categories) themselves have a three-level or more hierarchical structure, and if your secondary navigation items are associated with some parent level of these multi-level categories, then you can combine them in the front-end template.navListTags andcategoryListorarchiveListTags, using secondary navigation items toPageIdproperties, dynamically pulling and rendering out third-level and even deeper-level content or category lists, thus realizing a multi-level navigation display in terms of visual.
问：How to usenavListTo add the 'active' class to the navigation item for the current user's access
Answer:navListEach navigation item object returned by the tag contains aIsCurrentBoolean attribute. When the current navigation item matches the page being accessed by the user,IsCurrentthe value of the attribute istrue. Developers can directly use conditional judgment in the template{% if item.IsCurrent %}active{% endif %}Add CSS class names to matching navigation items to highlight them.
Q: Can I usenavListShould the tags display subcategories and the latest documents under the category in a dropdown menu?
答：Yes. You can use the navigation item to get the direct child category list of the category it is associated with when traversing the second-level navigation items.PageId(if it is associated with a category) using categoryListLabel）。Then, at the same level or a deeper level, you can use it againPageIdor the ID of a subcategory, combinedarchiveListLabels to retrieve and display the latest document list under the category. This requires appropriate nesting and conditional judgment in the template to ensure that the content is presented as expected.