In website operation, a clear and intuitive navigation menu is the core of user experience.It not only helps visitors find the information they need quickly, but also directly reflects the structure and content organization logic of the website.AnQiCMS (AnQiCMS) boasts its efficient architecture based on the Go language and the Django-style template engine, providing great flexibility for content creators and developers to achieve various complex navigation menu and submenu display needs.

To implement flexible navigation menus and submenus in the Anqi CMS template, we usually need to combine the background navigation configuration function with the use of front-end template tags.This process is both intuitive and powerful, and can meet various scenarios from simple flat menus to multi-level, dynamic content mixed menus.

Background configuration of flexible navigation menu

Firstly, a flexible navigation menu cannot be separated from careful backend planning.The Anqi CMS provides a "navigation settings" feature, where you can build your website menu system like building blocks.

  1. Navigation category management:You can create different navigation categories, such as 'Top Main Navigation', 'Footer Navigation', 'Sidebar Navigation', etc.This makes it possible to display different menus at different locations on the website, each set of navigation can be managed independently, without interference.
  2. Navigation link settings:You can add specific navigation links under each navigation category. Anqi CMS supports three main types of links:
    • Built-in links:Contains "home link", "article model home page", "product model home page", and other system preset common links for quick addition.
    • Category page links:This is the key to building a dynamic menu. You can choose existing article categories, product categories, or single pages as navigation items.This means that when you add or modify a category or page, the menu will automatically update without manual code modification.
    • External links:Allow you to link to any custom URL within the site, even external websites. This provides convenience for integrating external resources or specific marketing pages.
  3. Hierarchy and sorting:The navigation links of AnQi CMS support up to two levels of nesting, that is, a main navigation item can have one sub-navigation level.You can define the hierarchy of links by setting 'parent navigation' and control the display order of each navigation item accurately by 'display sequence', the smaller the number, the closer to the front.

These backend settings are the foundation for the front-end template to call navigation data, which determines the breadth and depth of your menu content.

The implementation of navigation menus in the template.

The AnQi CMS template engine syntax is similar to Django, variables are enclosed in double curly braces{{ 变量 }}It indicates, logical control such as conditional judgment, loop is represented by single curly braces and percentage signs{% 标签 %}. The navigation menu implementation in the template mainly depends onnavList/categoryListandpageListetc. core tags.

1. UsenavListtags to implement the navigation menu of the background configuration

navListThe tag is the most direct way to call the background "Navigation Settings". It can obtain the main navigation, sub-navigation, and various attributes that you have carefully configured in the background.

Assuming you have already configured a navigation category named "Top Main Navigation" in the background, and it contains first-level and second-level menu items. In the template, you can call it like this:

<nav class="main-navigation">
    <ul>
        {% navList navs with typeId=1 %} {# 假设“顶部主导航”的typeId为1 #}
            {%- for item in navs %}
                <li class="{% if item.IsCurrent %}active{% endif %}">
                    <a href="{{ item.Link }}">{{ item.Title }}</a>
                    {%- if item.NavList %} {# 判断是否有子菜单 #}
                        <ul class="sub-menu">
                            {%- 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>

Code analysis:

  • {% navList navs with typeId=1 %}This label will be retrieved from the backgroundtypeIdAll navigation links under the navigation category 1 will be assigned tonavsVariable.
  • {% for item in navs %}Loop through the first-level navigation items.
  • {{ item.Link }}and{{ item.Title }}：Each outputs the link and title of the navigation item.
  • {% if item.IsCurrent %}active{% endif %}：This is a very practical feature.IsCurrentIt will automatically judge whether the current page is the page pointed to by the navigation item, and if it is, it will return.trueYou can use this attribute to add to the currently active menu item.activeTo highlight it through CSS.
  • {% if item.NavList %}To determine if the current top-level navigation item has a submenu.NavListIt is also a list that contains all the sub-navigation items of the navigation item.
  • {% for subItem in item.NavList %}: If there is a submenu, it will traverse the submenu items nestedly, with a logic similar to the first-level menu.

You can flexibly adjust the navigation structure and content in the background in this way, the front-end template does not need to be changed, and it can automatically adapt.

2. UsecategoryListTag builds a dynamic classification menu

For content-driven websites, especially blog or product showcase websites, it is often necessary to use categories as the main navigation structure.categoryListTags can dynamically obtain the category list under the specified content model and is very suitable for building category navigation.

For example, to display article categories under the main navigation, and to display their subcategories in the dropdown menu of the category, and even to list several of the latest articles directly under the subcategories:

`twig