As an experienced CMS website operation personnel in the security industry, I am well aware of the importance of content presentation to user experience and website effectiveness.An intuitive, responsive navigation system is the first step for users to browse a website, and clearly identifying the current page's position in the navigation is a key detail for enhancing user experience.item.IsCurrentProperties innavListCheck if the current navigation item is selected in the loop.

Navigation list and content display in AnQiCMS

In AnQiCMS, the navigation list (Navigation List) is the core function for building the website menu system.Through 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.navListTags 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 for rendering:

{% 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 identify at a glance which page they are currently on. This is a missing feature in terms of website usability.

Understandingitem.IsCurrentThe function of the attribute

To solve the problem of users identifying their current position, AnQiCMS innavListEach navigation item output by the tag (item) provides a name calledIsCurrentThe boolean type attribute. When the link of a navigation item matches the current URL accessed by the browser perfectly,item.IsCurrentthe value is set to,trueotherwise,falseThis tiny attribute is the secret weapon for achieving the "currently selected" visual effect.

InnavListDetermine the current navigation item in the loop.

Utilizeitem.IsCurrentThe attribute is very intuitive to judge the current navigation item. We canforit inside the loopifuse logical judgment tags to check eachitemofIsCurrentvalue. Once settrueyou can add a specific CSS class to the navigation item, such asactiveThus, it can be highlighted through styles (such as background color, bold text color, etc.).

The following is a specific code example showing how to apply it in a navigation list.item.IsCurrentTo identify 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 have set<li>Tags and<dd>labels respectively and added conditional judgments. Whenitem.IsCurrentorinner.IsCurrentresponse fortrueis true, it will output on the corresponding HTML element.activeClass. Next, just define 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;
}

Through this method, the navigation item of the current page being visited by the user will be highlighted prominently, greatly enhancing the clarity of navigation and the user experience.

practical application and **practice

It is crucial to accurately identify and highlight the current navigation item in actual operation for guiding users and optimizing the website structure.This not only lets users know 'where I am', but also visually enhances brand consistency.

  • Main navigation menuHighlight the current page's main menu item.
  • Sidebar menuIn blogs, product categories, and other pages, the sidebar usually contains the detailed hierarchy of the current category or article, and highlighting the current item can help users quickly understand the content structure.
  • Multiple Level Dropdown MenuEnsure that both top-level menus and second-level sub-menus are correctly highlighted whenever they match the current page.

Combined with good CSS design,item.IsCurrentThe property helps us create a navigation system that is both aesthetic and practical, providing users with a smooth and barrier-free browsing experience.

Summary

item.IsCurrentIt is a powerful and practical attribute in AnQiCMS template, which makes it possible tonavListJudging the current navigation item's selected status in the loop becomes effortless.By using simple conditional judgment and CSS style application, website operators can easily achieve 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 optimize website navigation better, providing users with a more friendly and efficient browsing path.

Common Questions and Answers (FAQ)

Q:item.IsCurrentHow to judge the current page link?Answer:item.IsCurrentThe attribute is obtained by taking theLinkThe property (i.e., the URL pointed to by navigation) is matched with the complete URL in the current browser address bar to determine. If they are completely consistent,IsCurrentit istrueThis precise matching ensures that only the current active page links are marked.

Question: If I want to highlight the parent navigation item when the child page is active,.item.IsCurrentCan it be directly implemented?Answer:item.IsCurrentDesignated for precise matching of the current page URL, therefore it will only return navigation items that directly match the current URLtrueIf the current page is a sub-page, only the navigation items directly pointing to the sub-page,IsCurrentit will betruethe parent navigation items,IsCurrentwill befalse

问：Why is my navigation item highlight not working?答：There may be several reasons for this. First, please make sure that you have used the template code correctly.{% if item.IsCurrent %}active{% endif %}Such judgment, andactiveThe class name is spelled correctly. Next, check if your CSS file is loaded correctly, and whether it defines.activeClass style. In addition, it is also 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.Finally, clearing the browser cache and the AnQiCMS system cache may also resolve such display issues.