How to add multi-level menus and custom navigation categories in the AnQiCMS website navigation?

As a long-term practitioner who is deeply involved in website operations and has a profound understanding of AnQiCMS (AnQiCMS), I know that a clear and easy-to-use website navigation system is important for user experience and SEO optimization.AnQiCMS provides flexible and powerful navigation management features, allowing operation personnel to easily build multi-level menus and customize navigation categories according to the website structure and user needs.Below, I will elaborate on how to implement these features in AnQiCMS.

Build a clear and orderly website navigation: Practice of AnQi CMS multi-level menu and custom navigation category

The website navigation is the core path for users to explore the website content and is also an important clue for search engines to understand the website structure.A well-designed and well-structured navigation system, which can not only significantly improve the user experience, guide users to quickly find the information they need, but also optimize the efficiency of search engine crawling, helping the website stand out in the fierce market competition.AnQi CMS is well-versed in this, providing website operators with an intuitive and feature-rich navigation management module that supports the creation of multi-level menus and customizable navigation categories to meet the complex needs of various websites.

Flexibility of AnQi CMS navigation management

The navigation settings of AnQiCMS are located in the "Background Settings" area of the background, and the "Website Navigation Settings" is the center of all navigation configurations.The system provides a default "default navigation" category, which is usually used for the main navigation bar of a website.However, in actual operation, a website may need various navigation forms such as footer navigation, sidebar navigation, and even specific topic navigation.AnQiCMS allows for custom navigation categories, greatly broadening the possibilities of navigation design.This means that you can create a completely independent navigation menu for each key area of the website, which do not affect each other and carry specific guidance functions.

Custom navigation category: Meets diverse layout needs

To create a new navigation category, for example, a footer navigation for the website, you just need to go to the "website navigation settings" page in the background, and operate in the "navigation category management" area.Here, you can easily add a navigation category and name it, for example, "Footer Navigation".Once created, this new navigation category is like an empty container, waiting for you to fill it with specific navigation links.In this way, you can plan an independent navigation system for different page areas based on the design layout of the website, thus achieving a more refined and personalized website structure.

Build multi-level menus: Clear hierarchical user experience

After creating the navigation category, the next step is to add specific navigation links and build the hierarchy.AnQiCMS navigation link settings support up to two-level menu structures, which is sufficient to meet the navigation needs of the vast majority of websites.

When you add a navigation link, you first need to determine its level.Through the 'Parent Navigation' option, you can specify whether the current link is a top-level navigation (select 'Top-Level Navigation') or a sub-navigation of an existing navigation item.This intuitive parent-child relationship setting makes it easy to build multi-level menus.For example, you can set 'Product Display' as a first-level navigation, and then add 'Product A', 'Product B' as second-level sub-navigations.

Each navigation link includes rich configuration options. You need to set its "display name", which is the text that users see on the website front end.If your website needs to support dual title display, such as Chinese and English coexisting, you can also fill in the "subheading name".“Navigation description” allows adding a brief introduction to the navigation item, which can be used in some template designs to provide additional information.

Link type is one of the core elements of navigation settings, AnQiCMS provides three main types:

• Built-in linkLinks of this type point to some special pages preset within the AnQiCMS system, such as the website homepage, article model homepage, product model homepage, and other custom model homepages.This provides convenience for quickly adding commonly used feature links.
• Category page linkIf you want the navigation items to directly point to a category page or a single page on the website, this option will be very useful.You can select from the categories or single-page lists already created in the system, and the system will automatically generate the corresponding links.
• External linkFor situations where you need to jump to an external or custom internal URL, external links provide the greatest flexibility. You just need to enter the complete URL address here.

The last, "Display Order" field allows you to control the arrangement position of navigation items at the same level by the size of the number, the smaller the number, the earlier the display.Although drag and drop sorting is not currently supported, you can still accurately control the display order of navigation by adjusting the numbers.

In the template, call the navigation: display the backend configuration on the front end

Navigation information configured on the back-end, which needs to be presented on the front-end web page of the website through AnQiCMS template tags.{% navList navs %}Is used to retrieve and render the navigation list key tag.

In your website template (for example)header.htmlorfooter.htmlYou can call and iterate over the navigation data like this:

{% navList navs with typeId=1 %} {# 假设 typeId=1 是默认导航类别 #}
<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 code snippet shows how to retrieve and iterate over all navigation items in a navigation category and further check if each navigation item contains sub-navigation (item.NavListIf there is a sub-navigation, it will traverse the sub-navigation items again to build a clear multi-level menu structure. Byitem.IsCurrentYou can also add specific styles to the currently active navigation item to enhance the user interaction experience.

The value of navigation optimization: a win-win for users and search engines.

A well-planned multi-level menu and customized navigation categories, not only are they an embodiment of website aesthetics, but also an important part of the website's operational strategy.For the user, clear navigation reduces cognitive load, improves information acquisition efficiency, thereby enhancing access depth and dwell time.For search engines, a reasonable navigation structure helps the spider better understand the hierarchical relationship and content theme of the website, which is helpful for crawling more pages, increasing the inclusion volume and keyword ranking.These navigation management features provided by AnQiCMS are designed to empower operation personnel, achieving dual optimization of user experience and SEO performance through high-quality website structure.

Frequently Asked Questions (FAQ)

Ask: How many levels does AnQiCMS navigation menu support?Answer: The AnQiCMS backend navigation management function currently supports up to two-level menu structures, that is, a main navigation item can have a layer of sub-navigation.This has provided sufficient flexibility and clarity for the navigation design of most websites.

Ask: I created a new navigation category and link, but it didn't show up on the website front end. What could be the reason?If the navigation is set on the backend but not displayed on the frontend, please check several aspects. First, make sure you are using the correct{% navList navs with typeId=X %}the tags, andtypeIdThe parameter matches the ID of the navigation category you created in the backend. Next, check if there are any syntax errors in the template code, or if there are any condition judgments that prevent the display during the loop traversal of navigation data (for example,{% if item.NavList %}It may cause a parent link to be skipped without any child navigation). Finally, confirm that your AnQiCMS cache has been updated, and manually clear the cache if necessary.

Ask: Does AnQiCMS navigation support using article categories or single pages directly as navigation items?Answer: Yes, AnQiCMS fully supports setting existing article categories or single pages directly as navigation items.When adding or editing navigation links, select the link type as "Category Page Link", and then you can select the category or single page you want to reference from the dropdown list.The system will automatically handle its links, saving the trouble of manually copying and pasting URLs.