How to build a multi-level navigation menu for AnQiCMS to optimize the display of the website structure?

The navigation system of the website, like a map of a city, guides visitors to explore every corner of your website. Clear and intuitive multi-level navigation can greatly enhance user experience and is an indispensable part of Search Engine Optimization (SEO). It helps search engines better understand the structure of the website, thereby improving content inclusion and ranking.In AnQiCMS, building a highly efficient and beautiful multi-level navigation menu is actually simpler than you imagine. It provides flexible backend configuration and powerful template tags, allowing you to easily achieve it.

Build the navigation foundation: start from the background configuration

In AnQiCMS, to set up multi-level navigation, we first need to go to the "Background SettingsThis is the command center for all your navigation menus.

1. Navigation Category Management: Define menu location

In the "Navigation SettingsThis is usually used for the top main navigation of the website.But your website may also need different menu layouts in the footer, sidebar, and even on mobile devices.AnQiCMS very considerately allows you to create multiple 'navigation categories', such as you can add a category named 'Footer Navigation' or 'Mobile Menu'.The benefits of doing this are that you can customize exclusive navigation content for different locations and scenarios, without interference, and it is also easier to manage.

2. Navigation Link Settings: Fill menu content

After defining the navigation categories, the next step is to fill in specific links for these categories.AnQiCMS's navigation link settings support up to two levels of navigation, which means you can implement a structure of one-level main menu and one-level dropdown submenu.

When adding a new navigation link, you will see the following key settings:

• Parent Navigation:This is the core of implementing multi-level navigation.If you want to create a main menu item, select 'Top Navigation'; if you want it to be a submenu of a main menu item, just select the corresponding parent menu item from the dropdown list.
• Display Name:This is the text displayed on the front page navigation. You can set it flexibly and it does not have to be exactly the same as the title of the page linked, in order to be more concise or more attractive.
• Subtitle name and navigation description:If your design requires, you can add a subtitle or a brief description to the navigation item, which can be used in some featured templates to enrich the display information of navigation.
• Link type:AnQiCMS provides three flexible link types to meet various content organization needs:
  • Built-in Links:Applicable to the homepage of websites, article model homepage, product model homepage, and other custom model homepages. After selection, the system will automatically fill in the corresponding links.
  • Category page link:This is a convenient way to directly use the categories (such as "Company NewsYou only need to select from the list.
  • External links:When you need to link to a specific URL within the site, or an external website (such as a partner's official website, social media homepage), you can select this option and manually enter the full URL address.
• Display Order:You can control the order of navigation items by setting numbers; the smaller the number, the closer the navigation item is to the front of the list.Currently, AnQiCMS uses numeric sorting, and will also support drag-and-drop sorting in the future to further improve operation convenience.

Build a clear multi-level navigation menu system in the AnQiCMS backend by following these steps.

Template call: Display the navigation on the website

Background configuration completed, the next step is how to display these carefully designed navigation menus on the website front-end. AnQiCMS's template system uses a syntax similar to Django template engine, throughnavListLabel, you can call the navigation data that has been configured on the backend with great ease.

1. UnderstandingnavListtags

navListLabel is the key to calling navigation data in the AnQiCMS template. Its basic usage is{% navList navs %}{% endnavList %}where,navsThis is the variable name you define for the navigation list, and you can customize it according to your preference.

If you want to call the menu under a specific "navigation categorytypeIdParameters to specify:{% navList footerNavs with typeId=2 %}{% endnavList %}(Here,typeId=2假设“Footer navigation” in the background has an ID of 2, you can view it in the background navigation category management).

navsA variable is an array object, you need to useforLoop to traverse each navigation item (item) eachitemcontainsTitle(Display Name),Link[Link address],IsCurrent(whether it is a link to the current page) and other fields. Most importantly, if a navigation item contains a submenu, itsNavListField will also be an array, and it can be navigated through nested structures.forTraverse in a loop.

2. Nested structure for multi-level navigation

To implement two-level navigation display, you need to use the nested list structure of HTML and combinenavListTagsNavListthe subfields in a loop:

<nav>
    <ul class="main-nav">
        {% navList navs with typeId=1 %} {# 假设1是主导航的typeId #}
            {% 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 %}
        {% endnavList %}
    </ul>
</nav>

In this code, the outer layer of.ulrepresenting the first-level menu, the innerulautoitem.NavListto implement the second-level dropdown menu.IsCurrentField can help you add links to the current visited page.activeClass name, to achieve highlighting, further optimize the user experience.

3. Combine dynamic content with navigation.

AnQiCMS's template tags are very flexible, you can even display links in the secondary navigation and dynamically show the list of articles under the category or even deeper subcategories.This can bring richer interaction and information display to your website.

For example, under a second-level menu of a product category, you may want to directly display several popular products under that category:

`html