As an experienced website operations expert, I am well aware that a clear and user-friendly navigation system is crucial for the user experience of the website and search engine optimization (SEO).AnQiCMS (AnQiCMS) provides a solid foundation for us to build and manage complex navigation menus with its flexible template engine and powerful content management capabilities.Today, let's delve into how to finely build and manage the top navigation bar and multi-level dropdown menu of the AnQiCMS website.

Navigate AnQi CMS navigation: Fine-grained construction and management from top menu to multi-level dropdown

Website navigation, like a map in the vast internet, guides users to find the information they need and also conveys the structure and focus of the website to search engines.A well-designed, logical navigation system that can significantly improve user experience, reduce bounce rate, and is the foundation for the success of website SEO.AnQi CMS, this is an enterprise-level content management system developed based on Go language, which provides an efficient and customizable content management solution while also bringing great flexibility to the construction and management of website navigation.

1. Navigation bar: The guiding light of the website

In AnQiCMS, the navigation system is designed as a module that can meet both common needs and achieve high customization.It tightly combines the background configuration with the front-end template rendering, allowing website administrators to adjust the navigation structure conveniently and quickly, while front-end developers can use powerful template tags to present these configurations in various elegant forms.

The following characteristics should be possessed by a good navigation bar:

  • Intuitive and easy to understand：Users can immediately understand the content pointed to by the menu item
  • Well-structured：Reasonably organize information hierarchy to avoid user confusion.
  • Responsive Design: It can be displayed and operated well on different devices.
  • SEO-friendly: Clear link structure is helpful for search engines to crawl and understand the website content.

AnQiCMS is built around these core needs to construct its navigation management system.

II. Overview of AnQiCMS navigation system: the bridge between backend configuration and frontend presentation

In the AnQiCMS backend management interface, all navigation-related configurations are concentrated under 'Navigation Settings' in 'Backend Settings'.This is the core area where all the menu structures of the website are defined.

  1. Navigation category management: more than one menuAnQiCMS allows us to create multiple 'navigation categories'.This means that we can not only have a primary navigation (usually top navigation) but also create additional navigations such as 'footer navigation', 'sidebar navigation', even 'mobile-specific navigation' as needed.Each navigation category is independent, having its own menu items and structure, through a uniquetypeIdMake a distinction. This provides great convenience for the navigation display of multiple regions on the website.

  2. Navigation link settings: the art of content organizationAfter selecting or creating a navigation category, we can add specific navigation links. AnQiCMS provides three main types of links to meet different business needs:

    • Built-in linkIncluding the home page of the website, the article model home page, the product model home page, and other customized model home pages. These are the system predefined common links that can be directly selected.
    • Category page linkThis is one of the highlights of AnQiCMS, where we can directly select existing article categories, product categories, or single pages as navigation menu items.This greatly simplifies the association between content and navigation, especially suitable for content-driven websites.
    • External link: In addition to internal links, we can also easily add links to external websites or any custom URLs within the site.This provides the possibility of integrating third-party services or jumping to other project pages.

    Each navigation link can also be set to display name, subtitle name, navigation description, and display order, these properties can be flexibly called in the front-end template to achieve a richer and more interactive menu effect.

Step 3: Refine and Build the Top Navigation Bar and First-Level Dropdown Menu

The core of building the navigation bar in the AnQiCMS front-end template isnavListLabel. It is responsible for retrieving the navigation data we configure from the background and displaying it in the template in a loop.

Assuming we have already configured a category named "main navigation" in the background, which contains first-level menu items, and some of the first-level menu items have second-level sub-menus. In the template (for examplepartial/header.htmlorbash.htmlIn the common header files), we can call it like this:

<nav class="main-navigation">
    <ul class="nav-list">
        {% navList navs with typeId=1 %} {# 假设主导航的typeId为1 #}
            {% for item in navs %}
                <li class="nav-item {% if item.IsCurrent %}active{% endif %}">
                    <a href="{{ item.Link }}" {% if item.Description %}title="{{ item.Description }}"{% endif %}>
                        {{ item.Title }}
                        {% if item.SubTitle %}
                            <span class="sub-title">{{ item.SubTitle }}</span>
                        {% endif %}
                    </a>
                    {# 判断是否存在二级子菜单 #}
                    {% if item.NavList %}
                        <ul class="sub-nav-list">
                            {% for sub_item in item.NavList %}
                                <li class="sub-nav-item {% if sub_item.IsCurrent %}active{% endif %}">
                                    <a href="{{ sub_item.Link }}" {% if sub_item.Description %}title="{{ sub_item.Description }}"{% endif %}>
                                        {{ sub_item.Title }}
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </li>
            {% endfor %}
        {% endnavList %}
    </ul>
</nav>

In the above code, we first go through{% navList navs with typeId=1 %}To get all the first-level menu items of the main navigation. Then, through{% for item in navs %}Iterate through each first-level menu.item.IsCurrentVariables can help us determine whether the current menu item is active, making it convenient to add CSS styles. Whenitem.NavListWhen present, it indicates that the first-level menu has a second-level submenu, and we can nest one inside itulLabel to display these submenu items. In this way, a navigation bar with a clear structure and support for first-level dropdown is initially set up.

Four, Break through the Limit: Create a Deeper Dropdown Menu (Level Two and Above)

Of Security CMSnavListTags configured directly in the background indeed only support up to two levels (that is, one level of menu + one level of dropdown) of navigation structure.However, in the actual operation of websites, especially for content-rich sites, we often need three-level or even more dropdown menus.This is when we need to cleverly combinecategoryListTags to build a deeper level menu.

The core idea is to usenavListTags to generate the first two levels of the menu, whennavListWhen the secondary menu item corresponds to a category page, we can obtain itsPageIdThen proceedcategoryListlabel, with thisPageIdasparentIdIn the template, dynamically retrieve and render the subcategories under the category to implement a multi-level category dropdown menu.

The following are two common scenarios and implementation methods:

  1. Category under Category (Multi-level Category Menu)This method is often used to display all subcategories or product categories under the first-level category in the navigation dropdown menu, forming a "Mega Menu".

    `twig