In website operation, a clear and intuitive navigation menu is like a guiding light for visitors to explore the website.A carefully designed navigation not only enhances user experience, but also helps search engines better understand the website structure.AnQiCMS provides a flexible mechanism to help users accurately configure the hierarchy and sorting of navigation menus in the backend, and implement these controls in the frontend template.

Build the navigation skeleton: backend settings are key

In AnQiCMS, precise control of the navigation menu starts from its backend management interface.Here is like the blueprint design center of the navigation menu, where we can define the overall structure of the navigation and the specific presentation of each element.

Firstly, you need to go to the "background settingsHere, you will see two core management sections: "Navigation Category Management" and "Navigation Link Settings".

  1. Navigation category management: define menu areasA website often has more than one navigation menu, such as the top main navigation, footer navigation, sidebar navigation, and so on.AnQiCMS allows you to create different menu areas through "Navigation Category Management".By default, the system will provide a "default navigation" category.If you need to create a separate navigation for the footer or sidebar, simply add a new navigation category and name it, for example, 'Footer Navigation' or 'Sidebar Menu'.This category will serve as the basis for calling a specific navigation menu in the template.

  2. Navigation link settings: Build hierarchy and order

    • Display name and link type:Each navigation item needs a "display name", which is the text seen by front-end visitors.What is more important is the 'link type', which determines where this navigation item links to.You can link to the built-in homepage, the article/product model homepage, or specify a specific 'category page' (article category, product category, single page), or simply an 'external link' (can be another page within the site or an external website).
    • Parent navigation: Build menu hierarchyAnQiCMS supports up to two levels of navigation links, that is, a main navigation item can have a dropdown sub-navigation.To achieve this, simply select the main navigation item it belongs to in the "Parent Navigation" option when adding or editing navigation links.Selecting "Top Navigation" indicates that this is a primary menu item at the top level.This setting of parent-child relationships naturally constructs the hierarchical structure of the menu.
    • Display order: Determines the arrangement sequence

Through these backend settings, you have already designed a rigorous structure, hierarchy, and clear sorting rules for the navigation menu.

Wake up navigation: the magic in the front-end template

After completing the background configuration, we need to present these navigation menus in the frontend template. AnQiCMS providesnavList[en] A tag that can easily extract the navigation data you set in the background and display it according to the hierarchy and sorting rules you define.

  1. [en] Call a specific navigation category:navListtagsIn your template file (usually)header.html/footer.htmlorsidebar.htmlusenavListUse tags to call the navigation categories you create in the background. For example, if you want to display the menu of the 'Default Navigation' category at the top, you can write the code like this:

    {% navList navs with typeId=1 %}
    {# 导航菜单的循环与渲染 #}
{% endnavList %}

    Here are thetypeId=1Corresponding to the ID of the "default navigation" on the backend. If you have created other navigation categories (such as "footer navigation"), itstypeIdIt will be a different number, or you can also directly use the name of the navigation category.navsIt is the variable name you specify for this navigation list, and you will access the navigation item data through it later.

  2. Traverse navigation items:forLoop navListThe tag will return an array containing all navigation items. You can useforLoop to traverse these navigation items, and output their titles and links one by one:

    {% navList navs with typeId=1 %}
    <ul>
        {% for item in navs %}
            <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
        {% endfor %}
    </ul>
{% endnavList %}

    In this loop,item.Linkthe link address of the navigation item will be automatically obtained,item.Titleand then the displayed name will be retrieved. The order displayed here will strictly follow the number you set in the "Display Order" in the background.

  3. Present child navigation: Handling multi-level menusFor sub-menu items that have set the "Parent Navigation", they will act as main navigation items.NavListProperties are nested within. Therefore, to display the second-level navigation, you need to add another one in the main loop.ifJudgment andforLoop:

    {% navList navs with typeId=1 %}
    <ul class="main-nav">
        {% for item in navs %}
            <li class="{% if item.IsCurrent %}active{% endif %}">
                <a href="{{ item.Link }}">{{ item.Title }}</a>
                {% if item.NavList %} {# 判断是否有子导航 #}
                    <ul class="sub-nav">
                        {% for subItem in item.NavList %}
                            <li class="{% if subItem.IsCurrent %}active{% endif %}">
                                <a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
                            </li>
                        {% endfor %}
                    </ul>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endnavList %}

    By using this nested loop, you can easily build a two-level navigation menu.item.IsCurrentProperties can help you determine whether the current navigation item is the current page, thus adding specific styles to the active menu item to enhance user experience.

  4. Dynamic content integration: More flexible navigationThe strength of AnQiCMS also lies in the ability to deeply integrate the navigation menu with the website content.For example, a main navigation item named 'Product' may need to display the latest several product categories or directly display the latest product list.navListTags will provideitem.PageIdproperties, you can use this ID to combinecategoryListorarchiveListtags, dynamically load within the navigation menu and