How to build a multi-level website navigation menu using the `navList` tag and support dynamic display of categories or document links?

As an experienced website operations expert, I am well aware of the importance of a clear and efficient website navigation system in enhancing user experience, guiding content consumption, and optimizing search engine rankings (SEO).In AnQiCMS (AnQiCMS), such a well-designed content management system, building flexible and variable navigation menus, and enabling it to intelligently display dynamic content, is the key to operators achieving fine-grained content layout.Today, let's delve deeply into Anqi CMSnavListThe mystery of the tag, see how it helps us achieve this goal.

navListTag: The cornerstone of website navigation.

In AnQi CMS,navListTags are the core tools for building website navigation menus. They do not simply pull static links, but cleverly combine the background configuration of navigation structures with front-end template rendering, allowing us to create menus ranging from simple single-level menus to complex secondary (even more levels) dropdown menus, and seamlessly connect with the website's categories or document content to achieve truly dynamic navigation.

Imagine your website as a large shopping mall, and the navigation menu is like the signposts of the mall.A clear and intelligent sign can help customers quickly find the products they like, while a chaotic sign will only make people lose their way.navListThe label is exactly the powerful brush provided by AnQi CMS for us to draw such an intelligent sign.

Backend first: the basic construction of the navigation menu.

While usingnavListBefore the tag, we first need to configure the navigation menu in the Anqi CMS backend. This is the foundation for the front-end tag to work properly.

1. Navigation Category Management: Anqi CMS allows us to create multiple navigation categories, such as "main navigation", "footer navigation", or "sidebar navigation", etc.This means we can define independent navigation structures for different areas of the website.Each navigation category has a uniquetypeIdThis ID will be called on the front endnavListUsed when labeling.

2. Navigation link settings: Under the selected navigation category, we can add specific navigation links. Here isnavListThe embodiment of label flexibility:

   • display name: The text displayed for navigation items on the front end.
   • Subtitle/Description: Add additional information to navigation items to enrich the display effect.
   • Link Type: This is crucial! We can choose:
     • Built-in link: Such as the homepage, the homepage of specific models (articles, products), etc.
     • Category page linkDirectly associated with the existing content categories or single pages on the website. When this type is selected, the navigation item will receive aPageIdwhich will become the key for our subsequent dynamic content calls.
     • External link指向任何站内或站外的自定义URL。
   • Parent navigation: By selecting the parent navigation, we can easily build a two-level navigation menu.For example, you can set "Product Center" as the primary navigation, and the "Mobile phone" and "Computer" under it as the secondary navigation of "Product Center".

在模板中navList标签的应用：从结构到内容

一旦后台导航配置完成，我们便可以在前端模板（通常是.htmlFile) in usenavListTag to render these menus. The template syntax of Anqi CMS is similar to Django, very intuitive.

navListThe basic syntax of the tag is:{% navList navs %}...{% endnavList %}.navsis a variable name, you can customize it, it will carry the navigation data obtained from the backend, and the data will be provided in the form of an array of objects, which means we need to go throughforLoop to iterate through these navigation items.

<nav class="main-navigation">
    <ul>
        {% navList navs %}
            {%- 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>
                                </li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </li>
            {% endfor %}
        {% endnavList %}
    </ul>
</nav>

This code demonstrates a classic two-level navigation structure. Byitem.NavListWe can determine whether the current first-level navigation item contains a sub-menu and use nestedforloops to render the second-level menu.item.IsCurrentwhich can help us add the navigation item currently being visited.activeClass, implement highlighting to enhance user experience.

Dynamic Display: The Advanced Charm of Navigation Menu

navListThe essence is far more than building static second-level menus. Its real strength lies in the ability to combine with background navigation items'PageIdDynamically call and display category or document lists. This is particularly useful on websites with rich content and the need to deeply guide user browsing.

Assuming we have a primary navigation for "Product Categories" with sub-navigations such as "Mobile", "Computer", etc., which are configured in the backend as "Category Page Links", pointing to the corresponding product categories.Now, we hope that when the mouse hovers over the second-level navigation 'Phone', not only will the 'Phone' category be displayed, but also the dynamic display of several popular phone products under the category.

We can modify the template code in this way:

<nav class="main-navigation">
    <ul>
        {% navList navs with typeId=1 %} {# 假设主导航的typeId为1 #}
            {%- 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>
                                    {%- if inner.PageId > 0 %} {# 判断二级导航是否关联了分类或单页 #}
                                        <div class="dynamic-content">
                                            {# 动态显示该分类下的文档列表，例如热门产品 #}
                                            {% archiveList products with type="list" categoryId=inner.PageId limit="5" order="views desc" %}
                                                {% if products %}
                                                    <h3>{{ inner.Title }}热门产品</h3>
                                                    <ul>
                                                        {% for product in products %}
                                                            <li><a href="{{ product.Link }}">{{ product.Title }}</a></li>
                                                        {% endfor %}
                                                    </ul>
                                                {% endif %}
                                            {% endarchiveList %}

                                            {# 或者，动态显示该分类的下级分类（如果存在） #}
                                            {% categoryList subCategories with parentId=inner.PageId %}
                                                {% if subCategories %}
                                                    <h3>{{ inner.Title }}子分类</h3>
                                                    <ul>
                                                        {% for subCat in subCategories %}
                                                            <li><a href="{{ subCat.Link }}">{{ subCat.Title }}</a></li>
                                                        {% endfor %}
                                                    </ul>
                                                {% endif %}
                                            {% endcategoryList %}
                                        </div>
                                    {% endif %}
                                </li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </li>
            {% endfor %}
        {% endnavList %}
    </ul>
</nav>

In this code, we make use ofinner.PageIdTo determine whether the current second-level navigation item is associated with a category or a single page. IfPageIdgreater than 0, we can usearchiveListto pass the tag,categoryId=inner.PageIdDynamically pull the latest articles or popular products under this category. Similarly, it can also be usedcategoryListTags to display the sub-categories of this classification. This flexible combination makes your navigation menu more than just a collection of links, but also an entry point for content aggregation.

operational tips and practical suggestions

• Plan firstBefore configuring navigation in the background, be sure to plan the overall structure of the website and the user's browsing path. Clear logic is the foundation of good user experience.
• moderate hierarchy: Although it is possible to build multi-level navigation, it is recommended that the main navigation menu be kept between two to three levels, as too deep a hierarchy increases the cognitive burden on users.
• SEO-friendlyEnsure that all navigation links are crawlable and set navigation text reasonably to include target keywords. The dynamically loaded content should also be ensured to be crawlable by search engines.
• Responsive DesignDon't forget to optimize your navigation menu for mobile devices. On small screens, complex dropdown menus may require