How to customize the website navigation menu and control its display order and level relationship at different positions on the website?

The website navigation is a map for users to browse the website, not only guiding users to find the information they need, but also reflecting the structure of the website and the user experience.In Anqi CMS, customizing and managing the website's navigation menu, including their display order and hierarchy, is a flexible and efficient operation.In order to optimize the user experience, or to better support content marketing and SEO strategies, Anqi CMS provides powerful and intuitive tools.

Next, we will explore how to refine the customization of your website navigation in Anqi CMS together.

I. Backend operations: build and manage the skeleton of the navigation menu.

The website navigation settings start from the Anqi CMS backend management interface.Log in to the backend and you will find a 'Navigation Settings' option under the 'Backend Settings' menu, which is where you create and manage all navigation menus.

1. Navigation category management: Define different menu areas

Different locations of the website, such as the main navigation at the top of the page, the auxiliary navigation at the footer, or the functional navigation in the sidebar, often need to display different menus.The Anqi CMS fully considers this diversity and provides the 'Navigation Category Management' feature.

By default, the system will have a "default navigation" category.If you want to create a separate menu for the footer, you can click "Add Navigation Category" and name it "Footer Navigation" or any other name that is easy for you to identify.This allows you to create and manage independent navigation menus for different display areas of the website.

2. Navigation link setup: Fill menu content and hierarchy

After selecting or creating a navigation category, you can start adding specific navigation links to this menu.Each navigation link has rich configuration options, allowing you to precisely control its behavior and appearance.

• Parent navigation: Establish hierarchy relationshipThis is the key to controlling the menu hierarchy.If you want to add a main menu item (level 1 menu), you usually choose 'top navigation'.If you want to create a secondary submenu, for example, add "Company Profile" under "About UsThe AnQi CMS currently supports two-level navigation links, that is, the main menu and its sub-menus at the next level.

• Display name, subtitle name and navigation description: rich display informationThe display name is the text presented to the user as the navigation link on the front page.You can set it flexibly to make it more attractive. If your website needs a richer information display, such as showing both Chinese and English names at the same time, or providing a brief description for a menu item, then 'subheading name' and 'navigation description' can come in handy.They can make your navigation not only clear but also convey more information.

• Link type: points to different targetsThe Anqi CMS provides three main link types to meet your needs for navigating to different content:

  • Built-in links:This type can directly point to the homepage of the website, the article model homepage, the product model homepage, or the homepage of any custom model.This is very convenient for quickly adding the entry point of the core page.
  • Category page links:This is one of the most commonly used link types, allowing you to select a created document category (such as "News Update", "Product Center") or a single page (such as "Contact Us", "Service Introduction") as the navigation target.The system will automatically generate the corresponding link.
  • External links:When you need to direct users to other websites outside the station, or some in-station pages not managed by the unsecure CMS, you can use external links.Just enter the complete URL address.

• Display order: Custom sorting orderTo arrange the navigation menu items in the order you expect, you can control it through the 'Display Order' field.This field accepts numbers, the smaller the number, the earlier the menu item is displayed in the same-level menu.For example, if you want “About Us” to be listed before “Product Center”, just set the display order of “About Us” to a smaller number than that of “Product Center”.

By setting this above, you can build a clear and rich navigation menu skeleton for different locations on the website.

Second, front-end display: make the navigation menu come alive on the website

After carefully setting up the navigation menu in the background, it is also necessary to call and render it to the front page of the website through template tags.AnQi CMS uses a syntax similar to the Django template engine, providing simple and efficient tags to complete this task.

1.navListTag: the heart of navigation data

Anqi CMS provides a very core and practical template tag -navListIt is used specifically to call the background configuration navigation data.

You can use it like this:

{% navList navs with typeId=1 %}
    {# 你的导航循环内容 #}
{% endnavList %}

HerenavsIt is the variable name you define for navigation data, and you can name it according to your preference.typeId=1It is a key parameter that tells the system which 'navigation category' data you want to call. The default 'default navigation' usually corresponds totypeId=1If you have created a new category named "Footer Navigation" in the background, itstypeIdmay be 2 or higher, and should be replaced according to the actual situation.

2. Loop traversal and hierarchical display

navListThe tag returns an array object containing all navigation items. You need to usefora loop to iterate over these navigation items and render them:

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

In this example:

• {% for item in navs %}Iterate over the main navigation items.
• item.Linkanditem.TitleUsed to output navigation links and display names.
• {% if item.IsCurrent %}active{% endif %}It is a very practical technique that checks whether the current navigation item matches the page the user is visiting. If it matches, it will addactiveThis CSS class, you can use this class to design the current page