Skillfully useIsCurrent: AnQiCMS intelligent highlight art of navigation menu

Navigation menus play a crucial role in building any website.It is not only a guide for users to explore the content of the website, but also a direct reflection of the website structure and user experience.A user-friendly and responsive navigation system that can significantly enhance customer satisfaction and effectively guide them to the information they need.AnQiCMS (AnQiCMS) as an efficient and customizable enterprise-level content management system, deeply understands this, and provides developers with powerful tools to create such a navigation experience, among which,IsCurrentThe attribute is the core to realize the intelligent highlight of the navigation menu.

At times, we not only hope that the current page being accessed is highlighted in the menu, but also that the parent menu it is in is highlighted in sync, forming a clear 'You Are Here' visual clue.This is not only beautiful, but also can greatly reduce the user's cognitive load, helping them quickly locate in the complex website structure.So, how do we make use of it in AnQiCMSIsCurrentProperty, accurately implement this parent menu's intelligent highlighting?

UnderstandingIsCurrent: Navigation's intelligent compass

In the template development system of AnQiCMS,IsCurrentIt is a key attribute of boolean type, which is like a smart compass of the navigation menu, guiding the user to the current position. When you go throughnavListWhen such a navigation label retrieves menu data, AnQiCMS quietly completes a series of complex judgments, assigning to each menu itemIsCurrentThe value. If a menu item's link matches the current page URL exactly, or more intelligently, if the current page is a subpage of the menu item (including articles, products in submenus, etc.), then that menu item'sIsCurrentThe property will be set totrue.

This intelligent judgment is an advantage of AnQiCMS as a high-performance CMS developed in Go language.It utilizes its efficient route matching mechanism to quickly identify the path of the current page and compare it with the navigation links configured on the backend.No matter it is the article detail page, product list page, or a specific single page, the system can accurately trace the category and parent navigation it belongs to, and pass this "current" state up the navigation hierarchy level by level.This means that when your user delves into a particular article page, not only will the category menu of the article be highlighted, but also the top-level menu containing that category will be highlighted tooIsCurrentThe property will be marked astrue.

Practice in the template: Let the highlight appear naturally

Apply in AnQiCMS templateIsCurrentProperties to highlight the menu, especially its parent menu, the process is extremely intuitive and smooth. We usually usenavListAn HTML tag to retrieve the navigation data of a website, this tag returns a collection containing menu items, each of which may have its own submenu (viaNavListProperty embodiment, and all carryIsCurrentThis important information.

Assuming we have a two-level navigation menu, the top-level menu contains the sub-menus.Our goal is that when the user visits the page under the secondary menu, both the secondary menu and its top-level menu can be highlighted.The following is a concise template code example:

<nav class="main-navigation">
    {% navList navs %}
    <ul>
        {%- for item in navs %}
        {# 检查当前顶级菜单项是否是当前页面，或其下任意子项是当前页面 #}
        <li class="nav-item {% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}" class="nav-link">{{item.Title}}</a>

            {%- if item.NavList %}
            <ul class="sub-menu">
                {%- for inner in item.NavList %}
                {# 检查当前次级菜单项是否是当前页面，或其下任意子项是当前页面 #}
                <li class="sub-item {% if inner.IsCurrent %}active{% endif %}">
                    <a href="{{ inner.Link }}" class="sub-link">{{inner.Title}}</a>
                    {# 这里可以继续嵌套更多层级的 NavList，IsCurrent 的判断逻辑依然有效 #}
                </li>
                {% endfor %}
            </ul>
            {% endif %}
        </li>
        {% endfor %}
    </ul>
    {% endnavList %}
</nav>

In this code, you will notice{% if item.IsCurrent %}Directly applied to the top level<li>Element. This is AnQiCMSIsCurrentThe subtlety of the attribute: ifitemitself is the current page, or any of its sub-menu items (including the content pages associated with the sub-menu items) is the current page, thenitem.IsCurrentthey will all be set totrueSimilarly, for secondary menu itemsinnerItsinner.IsCurrentIt will also reflect its own 'current' state. By simply addingactiveWe can easily control the highlight effect through CSS styles by class.

For example, you can define CSS styles like this:

.nav-item a.nav-link {
    color: #333;
    padding: 10px 15px;
    display: block;
    text-decoration: none;
}
.nav-item.active > a.nav-link,
.nav-item .sub-menu .sub-item.active > a.sub-link {
    background-color: #007bff;
    color: #fff;
    border-radius: 4px;
}
/* 当顶级菜单的子菜单有高亮时，顶级菜单也高亮 */
.nav-item.active > a.nav-link {
    font-weight: bold;
}

This CSS snippet shows how to use.activeclasses to provide visual feedback for the current page and its parent menu. When the top-level menu isIsCurrentWithtrueit will receive.activeclasses, thus highlighting through CSS rules; if the current page is an item of a second-level menu, then not only will the second-level menu item receive.active Its parent first-level menu item will also be set because of the intelligent setting of AnQiCMS,IsCurrent and obtain properties,.active and then implement hierarchical highlighting by class.,

Operational tips and **practice

To give full play toIsCurrentThe power of attributes, and ensure the accuracy of website navigation, here are some operation tips:

  • Unified URL specification:AnQiCMS supports pseudo-static and custom URL rules (help-plugin-rewrite.md) Ensure your website URL structure is clear and consistent, which helpsIsCurrentThe attribute accurately determines the current page. For example, the URL of the article detail page should maintain a logical parent-child relationship with the URL of its category.
  • Test multi-page type:Before the website goes live, it is essential to test the highlight effect of the navigation on various page types such as the homepage, category list page, article detail page, product detail page, and custom single page, and ensure thatIsCurrentPerform correctly in all scenarios.
  • Make good use of the backend navigation settings:Navigation settings of AnQiCMS backend (help-setting-nav.md) Allows you to create multi-level navigation and different categories of navigation. Plan the navigation structure, in order toIsCurrentThe intelligent judgment provides a clear data foundation. If you need a more complex navigation hierarchy, make sure the hierarchy relationship is clear in the background configuration.

By processingIsCurrentA deep understanding and flexible application of properties, AnQiCMS empowers you to create a smart and user-friendly navigation system, allowing users to navigate your website smoothly, thereby improving the overall content operation effect.

Frequently Asked Questions (FAQ)

  1. Ask: Why does my parent menu not highlight, only the submenu does?The answer is usually because you have not checked the parent in your template code correctly<li>or<a>on the tag checkitem.IsCurrentProperty. Make sure you also use `{% if` when iterating over the top-level navigation items.