How to use the `navList` tag to create and display multi-level navigation menus to optimize user browsing?

In website operation, a clear and intuitive navigation system is a key factor in improving user experience, guiding users to explore content, and even optimizing search engine rankings.A well-designed multi-level navigation menu can help visitors quickly find the information they need, reduce the bounce rate, and effectively enhance the in-depth access to website content.In AnqiCMS,navListThe label is the core tool to achieve this goal, allowing us to flexibly build and display hierarchical navigation menus, thereby optimizing the user's browsing path.

UnderstandingnavListLabel: AnqiCMS navigation core

AnqiCMS provides great flexibility to content creators and operators, making the navigation of the website no longer rigid fixed code. ThroughnavListLabel, we can easily retrieve predefined navigation data from the backend and present it in a multi-level structure in the front-end template.This means that updating and adjusting the website menu can be completed with simple operations in the background, without manually modifying the code, which greatly improves the efficiency of content operations.

navListThe power of tags lies in their ability to intelligently recognize and handle the hierarchical relationship of navigation items, and provide information such as the current page status (for example, the currently visited menu item will be highlighted), which are important foundations for building a friendly user interface.

Backend configuration: the cornerstone of building navigation

In usingnavListBefore the label, we need to complete the construction of the navigation menu in the AnqiCMS background. This is the source of the front-end display effect, and it is also to ensurenavListthe premise of normal operation.

1. Navigation Category Management: Imagine that your website may have multiple areas such as main navigation, footer navigation, sidebar navigation, etc. that need to display different menus.AnqiCMS allows you to create different navigation categories, such as top main navigation, bottom friend links, and so on.You can add or edit these categories by navigating to the "Backend Settings" -> "Navigation Settings" in the backend, through "Navigation Category Management".Each category has a uniquetypeIdThis ID will be used in the template to specify which navigation group to call. By default, the system will provide a 'default navigation' category.

2. Navigation link settingsOnce the navigation category is determined, we can add specific navigation links to it. Under each navigation category, you can:

   • display nameThis is the text displayed for the navigation item on the website.
   • Parent navigationThis is the key to implementing multi-level navigation. You can choose to set a link as a 'top-level navigation' to make it a first-level menu;You can also choose an existing first-level menu as its 'parent navigation' to create a second-level menu.AnqiCMS supports navigation links up to two levels, which is sufficient and practical for most website structures.
   • Link Type：AnqiCMS provides flexible link options including:
     • Built-in link：For example, the home page, article model home page, product model home page, etc., for quick links to the core pages of the website.
     • Category page link：Directly select the article or product category you have created as navigation, making it convenient for users to directly enter a specific content category.
     • External link: Allows you to add any internal or external URL, providing great flexibility.
   • Subheading nameandNavigation descriptionThese fields can provide additional context for navigation items, although they may not be directly displayed in all designs. However, in some complex layouts or scenarios that require more auxiliary instructions, they can be very useful.
   • Display orderBy adjusting the size of the number, you can control the order of navigation items, with smaller numbers appearing earlier.

By carefully designing the navigation structure in the background, we can provide the front end withnavListThe tag call has prepared all the data.

Template application:navListPractical application of

After the background menu structure is clear, you can use it in the template file.navListThe tag presents it.navListThe usage of tags is intuitive and easy to understand, following the unified syntax of the AnqiCMS template engine.

We usually place the navigation code in the public header of the website (for examplebash.htmlorheader.html)，so that it can be reused on all pages.

This is a typicalnavListTag code example, showing how to create a two-level navigation menu:

{# 使用 navList 标签获取后台配置的导航数据，并将其赋值给 'navs' 变量 #}
{% navList navs with typeId=1 %} {# 这里的 typeId=1 假设是主导航的类别ID #}
<ul>
    {# 循环遍历所有一级导航项 #}
    {%- for item in navs %}
        {# 根据 'IsCurrent' 属性判断当前导航项是否为当前页面，并添加 'active' 类名进行高亮 #}
        <li class="{% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>

            {# 检查当前一级导航项是否有子导航（二级菜单） #}
            {%- if item.NavList %}
            <dl> {# 使用 <dl>、<ul> 或其他合适的 HTML 标签来包裹子导航 #}
                {# 循环遍历所有二级导航项 #}
                {%- for inner in item.NavList %}
                    {# 同样根据 'IsCurrent' 属性判断并高亮子导航项 #}
                    <dd class="{% if inner.IsCurrent %}active{% endif %}">
                        <a href="{{ inner.Link }}">{{inner.Title}}</a>
                    </dd>
                {% endfor %}
            </dl>
            {% endif %}
        </li>
    {% endfor %}
</ul>
{% endnavList %}

Code analysis:

• {% navList navs with typeId=1 %}This isnavListThe start of the tag, it will fetch from the background.typeIdAll menu data under the navigation category 1, and store this data in a namednavsin the array variable.
• {%- for item in navs %}We useforLoop throughnavsEach navigation item in the array.itemRepresents the first-level navigation item being processed. Note-The symbol can remove the empty lines occupied by the tag, making the generated HTML cleaner.
• {{ item.Link }}and{{item.Title}}: Outputs the link address and display name of the current navigation item.
• {% if item.IsCurrent %}active{% endif %}This is a very practical feature.item.IsCurrentIt is a boolean value, if the current page is the page pointed to by the navigation item, it will betrueWe can use this feature to add a class for the currently active navigation itemactivecombined with CSS styles to achieve a highlight effect and enhance the user's sense of direction.
• {%- if item.NavList %}:item.NavListThis is an array that contains all the sub-navigation items of the current top-level navigation item (second-level menu).We only render the HTML structure of the secondary menu when there is a child navigation.
• {%- for inner in item.NavList %}: Nested.forUsed to iterate over each sub-navigation item in the secondary menu,innerRepresents the current secondary navigation item being processed. ItsLink/TitleandIsCurrentproperties are similar to those of the primary navigation item.

Optimize browsing experience:navListAdvanced techniques

It's not enough to just display multi-level menus, AnqiCMS'snavListIt can also help us further optimize the user's browsing experience:

1. Dynamic content linkageIn some scenarios, you may want the navigation menu to not only display fixed links but also dynamically display some popular articles or products.For example, when the user hovers over a category menu, in addition to displaying subcategories, it can also display the latest or recommended articles under that category.

   `twig {# Example: Display subcategories under a top-level navigation and show popular articles under each subcategory #}