How to judge whether the current navigation is selected in the `navList` loop with `item.IsCurrent`?

As an experienced security CMS website operator, I am well aware of the importance of content presentation for user experience and website effectiveness.A straightforward, responsive navigation system is the first step for users to browse a website, and clearly indicating the current page's position in the navigation is an essential detail for enhancing the user experience.Today, let's delve into how to cleverly utilize in AnQiCMSitem.IsCurrentThe attribute is innavListIn the loop, determine whether the current navigation item is selected.

Navigation list and content display in AnQiCMS

In AnQiCMS, the navigation list (Navigation List) is the core function for building the website menu system.By using the "Website Navigation Settings" on the backend, we can flexibly define various menus such as the main navigation, footer navigation, sidebar navigation, and support multi-level nesting.On the template level, we usenavListTags to call these preset navigation data, usually combined withforLoop through each navigation item to dynamically build the website's menu structure.

For example, a typical top navigation may use the following code snippet to render:

{% navList navs %}
<ul>
    {%- for item in navs %}
        <li>
            <a href="{{ item.Link }}">{{item.Title}}</a>
            {# 这里可能还有二级或更多级导航 #}
        </li>
    {% endfor %}
</ul>
{% endnavList %}

This code can successfully display the navigation menu, but all menu items are visually equal, and users cannot distinguish at a glance which page they are currently on, which is a deficiency for the usability of the website.

Understandingitem.IsCurrentThe role of the attribute

To solve the problem of users recognizing their current position, AnQiCMS providesnavListEach navigation item output by theitemwith a name in theIsCurrentThe boolean type property. When the link of a certain navigation item matches the current browser visited URL completely,item.IsCurrentthe value istrueotherwise,false. This little property is the secret weapon for achieving the 'selected' visual effect.

InnavListDetermine the current navigation item in the loop.

Utilizeitem.IsCurrentAn attribute to determine that the current navigation item is very intuitive. We canforUse within the loop,ifuse logical judgment labels to check eachitemofIsCurrentvalue. Once settrue, you can add a specific CSS class to the navigation item, such asactiveThus, it can be highlighted by style (such as background color, bold text color, etc.)

Here is a specific code example showing how to apply it in the navigation listitem.IsCurrentTo indicate the currently selected navigation:

{% navList navs %}
<ul>
    {%- for item in navs %}
        {# 判断当前导航项是否被选中，如果选中则添加“active”类 #}
        <li class="{% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
            
            {# 如果存在下级导航，我们也需要同样判断下级导航的选中状态 #}
            {%- if item.NavList %}
            <dl>
                {%- 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 %}

In the code above, we added<li>Tags and<dd>tags separately with conditional judgments. Whenitem.IsCurrentorinner.IsCurrentWithtrueit will output on the corresponding HTML element.activeclass. Next, just define it in your CSS file..activethe style of the class, for example:

.nav-menu li.active > a {
    color: #007bff; /* 蓝色文字 */
    font-weight: bold; /* 文字加粗 */
    border-bottom: 2px solid #007bff; /* 底部边框 */
}

.nav-menu dd.active > a {
    background-color: #e9ecef; /* 浅灰色背景 */
    color: #343a40;
}

In this way, when users browse the website, the navigation item of the current visited page will be highlighted prominently, greatly enhancing the clarity of navigation and the user experience.

Practical Application and **Practice

In actual operation, accurately identifying and highlighting the current navigation item is crucial for guiding users and optimizing the website structure.This not only lets the user know "where I am", but also visually enhances brand consistency.This feature is particularly suitable for:

• Main Navigation Menu: Highlight the main menu item of the current page.
• Sidebar MenuIn blogs, product categories, and other pages, the sidebar usually contains the detailed hierarchy of the current category or article, with the highlighted item helping users quickly understand the content structure.
• Multi-level dropdown menuEnsure that both top-level menus and second-level sub-menus are correctly highlighted as long as they match the current page.

Combined with good CSS design,item.IsCurrentProperties can help us create a navigation system that is both aesthetically pleasing and practical, providing users with a smooth and barrier-free browsing experience.

Summary

item.IsCurrentIs a powerful and practical attribute in the AnQiCMS template, it makes it possible tonavListIt is very easy to determine the selected state of the current navigation item in the loop.By using simple conditional judgments and CSS styling, website operators can easily implement the function of dynamically highlighting the current page navigation item, thereby effectively improving the user experience and overall professionalism of the website.Mastering this skill will help you better optimize website navigation, providing users with a more friendly and efficient browsing path.

Frequently Asked Questions (FAQ)

Question:item.IsCurrentHow to judge the current page link?Answer:item.IsCurrentAttribute is by taking the navigation item'sLinkThe attribute (i.e., the URL navigated to) is matched with the full URL in the current browser address bar to judge. If they are completely consistent,IsCurrentit istrueThis precise match ensures that only the currently active page link is marked.

Question: If I want to highlight the parent navigation item when a child page is active,item.IsCurrentcan it be directly implemented?Answer:item.IsCurrent Designed to precisely match the current page URL, therefore it will only return for navigation items that directly match the current URLtrueIf the current page is a sub-page, then only the navigation items directly pointing to the sub-page will beIsCurrentwilltrue, those of the parent navigation item will beIsCurrent.false(Unless the link of the parent navigation item exactly points to the current sub-page, which is usually not the design intention).To implement the effect of highlighting the parent level when the child page is active, you may need to write some custom logic, such as checking if the current URL starts with the parent navigation link, or using other contextual information provided by AnQiCMS in the template for additional judgment.

Why is my navigation highlight effect not working?There may be several reasons for this. First, please make sure that your template code uses correctly.{% if item.IsCurrent %}active{% endif %}such a judgment, andactiveThe class name is spelled correctly. Next, check if your CSS file is loaded correctly and is defined in it..activeThe style of the class. In addition, it is necessary to confirm the navigation items.LinkThe address matches the actual page URL completely, including the protocol (http/https), domain, and path.If the navigation link is a relative path, and the current page URL is with parameters, it may also lead to a mismatch.Sometimes clearing the browser cache and the AnQiCMS system cache can also solve this kind of display problem.