How to customize the website navigation menu, realize the link display of multi-level content?

The navigation menu plays a crucial role in the process of building and operating a website.It is not only the guidance for users to explore the website content, but also the key for search engines to understand the structure of the website.AnQiCMS (AnQiCMS) knows this and therefore provides a flexible and powerful navigation menu customization feature, allowing us to easily implement the display of multi-level content links, thereby optimizing the user experience and improving the overall efficiency of the website.

Next, we will together learn how to customize and manage the website navigation menu in the Anqi CMS, and make it flexible to display multi-level content links.

Step 1: Configure Navigation Menu on Backend

The navigation settings of AnQi CMS are concentrated in the background management interface, through simple and intuitive operations, we can define menus at different locations and add rich link content to them.

1. Access navigation settings

Firstly, log in to your security CMS backend.In the left menu bar, find and click "Background SettingsThis is the center where you manage all website navigation.

2. Manage Navigation Categories

The Auto CMS allows you to create multiple navigation categories based on your actual needs.For example, you can add a new category named 'Footer Navigation' or 'Sidebar Menu'.Each category has a unique ID, which will be used in subsequent frontend template calls.With different categories, you can configure exclusive navigation menus for different areas of the website, achieving more refined layout management.

3. Add and Edit Navigation Links

Now, we begin to add specific links for the selected navigation category.Click the "Navigation Links Settings" section's "Add New Navigation" button, or click the "Edit" button next to an existing navigation.

• Set Link Hierarchy：Security CMS supports up to two levels of navigation links, which is sufficient to meet the needs of most websites.When you add a new link, you can decide its level through the "Parent Navigation" option.If you select "Top-level Navigation", it will be displayed as a first-level menu item; if you select an existing first-level navigation, it becomes a second-level submenu under that first-level navigation.This hierarchical relationship is the basis for displaying multi-level content.

• Fill in Link Display Information:

  • Display NameThis is the text displayed on the front page navigation link, which can be freely modified as needed.
  • Subtitle nameIf your navigation needs to display double titles (such as Chinese-English对照), you can add a subtitle here.
  • Navigation descriptionEnglish navigation link provides a brief introduction text, which can be used to display hints in some template designs.

• Choose link typeEnglish version: : Secure CMS provides various link types to meet the needs of different content connections:

  • Built-in linkIncluding the home page of the website, the article model home page, the product model home page, and other custom model home pages.Choose these link types, the system will automatically generate the corresponding URL, which is very convenient.
  • Category page linkThis is the key to connecting multi-level content.You can select from the article categories, product categories, or single pages that you have created.This way, your navigation can directly point to a list page of a category or a specific single page, allowing users to quickly find the content they need.
  • External LinkIf you need to link to a specific page within the site, an external website, or a custom URL, you can select this option and manually enter the complete link address.

• Adjust the display orderEach navigation link can be set with a "Display Order" value, the smaller the number, the closer the link will appear at the top of the navigation menu.Although drag and drop sorting is not supported at present, you can still flexibly control the order of menu items by adjusting the numbers.

Complete the above settings and click “OK” to save your navigation configuration.

Step 2: Front-end template call and display

After the background configuration of the navigation menu is completed, we need to call and display them in the website's front-end template.The AnQi CMS adopts syntax similar to Django template engine, using specific tags to retrieve and render data.

1. Core tagnavListUsage

In the template system of AnQi CMS, the core tag used to call the navigation menu isnavList. Its basic usage is as follows:

{% navList navs with typeId=1 %}
    {# 在这里循环输出导航项 #}
{% endnavList %}

navListThe tag usually needs to be paired withwith typeIdParameter, specify the navigation category ID you created in the background. For example,typeId=1Represents the "Default Navigation" category.navsIt is a custom variable name used to receive the obtained navigation data, it is an array object, you need to usefora loop to iterate through each navigation item.

Each navigation item (such asitem) includes the following fields, which can be called in your template:

• {{item.Title}}: The display name of the navigation link.
• {{item.Link}}: The URL address of the navigation link.
• {{item.IsCurrent}}An English value representing whether the current page is this navigation link. It can be used to addactivestyles can be added.
• {{item.NavList}}This is a keyword field, if the current navigation item has a sub-navigation, it will contain a sub-navigation list, and you can display multi-level structures by looping again.

2. Basic two-level navigation display

Based onnavListLabel, we can easily build a basic two-level navigation menu. Please note that this code snippet is just a structural example, and you need to beautify it according to your own CSS style.

<nav class="main-navigation">
    <ul>
    {% navList navs with typeId=1 %} {# 假设1是您的主导航ID #}
        {% for item in navs %}
        <li {% if item.IsCurrent %}class="active"{% endif %}>
            <a href="{{ item.Link }}">{{ item.Title }}</a>
            {% if item.NavList %} {# 判断是否有二级导航 #}
            <dl class="sub-menu">
                {% for subItem in item.NavList %}
                <dd {% if subItem.IsCurrent %}class="active"{% endif %}>
                    <a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
                </dd>
                {% endfor %}
            </dl>
            {% endif %}
        </li>
        {% endfor %}
    {% endnavList %}
    </ul>
</nav>

This code will iterate through all first-level navigation items, if a first-level navigation item containsNavList(i.e., with sub-navigation), it will loop through all the second-level navigation items again, thus realizing a two-level menu structure.

3. Extension: Integrate the content list into the navigation.

The strength of AnQi CMS lies in the fact that you can not only link to categories or pages, but also dynamically display the latest articles or product lists under these categories in the navigation menu.This is a very practical feature for the 'Display of Multi-Level Content Links' topic.

Assuming you want to click on a second-level navigation (a category) under a first-level navigation and have its dropdown menu display not only the subcategories of this category but also directly list the latest documents under this category. This can be achieved by combiningarchiveListorcategoryListLabel implementation.

Example 1: Show subcategories and latest products under the second-level navigation.

`twig