How to highlight the link of the current visited page in the navigation menu?

When a user visits your website, a clear and intuitive navigation menu can significantly enhance their browsing experience.One important optimization is to make the navigation menu intelligently highlight the current page link being visited, so that visitors can clearly know where they are on the website.AnQi CMS provides a simple and powerful way to implement this feature, without complex development, just a clever configuration in the template.

Understanding the navigation mechanism of Anqi CMS

The Anqi CMS is built-in with a flexible template tag system, the core of which is the "navigation list tag" for handling navigation menusnavListThis label can easily obtain data from the navigation items configured in the background. Each one passes throughnavListThe navigation items obtained by the tag all contain a series of useful properties, the most crucial of which isIsCurrent.

IsCurrentIs a boolean property, its value is true only when the current visitor is browsing the page linked by the navigation itemtrueWhether it is top-level navigation or secondary sub-navigation, Anqi CMS can intelligently judge and assign valuesIsCurrentThis provides great convenience for us to achieve highlighting effects.

Implement: Highlight the current page link

Next, let's see how to useIsCurrentproperty to highlight the current page link.

Step 1: Locate the navigation menu template file

Generally, the navigation menu code of a website is placed in a public template file, such asheader.html/base.htmlOrpartial/nav.htmlWait. You need to find the part containing the navigation menu code according to the specific structure of the template you are using.AnQi CMS encourages modular template design, so this is usually an easily found code snippet.

Second step: usenavListLabel to get navigation data

After finding the template file corresponding to the navigation menu, you will see the code usingnavListtags to render the navigation, the general structure is as follows:

{% navList navs %}
    <ul class="main-nav">
        {% for item in navs %}
            <li>
                <a href="{{ item.Link }}">{{ item.Title }}</a>
                {# 这里可能还有二级导航的处理 #}
            </li>
        {% endfor %}
    </ul>
{% endnavList %}

Third step: useIsCurrentattribute to add highlighted style

Now, we will add to the navigation item's<li>or<a>tag based onitem.IsCurrentproperty to dynamically add a CSS class, such asactive.

{% navList navs %}
    <ul class="main-nav">
        {% for item in navs %}
            <li {% if item.IsCurrent %}class="active"{% endif %}>
                <a href="{{ item.Link }}">{{ item.Title }}</a>
                {% if item.NavList %} {# 处理二级导航，同样应用 IsCurrent 判断 #}
                    <ul class="sub-nav">
                        {% for subItem in item.NavList %}
                            <li {% if subItem.IsCurrent %}class="active"{% endif %}>
                                <a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
                            </li>
                        {% endfor %}
                    </ul>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endnavList %}

In this code, we checked each navigation item (including the main navigation itemitemand sub navigation itemssubItem）的IsCurrentproperty. If this property istrue, we will add a<li>label toactiveClass.

Fourth step: Define highlight style

The final step is to define in your website's CSS fileactiveThe class style. This style determines the specific display of the highlight effect, such as changing the text color, background color, or adding underlines, etc.

You can customize the theme of the website.style.cssfiles (usually located in/public/static/css/Add the following CSS code:

/* 主导航的高亮样式 */
.main-nav .active > a {
    color: #007bff; /* 例如，高亮显示为蓝色文字 */
    font-weight: bold; /* 加粗 */
    border-bottom: 2px solid #007bff; /* 添加下划线效果 */
    /* 您可以根据设计需求添加其他样式 */
}

/* 子导航的高亮样式 */
.sub-nav .active > a {
    color: #ffffff; /* 例如，子导航高亮为白色文字 */
    background-color: #0056b3; /* 蓝色背景 */
    /* 其他高亮样式 */
}

Adjust the color, font, and other style properties according to your website design to ensure that the highlight effect is coordinated with the overall style.

Advanced Usage and Precautions

Of Security CMSIsCurrentThe property is designed very intelligently. It is not only suitable for directly linking to the homepage, article list page, or single page navigation items, but even when the navigation item points to a category, and the user actually accesses a specific article under that category,...IsCurrentIt can accurately identify and highlight the corresponding parent category navigation item. This means that you do not need to configure the highlight logic separately for each article page, as the system will automatically handle it for you.

After you modify the navigation structure or template file, if the front-end page does not update in time, please try to clear the system cache of Anqi CMS. This ensures that the latest configuration and template code takes effect.

By following these steps, you can easily implement the smart highlight function of the navigation menu in the Anqi CMS-built website, providing a more friendly and professional browsing experience for visitors.

Frequently Asked Questions (FAQ)

Q1: Why did the navigation item not highlight even though I followed the steps?A1: There could be several reasons. First, please check if your CSS file is loaded correctly, as well asactiveWhether the class style has been defined. Secondly, make sure you have used it correctly in the template{% if item.IsCurrent %}class="active"{% endif %}such conditional statements and applied them to the correct HTML tags (usually<li>or<a>)。Finally, if the website has enabled caching, remember to click "Update Cache" in the background to clear the old cache data.

Q2:IsCurrentDoes the attribute support multi-level navigation? If my navigation has two or three layers, will it still work properly?A2: Yes,IsCurrentThe attribute was designed with multi-level navigation scenarios in mind. As long as your navigation structure is correctly configured in the Anqie CMS backend navigation settings, and your template is like the example in the article, that is, toitem.NavList(Sub-navigation list) was traversed in a loop,IsCurrentThe attribute can accurately determine the current page at each level of navigation and assign values.

Q3: BesidesactiveThis class name, can I use other style class names to achieve highlighting?A3: Of course.activeThis is a commonly used example class name. You can use any other class name according to your CSS naming conventions or personal preference, for examplecurrent-page/highlightedetc. You just need to place it in the template.class="active"Replace with the name of the class you have chosen and define the styles for that class in your CSS file.