As an experienced website operations expert, I fully understand the importance of navigation menus for user experience and website structure.An active navigation item that clearly indicates the current position, which not only improves the user's browsing efficiency but also provides positive visual feedback.In an efficient and user-friendly content management system like AnQiCMS, implementing this feature is equally 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.

核心机制揭秘：EnglishIsCurrent属性的妙用English

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

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 isLink）Matches the current URL in the user's browser, thenIsCurrentthe value will betrue；otherwise,false.

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

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

To make the navigation items '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

Firstly, we need to complete the navigation menu settings in the AnQiCMS backend.Through the "Background Settings" under the "Navigation Settings" feature, 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 most importantly, the link address for each navigation item.IsCurrentThe basis on which properties can be correctly judged.

For example, you may have set a navigation item pointing to the "About Us" page, whose link may be/about-us.html；or a navigation item pointing to the "News Center" category, with a link of/news/. These configurations will directly affect the front-end template inIsCurrent. The judgment result is.

Second step: in the template,navListtags

On your website template file (usually)bash.htmlorheader.html), it includes the common header and navigation parts.navListYou can use the tag to get the navigation list configured in the background. This tag is usually used like this:

{% 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,{% navList navs %}The navigation data retrieved from the background will be assigned tonavsThen, we loop through each parameter.{% for item in navs %}Loop through each navigation item. The key point is{% if item.IsCurrent %}active{% endif %}This logic will check the current navigation item'sIsCurrentProperty. If set totrue, it will be assigned to<li>Label addactiveclass; otherwise,<li>The label 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;
}

Through such settings, when the user visits the "About Us

Third step: 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,navListLabels will also be returned in a nested structure.itemThere will be one inside the variable.NavListProperties, which include all the sub-navigation items under this level of navigation.

It is pleasing to see,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, its parent navigation item'sIsCurrentproperty will also 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 the first-level and second-level navigation by using 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. EachitemandsubItemis checked independently.IsCurrentProperties, thus achieving accurate active state marking. For example, if the user visits the "Company News" page under "News Center", then "Company News" will be added.<li>will be addedactiveClass, and the parent of "News Center".<li>It will also be added.activeClass, forming a clear hierarchical highlight effect.

Design ideas and practical tips.

AnQiCMS can handle so intelligentlyIsCurrentProperties, because it retrieves the complete URL information of the current request when rendering the page, and compares it with each navigation item,LinkThe property is compared. This automated matching mechanism frees up developers to focus on the presentation of style and content, rather than complex routing logic.

Useful Tips:

  1. CSS Styles First:Plan before writing the template:activeThe CSS style of the class, including background color, text color, border, 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), make sureIsCurrentThe property can take effect correctly in various situations. Especially for multi-level navigation, it is necessary to check whether the parent navigation is also correctly highlighted 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 by/news/and/news/index.htmlbut the navigation only links to/news/, then the system may take/news/Based on judgment. The pseudo-static and 301 redirect functions of AnQiCMS help maintain the uniformity of URLs.

Summary

AnQiCMS relying on its efficient backend capabilities and flexible template system, makes the judgment of the 'active' state of website navigation extremely simple and intelligent. By fully utilizingnavListin the tags providedIsCurrentProperties, you can easily implement dynamic highlighting of navigation items, thereby significantly enhancing the user experience of the website.Just simple backend configuration and a few lines of template code, your website navigation can come alive and provide users with a more intuitive and pleasant browsing journey.

Common Questions (FAQ)

1. Why does my navigation itemIsCurrentThe property is not effective, or the highlight is incorrect?

  • Check link matching:Firstly, please confirm whether the 'Link Address' set for this navigation item in the AnQiCMS backend matches the actual URL of the page you are currently visiting. Even minor differences (such as missing/Or file extension), may also cause a match failure.
  • Clear 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 again.
  • Multi-site mode:If you have used the multi-site feature of AnQiCMS, please make sure that the template and navigation settings you are editing are for the current site, andsiteIdParameter innavListThe label does not specify other sites incorrectly.

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

AnQi