How to determine the currently active (active) navigation item in the AnQiCMS navigation list?

As an experienced website operations expert, I am well aware of the importance of navigation menus for user experience and website structure.An active navigation item that can clearly indicate the current position, not only improve the user's browsing efficiency, but also give positive visual feedback.In AnQiCMS (AnQi CMS) such an efficient and user-friendly content management system, the implementation of this function is also simple and powerful.

Today, let's delve into how to cleverly judge and mark the current active navigation item in the AnQiCMS navigation list, making your website navigation smarter and smoother.

The core mechanism revealed:IsCurrentThe妙use of properties

AnQiCMS's template engine (based on Django-like syntax in GoLang) provides us with great convenience, especially when dealing with common scenarios such as navigation menus. The core secret lies innavListEach navigation item (item) returned by the tag contains a namedIsCurrentboolean (boolean) attribute.

ThisIsCurrentThe attribute, as the name suggests, intelligently determines whether the current navigation item matches the page the user is visiting. If the link of the current navigation item isLinkThen it matches the current URL in the user's browserIsCurrentThe value istrueOtherwise, it isfalse.

This built-in intelligent judgment mechanism greatly simplifies the work of front-end developers and operations personnel, eliminates the need to write complex URL matching logic, and can simply use this attribute to easily add specific styles to active navigation items, such as highlighting.

Practice exercise: Inject the "active" status into the navigation menu

To make the navigation item 'alive', we usually add a specific CSS class to the current active navigation item in the HTML structure of the navigation menu, such asactive. Next, let's go through several steps to see how to implement this in the AnQiCMS template.

Step 1: The foundation of backend navigation configuration.

First, we need to complete the navigation menu settings in the AnQiCMS backend.By using the "Navigation Settings" feature under the "Backend Settings", you can create and manage different categories of navigation menus, such as main navigation, footer navigation, etc.Here, you can specify the display name, link type (built-in link, category page link, or external link), and the most important link address for each navigation item.Ensure that these link addresses match the actual page paths of your website, areIsCurrentThe basis for correctly judging properties.

For example, you may have set a navigation item pointing to the "About Us" page, whose link might be/about-us.html; or a navigation item pointing to the "News Center" category, linked as/news/. These configurations will directly affect the front-end template inIsCurrentthe judgment result.

Second step: in the template,navListTag

In your website template file (usually)bash.htmlorheader.htmlIn the section that includes the common header and navigation part, you will usenavListtag to retrieve the navigation list configured on the backend. This tag is usually used in this way:

{% navList navs %}
    <ul>
    {% for item in navs %}
        <li class="{% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
        </li>
    {% endfor %}
    </ul>
{% endnavList %}

In this code block,{% navList navs %}Assign the navigation data obtained from the background tonavsthe variable. Then, we use{% for item in navs %}Loop through each navigation item. The key point is{% if item.IsCurrent %}active{% endif %}This logic, it will check the current navigation item'sIsCurrentProperty. If it istrue, and will be for<li>tagsactiveclass; otherwise,<li>The tag will not include this CSS class.

Once thisactiveclass is added to the corresponding navigation item, you can define it in your CSS file..activethe style of the class, for example:

/* style.css */
.navbar-nav .nav-item.active {
    background-color: #007bff; /* 蓝色背景 */
    color: #ffffff; /* 白色文字 */
    border-radius: 5px;
}
.navbar-nav .nav-item.active a {
    color: #ffffff;
}

With such settings, when the user accesses the "About Us" page, the "About Us" item in the navigation bar will automatically highlight, clearly indicating the user's current location.

Step three: Handle the 'active' logic of multi-level navigation

AnQiCMS supports multi-level navigation, usually two levels. When you set sub-navigation items in the background,navListThe label will also return these data in a nested structure.itemThere will be one inside the variable.NavListThe property contains all the sub-navigation items under this level of navigation.

What is pleasing is,IsCurrentThe intelligent judgment of properties also applies to these sub-navigation items. This means that even if the current page is a page corresponding to a sub-navigation item, the properties of its parent navigation itemIsCurrentwill be set correctly.true(Or, if the parent navigation link matches the prefix of the current page path, it will also be considered active). This way, you can mark the active state of both first-level and second-level navigation through nested loops:

{% navList navs %}
    <ul class="main-nav">
    {% for item in navs %}
        <li class="main-nav-item {% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
            {% if item.NavList %} {# 检查是否有子导航 #}
                <ul class="sub-nav">
                {% for subItem in item.NavList %}
                    <li class="sub-nav-item {% if subItem.IsCurrent %}active{% endif %}">
                        <a href="{{ subItem.Link }}">{{subItem.Title}}</a>
                    </li>
                {% endfor %}
                </ul>
            {% endif %}
        </li>
    {% endfor %}
    </ul>
{% endnavList %}

In this multi-level navigation code, the outer loop handles the first-level navigation items, and the inner loop handles their child navigation items. EachitemandsubItemwill be checked independently.IsCurrentProperties, thus achieving accurate active status marking. For example, if the user visits the "Company News" page under the "News Center", then the "Company News" will be added.<li>will be addedactiveClass, while also the parent of "News Center".<li>Will also be added.activeClass, forming a clear hierarchical highlight effect.

Design concept and practical tips.

The reason AnQiCMS can handle things so intelligentlyIsCurrentThe property is because it retrieves the complete URL information of the current request when rendering the page, and matches it with each navigation item'sLinkAttribute comparison is performed. This automated matching mechanism liberates developers, allowing them to focus on the presentation of style and content rather than complex routing logic.

Practical Tips:

1. CSS styling first:Plan before writing the template:activeThe CSS style of the class, including background color, text color, borders, etc., to ensure that the highlight effect is consistent with the overall style of the website.
2. Testing is crucial:Test your navigation menu on different pages (home page, category page, detail page, single page) to ensureIsCurrentThe property works correctly in all cases. Especially for multi-level navigation, you need to check if the parent navigation is also highlighted correctly when the child page is active.
3. URL normalization:Ensure that the navigation links set in the background are standardized and unique. For example, if a page can be accessed through/news/and/news/index.htmlbut the navigation only links to/news/, the system may use/news/Based on the judgment. The pseudo-static and 301 redirect features of AnQiCMS help maintain the consistency of URLs.

Summary

AnQiCMS leverages its efficient GoLang backend capabilities and flexible template system, making the active status judgment of website navigation exceptionally simple and intelligent. By fully utilizingnavListTag provided.IsCurrentProperty, you can easily implement dynamic highlighting of navigation items, thereby significantly enhancing the user experience of the website.With simple backend configuration and a few lines of template code, your website navigation can be revitalized, providing users with a more intuitive and pleasant browsing journey.

Frequently Asked Questions (FAQ)

1. Why is my navigation itemIsCurrentThe property is not working or the highlight is incorrect?

• Check the link match:Firstly, please confirm that the "link address" you have set for this navigation item in the AnQiCMS backend matches the actual URL of the page you are currently visiting. Even slight differences (such as missing/Or file extension), may also result in a match failure.
• Clear the cache:AnQiCMS has a powerful caching mechanism. After modifying navigation settings or templates, please be sure to go to the "Update Cache" feature in the background to clear the system cache, and then refresh the page to view it again.
• Multi-site mode:If you have used the multi-site feature of AnQiCMS, make sure that the template and navigation settings you are editing are for the current site and thatsiteIdThe parameter is innavListThe label does not specify an error as other sites.

2. How to make the parent navigation item highlighted when the child navigation item is active?

AnQi