How to highlight the current page in the `navList` navigation menu based on the `IsCurrent` property?

In a fast-paced digital world, a clear and intuitive website navigation menu is the foundation of a good user experience.As an experienced website operations expert, I am well aware of the powerful capabilities of AnQiCMS (AnQiCMS) in providing efficient and customizable content management solutions.navListLabel collaborationIsCurrentThe property can easily highlight the current page, greatly enhancing the professionalism and user-friendliness of the website.

Today, let's delve into how to skillfully use in AnQiCMSnavListnavigation menu'sIsCurrentAttribute, let your website navigation guide users like a beacon, lighting up their path of access.

Understand AnQiCMS'navListNavigation tags

In AnQiCMS,navListIt is a core template tag that allows us to dynamically retrieve predefined navigation menu data from the background database.These navigation links can be flexibly configured and managed in the AnQiCMS background under “Background Settings” -> “Website Navigation Settings”, supporting multi-level menus and various link types, such as built-in links, category page links, or external links.

UsenavListWhen labeling, the navigation loop usually starts like this:

{% navList navs %}
    {# 导航项在这里遍历 #}
{% endnavList %}

Here, navsThis is the variable name we define for the navigation list, and you can also name it with other more descriptive words according to your habit. Each one in the loopitemWe usually willforNaming in the loop includes a series of useful properties, such asTitle(The display name of navigation),Link(The URL address navigated to), as well asNavListIf the current navigation item has a submenu, this property will contain a sub-navigation list.

These properties共同build theskeleton of the website navigation, but to make the navigation smarter, we still need to introduce a key role -IsCurrent.

IsCurrent: Navigation highlight intelligent indicator light

AnQiCMS provides a very considerate built-in attribute-IsCurrent. This attribute is a boolean value(trueorfalseIt will automatically determine whether the corresponding navigation item is the current page based on the URL the current user is visiting. If the link of the current navigation item matches the URL of the page the user is visiting, thenIsCurrentThe value istrueOtherwisefalse.

Its strength lies in the fact that you do not need to write complex JavaScript code or backend logic to judge the current page, AnQiCMS has already done everything for you. All you need to do is use this property in the template to add a special CSS class to the corresponding navigation item, for exampleactiveThus, highlighting effects can be achieved visually.

Suppose we have a simple single-layer navigation, we can use it in this way.IsCurrentto addactiveClass:

{% 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,{% if item.IsCurrent %}is a conditional judgment, ifitem.IsCurrentWithtruethen, it will output.activeThis class name. In this way, the current page's<li>tag will haveactiveClass.

to deal with multi-level navigation:IsCurrentnested application

Modern websites usually use multi-level navigation to organize content, AnQiCMS'snavListThe tag also perfectly supports this structure. When handling multi-level navigation,IsCurrentThe property also applies to both parent and child navigation items. This means that if a user is visiting a child menu page, not only theIsCurrentwilltrue, but also the corresponding parent navigation item'sIsCurrentIt will also betrueThis can achieve the effect of parent-child menu联动 highlighting, greatly enhancing the user's sense of orientation in complex navigation structures.

Let's look at a real example with two-level navigation:

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

In this example, we applied the main navigation and sub-navigation both.IsCurrentDetermine. Whether it is a main navigation item or a sub-navigation item, as long as it is the current page, it will be givenactiveclass.This way, when the user enters the 'Product Details' page, not only will the sub-menu item 'Product Details' be highlighted, but the parent main menu item 'Product Center' will also be highlighted, allowing the user to immediately understand their location.

The final embellishment: using CSS to achieve visual highlighting

Just addactiveThe class name is not enough to achieve visual highlighting, we still need to cooperate with CSS style rules to define the specific effects of highlighting. You can design it according to the style of the website.activeAdd different colors, backgrounds, font weights, or underlines and other styles.

Here are some basic CSS examples that you can add to your website's style file (usuallypublic/static/css/style.cssOr you can use your custom CSS file:

/* 主导航高亮样式 */
.main-nav ul li.active > a {
    color: #007bff; /* 例如，蓝色文字 */
    font-weight: bold; /* 字体加粗 */
    border-bottom: 2px solid #007bff; /* 底部边框 */
}

/* 子导航高亮样式 */
.main-nav .sub-menu dd.active a {
    background-color: #f0f0f0; /* 浅灰色背景 */
    color: #333; /* 文字颜色 */
    font-weight: 600; /* 略微加粗 */
}

/* 鼠标悬停效果，保持与高亮一致性 */
.main-nav ul li a:hover,
.main-nav .sub-menu dd a:hover {
    color: #0056b3; /* 鼠标悬停时颜色变深 */
    text-decoration: none;
}

By following these steps, you can use them in AnQiCMSnavListTags andIsCurrentThe attribute, combined with simple CSS styles, can easily achieve the highlighting of the current page in the navigation menu, thereby providing your website visitors with a clearer, more friendly browsing experience.This automation and flexibility mechanism is exactly the embodiment of the

Frequently Asked Questions (FAQ)

1. IsCurrentHow does the property determine the current page? IsCurrentThe property is automatically calculated and injected by the AnQiCMS backend logic when rendering templates.It will match the current request URL path with the links of each navigation item in the background navigation settings.IsCurrentThe properties will be set totrueThis process does not require front-end intervention, it is all efficiently handled internally by AnQiCMS.

2. Did I modify the navigation link in the background, will the highlighted display on the front end update immediately?In most cases