How to judge whether the `item.NavList` field exists in the Anqi CMS template?

As an experienced CMS website operation person in the security industry, I know that a clear and user-friendly navigation system is crucial for the website's user experience and search engine optimization.Multi-level navigation, especially navigation with sub-menus, can help users quickly locate the information they need, enhancing the overall usability of the website.In the Anqi CMS template,item.NavListThe field is the key to realizing this function.

UnderstandingnavListwith the tag anditem.NavListstructure

In the template system of Anqi CMS, we usenavListTag to get the navigation data of the website. This tag will return a navigation item (item) list. EachitemThey all represent a navigation menu item, such as the "Home", "Products", "About Us" in the main menu, etc.

Each navigationitemNot only contains its own title (Title), link (Link), whether it is the current page (IsCurrent) Information, more importantly, if it is a parent menu, it will contain a field namedNavLista field that containsNavListis itself a navigationitemThe list stores all the sub-menu items under the parent menu. This structure allows us to build multi-level navigation recursively, ensuring the clarity of the navigation hierarchy.

Whether there is a logical navigation child

Determine a navigation in the templateitemWhether it has a child navigation, the core is to check itsNavListfield. In the template engine syntax used by AnQi CMS, similar to Django, we can directly passitem.NavListin{% if %}tags for boolean judgments. Ifitem.NavListAn item with sub-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, then the condition is false (false)

This concise judgment method allows template developers to easily control the rendering logic of sub-menus. When the condition is true, we can render the container of the sub-menu (such as<ul>or<dl>Label, and iterate through ititem.NavListTo display each submenu item

Practice application of building multi-level navigation

To illustrate how to judge and render sub-navigation in templates more specifically, let's look at an example of a typical multi-level navigation structure.Assuming we need to build a two-level navigation, where the main menu items may contain drop-down submenus.

{% 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 outerforLoop through all top-level navigation items. In eachitemInside, we first rendered the main navigation link. Then,{%- if item.NavList %}this line of code is to judge whether there isitema sub-navigation. If there is a sub-navigation, the template engine will enterifInside the block, render asub-navclass<ul>tag as the container for the submenu and use the innermostforLoop throughitem.NavListeachinner_itemThus, it renders all submenu items and their links. This method ensures that the corresponding HTML structure is generated only when there are sub-navigation, maintaining the code's neatness and efficiency.

Apply flexibly with **practice

Of Security CMSnavListTags also supporttypeIdParameters, this allows website operators to create different navigation categories as needed in the background (such as main navigation, footer navigation, sidebar navigation, etc.). By specifyingnavListlabels to indicate differenttypeIdYou can call different navigation menus in different areas of the website to achieve more flexible page layout and content display.

In practice, to provide a better user experience and website performance, it is recommended that:

• Semantic HTML: Use<ul>,<li>,<a>Use tags such as navigation to maintain good semantic structure.
• CSS control: Combine CSS to control the display and hide of the submenu, such as the common mouse hover to display the dropdown menu effect.
• Background management: Make sure to correctly configure the navigation levels and links in the Anq CMS backend, so thatitem.NavListit can accurately reflect the structure you expect.

Frequently Asked Questions (FAQ)

Q1: Why is my submenu not displayed on the website front-end, but I have configured it clearly in the background?

A1:This is usually due to the lack of support foritem.NavListThe judgment and traversal logic has caused. Please check your template code to ensure that you have used within the parent navigation item,{% if item.NavList %}Check if there is a nested sub-navigation and if the condition is true, it nested oneforLoop to renderitem.NavListEach sub-menu item. If the template logic is correct, please confirm that the sub-navigation is correctly associated under the parent navigation in the background navigation settings.

Q2: The navigation of AnQi CMS supports how many levels?item.NavListCan it be nested infinitely?

A2:According to the Anqi CMS design convention, navigation lists typically support up to two-level navigation links, meaning that a main menu item can contain a layer of submenus. This impliesitem.NavListThe field itself does not contain any deeper levelsNavList. If a more complex deep-level navigation is required, it may be necessary to consider custom development or adjusting the navigation design to fit the existing structure.

Q3: Can I create different navigation menus for different areas of the website (such as the top, sidebar, footer)?

A3:Absolutely. Anqi CMS'navListTags providedtypeIdParameter, 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, through{% navList navs with typeId="[您的导航类别ID]" %}Call the corresponding navigation menu to achieve flexible page layout.