The navigation menu of the website, like the skeleton and landmark of the website, guides visitors to quickly find the information they need, and is the core of user experience and website information architecture.An intuitive and clear navigation system not only improves user satisfaction, but is also crucial for search engine optimization (SEO).At the design stage, AnQiCMS (AnQiCMS) fully considered this point, providing flexible and easy-to-operate navigation menu management functions, allowing website operators to easily build and maintain the website's navigation system.

Building the main navigation of the website: from zero to one practice

To create and manage website navigation in the AnQi CMS, we first need to enter the system's backend management interface.Find and click 'Backend Settings' in the left menu, then select 'Navigation Settings'.Here is where we control the website menu.

The navigation menu of AnQi CMS has been categorized, with a default category named 'Default Navigation', which is usually the main navigation of our website.If you have special requirements, such as placing a separate navigation menu at the footer or sidebar, you can add categories through 'Navigation Category Management', for example, creating 'Footer Navigation' or 'Sidebar Navigation', which greatly enhances the flexibility of navigation layout.

Next, we can start adding navigation links. Click 'Navigation Link Settings' and you will see a form for adding or editing navigation items.

  • Display NameThis is the text directly displayed on the navigation menu for visitors, such as 'Home', 'Product Center', 'About Us'. You can name it freely according to your actual needs.
  • Subtitle nameIf you want to display bilingual titles in navigation or add some additional brief descriptions to the titles, this field can be used.
  • Navigation descriptionHere you can provide more detailed descriptions for navigation items, although they are usually not displayed directly on the navigation bar, but may appear as mouse hover tips in some theme designs.
  • Link TypeThis is the core definition of where the navigation points. Anqi CMS provides three flexible link types: English
    • Built-in link：including 'home page link', various 'content model home pages' (such as article model home pages, product model home pages, etc.), these are the preset common entry points of the system.
    • Category page linkYou can choose the existing article categories, product categories, or single pages on the website as navigation targets. This means that your content structure can be directly mapped to the navigation.
    • External LinkIf you want to link to a specific page within the site or an external website, you can use this option. Just enter the full URL address.
  • Display OrderThis field is used to control the order of navigation items. Usually, the smaller the number, the earlier the navigation item is in the menu. You can adjust these numbers to easily reorder them.

By following these steps, we can add the first-level navigation menu items of the website one by one.

Achieve a clever display of the second-level navigation.

The Anqi CMS natively supports the creation and display of secondary navigation menus, which is crucial for building a clear and hierarchical website structure.The key to implementing secondary navigation lies in utilizing the "Parent Navigation" field.

When adding a new navigation link, if you want it to be a submenu under a top-level navigation, simply select the corresponding top-level navigation in the 'Parent Navigation' field.For example, if you have a top-level navigation named 'Product Center' and you want to add sub-menus such as 'Product A', 'Product B', etc. under it, then when creating the navigation links for 'Product A' and 'Product B', set their 'parent navigation' to 'Product Center'.The Anqi CMS will automatically recognize this level relationship.

The settings on the back-end simply define the logical structure of navigation. To actually display the secondary navigation effect on the website front-end page, support at the template level is also required. The template engine of Anqi CMS provides powerfulnavListTags, making the front-end call very convenient.

In your template file (usually)header.htmlor part of the main navigation), you can usenavListtag to get the navigation list:

{% navList navs %}
<ul>
    {%- for item in navs %}
        <li class="{% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
            {%- if item.NavList %} {# 判断是否有二级导航 #}
            <dl> {# 或者使用ul/ol，根据你的HTML结构来 #}
                {%- 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 %}

In this code block:

  1. {% navList navs %}Obtained all the navigation menus from the backend configuration and assigned it tonavsa variable.
  2. firstforto iteratenavs. Render the first-level navigation items.item.Titleanditem.LinkUsed to display the title and link.item.IsCurrentIt can be used to determine whether the current page is the navigation item, so that styles can be added.
  3. {%- if item.NavList %}It is the key to implementing the second-level navigation.item.NavListis a boolean value, if the current level navigation item contains child navigation, it will betrue.
  4. Ifitem.NavListresponse fortrue, then the second one insideforthe loop will iterate over all child navigation items of the current level navigation item (item.NavList)，render the content of the second-level menu.

Through this nested structure, your website navigation can clearly display the first and second-level menus, thereby providing a richer and more user-friendly browsing experience.In addition, you can also further embed content categories under the second-level navigation according to your needs, or even deeper levels of classification, fully utilizing the flexibility of the Anqi CMS content model.

Maintenance and optimization of navigation menu.

Creating a navigation menu is not a one-time task. With the increase of website content and business development, the navigation menu also needs continuous maintenance and optimization.In the Auto CMS, you can always go back to the 'Navigation Settings' page to edit, delete, or adjust the order of existing navigation items.For example, by modifying the "display order", you can quickly adjust the position of menu items without touching any code.

When designing navigation, it is also important to consider search engine optimization.Use meaningful keywords as navigation names to ensure link accessibility and avoid overly deep navigation levels (two levels natively are already very friendly), which all help to improve the website's SEO performance.The static and SEO tools built into Anqi CMS also provide a solid foundation for optimizing navigation links.

In summary, AnQi CMS provides an intuitive and powerful navigation menu management system, which can easily be configured in the backend for both simple single-layer menus and complex two-level navigation, and can be perfectly presented on the frontend with flexible template tags.This makes the website's structure planning and content presentation efficient and creative.

Common Questions and Answers (FAQ)

1. Does the safe CMS support creating three-level or more navigation menus?The original support for creating and managing two-level navigation menus is available in the background navigation settings of AnQi CMS. Although there is no direct entry for configuring three levels or more in the background, you can achieve this by combining the category management function and custom template tags (such as calling again under the second-level navigation).categoryListCome to show its sub-categories, realizing a more complex navigation structure, but this requires certain template development capabilities.

2. How to adjust the display order of the navigation menu?In the "Navigation SettingsBy adjusting the size of the number in this field, you can control the arrangement order of the navigation menu items.The smaller the number, the earlier the navigation item will be displayed in the menu.

3. Can I set a menu different from the main navigation in the footer or sidebar?Completely.The "autoIn addition to the default main navigation category, you can create new navigation categories as needed, such as "Footer NavigationtypeIdthe parameter'snavList标签来调用它们。