ingeniously utilizeIsCurrent: AnQiCMS intelligent highlight of navigation menu art

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 straightforward, responsive navigation system that can significantly enhance user satisfaction and effectively guide them to the information they need.IsCurrentThe attribute is the core of realizing the intelligent highlight of the navigation menu.

Many times, we not only want the currently visited page to be highlighted in the menu, but also hope that the parent menu it is in can be highlighted synchronously, forming a clear 'You are here' visual cue.This is not only aesthetically pleasing, but it can also greatly reduce users' cognitive load, helping them quickly locate within a complex website structure.IsCurrentWhat, accurately implement this parent menu's intelligent highlighting?

UnderstandingIsCurrent: The intelligent compass of navigation

In the template development system of AnQiCMS,IsCurrentis a boolean type of key attribute, it acts like a smart compass of the navigation menu, guiding the user to the current location. When you go throughnavListWhen this navigation label retrieves menu data, AnQiCMS silently completes a series of complex judgments in the background, assigningIsCurrentThe 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, etc. within the submenu), then this menu item'sIsCurrentAttribute will be settrue.

This intelligent judgment is the embodiment of the advantage of AnQiCMS as a high-performance CMS developed in Go language.It utilizes its efficient routing matching mechanism, allowing it to quickly identify the path of the current page and compare it with the navigation links configured on the backend.Whether it is an article detail page, a 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" status up to each level of the navigation hierarchy.IsCurrentAttribute marked astrue.

Practice in the template: Let highlighting be natural

Apply in AnQiCMS templateIsCurrentHighlight properties to emphasize the menu, especially its parent menu, the process is extremely intuitive and smooth. We usually usenavListUse this tag to retrieve the navigation data of the website, this tag will return a collection containing menu items, each of which may have its own submenu (viaNavListProperties embody), and all carryIsCurrentThis important information.

Assuming we have a two-level navigation menu, the top-level menu contains sub-menus.Our goal is that when the user accesses the page under the secondary menu, both the secondary menu and its top-level menu can be highlighted.

<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 piece of code, you will notice{% if item.IsCurrent %}Directly applied to the top level<li>elements. This is exactly AnQiCMSIsCurrentThe subtlety of the property: 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.IsCurrentwill 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 make use of.activeProvide visual feedback for the current page and its parent menu. When the top-level menu isIsCurrentresponse fortrue, it will receive.activeClass, so that it can be highlighted through CSS rules; if the current page is an item of a second-level menu, then not only the second-level menu item will receive.activeIts parent menu item will also be highlighted due to the intelligent settings of AnQiCMS,IsCurrentbecause of its properties,.activeand achieve hierarchical highlighting.

Operational tips and **practice.

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

  • Unified URL standards:AnQiCMS supports pseudo-static and custom URL rules (help-plugin-rewrite.md) Make sure your website URL structure is clear and consistent, which can helpIsCurrentProperty more accurately judge 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, be sure 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.IsCurrentPerform correctly in all scenarios.
  • Make good use of the background navigation settings:Navigation settings of AnQiCMS backend (help-setting-nav.mdAllow you to create multi-level navigation and navigation of different categories. Reasonably plan the navigation structure,IsCurrentThe intelligent judgment provides a clear data foundation. Ensure that the hierarchy relationship is clear when configuring the navigation levels in the background.

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

Common Questions (FAQ)

  1. Question: Why is only the child menu highlighted, not the parent menu?Answer: This is usually because you have not correctly checked the label on the parent in your template code.<li>or<a>on the tagitem.IsCurrentProperties. Please ensure that you also use `{% if}` when looping through the top-level navigation items.