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

To implement flexible navigation menus and sub-menus in the template of Anqi CMS, we usually need to combine the backend navigation configuration function with the use of frontend template tags.This process is both intuitive and powerful, capable of meeting various scenarios from simple flat menus to multi-level, dynamic content mixed menus.

Backend configuration of flexible navigation menu

Firstly, flexible navigation menus cannot be separated from careful backend planning.【en】The 'Navigation Settings' feature is provided by Anqi CMS, where you can build your website menu system like stacking blocks.

  1. Navigation category management:You can create different navigation categories, such as 'Top Main Navigation', 'Footer Navigation', 'Sidebar Navigation', and so on.This makes it possible to display different menus at different locations on the website, each set of navigation can be managed independently, without interfering with each other.
  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 links such as 'Home page link', 'Article model home page', 'Product model home page', etc., which are commonly used system preset links for quick addition.
    • Category page link:This is the key to building a dynamic menu.You can choose an existing article category, product category, or single page as a navigation item.This means that when you add or modify a category or page, the menu will automatically update without the need to manually modify the code.
    • External links:Allows 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 a sub-navigation level.You can define the hierarchical relationship of links by setting 'Parent Navigation' and control the exact display order of each navigation item through 'Display Order', with smaller numbers appearing earlier.

These backend settings are the basis for the navigation data called by the front-end template, which determines the breadth and depth of your menu content.

Implementation of the navigation menu in the template

The template engine syntax of AnQi CMS is similar to Django, variables are enclosed in double curly braces{{ 变量 }}Logical controls such as conditional judgments and loops use single curly braces and percentage signs{% 标签 %}In the template, the implementation of the navigation menu mainly depends onnavList/categoryListandpageListetc. core tags.

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

navListTags are the most direct way to call the 'Navigation Settings' on the backend. It can retrieve the main navigation, sub-navigation, and their various properties that you have carefully configured on the backend.

Assume you have configured a navigation category named 'Top Main Navigation' in the background, which includes primary and secondary 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 tag will be fetched from the background.typeIdAll navigation links under the navigation category for 1, and assign them tonavsa variable.
  • {% for item in navs %}: Loop through the first-level navigation items.
  • {{ item.Link }}and{{ item.Title }}Output 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, if it is, then returntrueYou can use this property to add to the currently active menu item.activeBy using a class, you can highlight the item through CSS.
  • {% if item.NavList %}: Determine if the current level navigation item has a submenu.NavListIt is itself a list, containing all the sub-navigation items of this navigation item.
  • {% for subItem in item.NavList %}: If there is a submenu, it will nested loop through the submenu items, with logic similar to the first-level menu.

You can flexibly adjust the navigation structure and content in the background with this method, without changing the front-end template, and it can automatically adapt.

2. UsecategoryListBuild a dynamic categorized menu with tags

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

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

`twig