How the example code in the `tag-navList.md` document helps developers understand the implementation of multi-level navigation?

As an expert deeply involved in the operation of the Anqi CMS website, I know that a highly efficient and flexible navigation system is crucial for the website's user experience and search engine optimization (SEO). Anqi CMS provides strong support in navigation management, especially itsnavListTemplate tag, providing developers with a clear and powerful tool to understand and implement multi-level navigation.

navListTag: The cornerstone of multi-level navigation

navListThe tag is a core tool in the Anqi CMS template engine, specially used for obtaining the website navigation list.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 drop-down navigation with sub-menus, even to deeper levels of associated content display.

The basic usage of this tag is simple and clear, usually with{% navList navs %}...{% endnavList %}It is presented in the form. Here,navsIt is an array composed of navigation items, through,forcycling through you can sequentially access the details of each navigation item.navListTags support throughtypeIdParameters specify calling different navigation categories in the background, which makes it easy for a website to manage and present multiple independent navigation structures, such as main navigation, footer navigation, or sidebar navigation.siteIdParameters provide the flexibility of data calls for multi-site management.

Reveal multi-level structure:NavListThe mysteries of attributes

navListThe label can achieve multi-level navigation because each navigation item (i.e., the item in the loop) may contain an embedded attribute nameditemvariable) may contain an embedded attribute namedNavList. ThisNavListThe attribute itself is also an array, which contains elements with the same field structure as the parent navigation item, for exampleTitle/Link/IsCurrentThis kind of recursive data structure design is the fundamental for rendering navigation at any depth.

When developers traverse the first-level navigation items, they can checkitem.NavListWhether it exists or is not empty, to determine whether the current navigation item has a submenu. If it exists, it can be used again.forLoop throughitem.NavListThe child navigation item, thus easily rendering a 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 Anqi CMS backend navigation settings 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.When a navigation link is associated with a category or page, its correspondingPageIdThe property will benavListThe output reflects the label.

Just this one.PageIdThe field provides developers with the powerful ability to deeply associate navigation with actual content. By combining with other security CMS template tags, such asarchiveList(Document list) orcategoryList(Category list), developers can further expand the navigation menu to not only display navigation titles but also directly show related content lists or subcategories in the drop-down menu.

For example, when building the navigation of a product website, the first-level navigation can be "Product Center", the second-level navigation can be "Electronic Products", and the second-level navigation item "Electronic Products" may be associated with some product category in the background.PageIdAt this time, developers can use this in the front-end template,PageIdthrough.archiveListExtract the latest product list under the "Electronics" category and display it directly in the dropdown menu, greatly enhancing the user experience.

Example analysis: from two layers to a deeper level of implementation

Of Security CMSnavListThe code example clearly demonstrates how to build a two-level navigation:

{% 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 %}

This example uses a simple{% if item.NavList %}Evaluate, implemented the rendering of the second-level dropdown menu. To go further on this basis and implement a third-level or even deeper navigation, it is recommended to refer to the 'Common Usage Examples' in the document, and use the second-level navigation items'PageIdCall as a parameter, dynamicallyarchiveListorcategoryListTo 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.navListThe tag, with its data-driven features and flexible nesting capabilities, has become an indispensable tool for Anqi CMS to achieve high-performance, scalable multi-level navigation.

Frequently Asked Questions (FAQ)

Ask: It seems that the navigation setting interface of Anqi CMS backend only supports up to two levels of navigation. So how can the front-end template implement the display of three levels or more?

Answer: The Anqi CMS backend navigation settings are mainly used to manage the hierarchical relationship and link types of navigation items, butnavListTags in the templateNavListThe attribute is recursively designed. 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.navListwith the tag andcategoryListorarchiveListTags, using secondary navigation items.PageIdProperties, dynamically fetching and rendering third-level and even deeper content or classification lists to achieve multi-level navigation display visually.

Ask: How to usenavListAdd the 'active' class name to the currently visited navigation item for highlighting?

Answer:navListEach navigation item object returned by the tag contains aIsCurrentBoolean property. When the current loop 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 to the matching navigation item to highlight it.

Can I usenavListShould the tag display subcategories and the latest documents under the category in a dropdown menu?

Can be. You can use the navigation item in the second level navigation items to get the direct child category list of the category it is associated with (usingPageId（if it is associated with some category）to get the direct child category list of the category (usingcategoryListLabel). Then, at the same level or a deeper layer, you can use it againPageIdor combine the ID of a child category.archiveListTag to retrieve and display the latest document list under the category. This requires proper nesting and conditional judgment in the template to ensure the content is presented as expected.