As an experienced security CMS website operation personnel, I am well aware that a clear and user-friendly navigation system is crucial for the website user experience and search engine optimization.Multilevel navigation, especially navigation with submenus, can help users quickly locate the information they need and improve the overall usability of the website.item.NavListThe field is the key to realizing this function.
UnderstandingnavListTags anditem.NavListstructure
In the template system of Anqi CMS, we usenavListThe tag is used to obtain the navigation data of the website. This tag will return a list of navigation items.itemEach one of them.itemAll represent a navigation menu item, such as the "Home
Each navigationitemNot only includes its own title (Title), link (Link), whether the current page (IsCurrent）等信息，更重要的是，如果它是一个父级菜单，它会包含一个名为EnglishNavListfield. ThisNavList字段本身又是一个导航EnglishitemThe list, storing all the submenu items under the parent menu. This structure allows us to build multi-level navigation recursively, ensuring the clarity and clarity of the navigation hierarchy.
Check if there is a sub-navigation logic
Determine a navigation in the templateitemWhether it has a sub-navigation, the core is to check itsNavListField. In the template engine syntax similar to Django used in AnQi CMS, we can directly useitem.NavListplaced in{% if %}tag for boolean judgment. Ifitem.NavListContains sub-menu items (i.e., it is a non-empty list), then{% if item.NavList %}the condition will be evaluated as true (true); Conversely, ifitem.NavListit is empty or undefined, the condition is false (false).
This concise judgment method allows template developers to easily control the rendering logic of the submenu. When the condition is true, we can render the container of the submenu (for example<ul>or<dl>Tag），and iterate over ititem.NavListto display each submenu item.
Practice application for building multi-level navigation
To more specifically explain how to judge and render sub-navigation in templates, let's look at a typical multi-level navigation structure example.假设我们需要构建一个两级导航，其中主菜单项可能包含下拉子菜单。
{% navList navs %}
<ul class="main-nav">
{%- for item in navs %}
<li class="nav-item {% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}" class="nav-link">{{item.Title}}</a>
{# 判断是否存在子导航 #}
{%- if item.NavList %}
<ul class="sub-nav">
{%- for inner_item in item.NavList %}
<li class="sub-nav-item {% if inner_item.IsCurrent %}active{% endif %}">
<a href="{{ inner_item.Link }}" class="sub-nav-link">{{inner_item.Title}}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endnavList %}
In the above code, the outermostforloop iterates over all top-level navigation items. In eachitemInside, we first rendered the main navigation link. Next,{%- if item.NavList %}This line of code is used to judge whetheritemthere is a sub-navigation. If there is a sub-navigation, the template engine will enterifBlock internal, render asub-navclass:<ul>Tag as a container for submenu, and use the innerforto iterateitem.NavListeach of theminner_itemThus, render all sub-menu items and their links.This method ensures that the corresponding HTML structure is generated only when there is child navigation, maintaining the code's cleanliness and efficiency.
Flexible application and **practice
Anqi CMS'snavListTags also supporttypeId参数，This allows website operators to create different navigation categories (such as main navigation, footer navigation, sidebar navigation, etc.) in the background according to their needs. By specifyingnavListtags with different meanings.typeIdYou can call different navigation menus in different areas of the website to achieve more flexible page layout and content display.
In practical operation, in order to provide a better user experience and website performance, it is recommended:
- Semantic HTML: Use
<ul>,<li>,<a>Build navigation with tags such as 'auto', maintaining a good semantic structure. - CSS control: Combine CSS to control the display and hiding of submenus, for example, the common mouse hover to display dropdown menu effect.
- Administrate: Ensure that the navigation levels and links are correctly configured in the 'Website Navigation Settings' of the Anqi CMS backend, so
item.NavListit can accurately reflect the structure you expect.
Common Questions and Answers (FAQ)
Q1: Why is my submenu not displayed on the website frontend, although I have configured it in the backend?
A1:This is usually due to the lack ofitem.NavListThe judgment and iteration logic has caused this. Please check your template code to ensure that you have used it inside the parent navigation item.{% if item.NavList %}Check for the existence of sub-navigation and, if the condition is true, it nested oneforLoop to renderitem.NavListEach submenu item. If the template logic is correct, please confirm that the child navigation is correctly associated with the parent navigation in the background navigation settings.
Q2: How many levels does the navigation of AnQi CMS support?item.NavListCan it be nested infinitely?
A2:Based on the design agreement of Anqi CMS, the navigation list usually supports up to two levels of navigation links, that is, a main menu item can contain one level of sub-menu. This meansitem.NavListThe field itself will no longer contain deeper levelsNavList. If more complex deep-level navigation is required, consider custom development or adjusting the navigation design to accommodate the existing structure.
Q3: Can I create different navigation menus for different areas of the website (such as the top, sidebar, footer)?
A3:Absolutely. The API of thenavListTags providetypeIdParameters, you can create multiple navigation categories in the "Navigation Category Management" backend, such as "Main Navigation", "Footer Navigation", "Sidebar Navigation". Then, in different areas of the template,{% navList navs with typeId="[您的导航类别ID]" %}Call the corresponding navigation menu to achieve flexible page layout.