As an experienced website operations expert, I fully understand the importance of an efficient and flexible CMS system for content operations.AnQiCMS with its powerful performance in Go language and the ease of use of the Django template engine indeed provides us with great convenience.Today, let's delve deeply into an essential topic in website template development: How to accurately obtain the link address and display name of navigation items in the AnQiCMS template?

Navigation, the soul path of the website

The navigation system is the skeleton of a website, guiding users through the information ocean, directly affecting user experience and SEO effects.A well-designed, easy-to-manage, and dynamically updateable navigation system is an indispensable part of a modern website.AnQiCMS provides an intuitive navigation management feature in the backend, allowing us to create multi-level navigation menus and apply them to different positions on the website, such as the top main navigation, sidebar, footer, and so on.

In the AnQiCMS backend settings, you will find the 'Navigation Settings' item.Here, you can create different navigation categories based on business needs, such as main navigation, footer navigation, or product navigation.Under each category, you can add specific navigation links, and specify their display names, subtitles, descriptions, and most importantly—the link type (built-in links, category page links, external links, etc.).All these flexible configurations ultimately need to be accurately called and displayed in the frontend template.

Core tags:navListMagic

In the AnQiCMS template system, to obtain navigation item data, we mainly rely on a powerful core tag:navListThis tag is the key bridge connecting the backend navigation configuration and the frontend display.

When you need to call the navigation list in a template, the basic way to use it is to wrap it in a{% navList 变量名 %}and{% endnavList %}Between. For example, you can name the navigation data obtainednavs:

{% navList navs %}
    {# 在这里处理您的导航数据 #}
{% endnavList %}

navListThe tag also supports some practical parameters that help us accurately filter and obtain the desired navigation menu:

  • typeId{% navList navs with typeId=1 %}By changingtypeIdYou can easily call different navigation menus in different areas of the website.
  • siteId: If you are using the multi-site management feature of AnQiCMS and want to call the navigation data of a specific site (not the current site),siteIdthe parameter will come in handy.

In-depth acquisition of navigation item links and names

navListAfter the tag is executed, it will assign an array object containing all navigation items to the variable you define (for examplenavs）。Since this is an array, we need to usefora loop to iterate over each navigation item.

Inside the loop, each navigation item will be represented as aitemObject (Of course, you can customize the name of this loop variable). ThisitemThe object carries all the details of the navigation item, the most core of which is the link address and display name we are concerned about:

  • item.Title: This is the text name that the navigation item will display on the website.
  • item.LinkThis is the target URL address pointed to by the navigation item.

exceptTitleandLink,itemThe object also provides other useful properties to make our navigation more interactive and visually appealing:

  • item.SubTitle: If the background has set a subtitle for the navigation item, it can be obtained through this property.
  • item.Description: A brief description of the navigation item.
  • item.IsCurrentA boolean value indicating whether the current page being accessed matches the link of this navigation item. This is crucial for implementing the 'highlight the current active navigation item' feature.
  • item.NavListThis is the key to implementing multi-level navigation. If the current navigation item has child navigation (i.e., set as its subordinate in the background),item.NavListit will include one with the parent levelnavsA similar sub-navigation array, we can use it againforLoop nesting traversal.

Let's go through a specific code example to see how to build a common main navigation and handle the secondary menu:

<nav class="main-navigation">
    <ul>
        {% navList navs with typeId=1 %} {# 假设主导航的类别ID是1 #}
            {% for item in navs %}
                <li class="{% if item.IsCurrent %}active{% endif %}">
                    <a href="{{ item.Link }}">
                        {{ item.Title }}
                        {% if item.SubTitle %}<span>{{ item.SubTitle }}</span>{% endif %}
                    </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>

In this example, we first usenavListObtaintypeIdNavigation data for 1. Then, through the firstforLoop through each top-level navigation item (item) and print its title (item.Title) and link (item.Link)。We also useitem.IsCurrentto add the corresponding navigation item for the current pageactiveA class, to implement visual highlighting. For the ones containing sub-navigation,itemwe use{% if item.NavList %}to make the judgment, and internally use the secondforLoopsubItemto render the links and names of the second-level navigation.

The advantages and flexibility of AnQiCMS

The design philosophy of AnQiCMS is fully reflected in the navigation management.By clearly separating navigation data from template logic, as operators, we can easily adjust the menu structure, modify links, and even switch navigation between different language sites without touching a single line of code.navListThe powerful functionality of tags, building a navigation system that is both beautiful and practical.

Its high-performance architecture of Go language also ensures that even complex navigation structures can be rendered quickly, without slowing down the website loading speed, thus providing users with a smooth browsing experience.

Frequently Asked Questions (FAQ)

  1. Ask: How to display multiple different navigation menus on a single page, such as the main navigation and footer navigation?

    • Answer:In the AnQiCMS background 'Navigation Settings', you can create multiple 'Navigation Categories', each with a unique ID. In the template, you just need to call it multiple timesnavListLabel, and throughtypeIdSpecify the navigation category ID for different parameters. For example,{% navList headerNavs with typeId=1 %}used for the main navigation, while{% navList footerNavs with typeId=2 %}is used for footer navigation.

  2. Question: How many levels of sub-menus does AnQiCMS navigation menu support at most?

    • Answer:Based on the document description of AnQiCMS, its navigation list tagNavListThe field structure supports navigation links up to two levels. This means you can implement a primary menu and its sub-menu at one level, totaling two layers of structure.

  3. Ask: Can I add dynamic parameters to the link of navigation items, or display different navigation items based on the user's login status?

    • Answer: item.LinkThis is the final link address configured on the backend, which is usually a static or pseudo-static URL.If you need more complex dynamic parameters, you can configure it as an "external link" in the background and manually enter a URL with parameters.forLoop throughitemWhen, combined with the current page user login status variable (if such a variable is provided by your template context), perform conditional judgment ({% if user.is_logged_in %}Thus, it decides whether to render a navigation item. However, AnQiCMS currently does not provide a parameter for user status judgment directly in the navigation tag.