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 of the important optimizations is to make the navigation menu intelligently highlight the link of the current visited page, allowing visitors to clearly know where they are on the website.The Anqi CMS provides a simple yet powerful way to achieve this feature, without complex development, just a clever configuration in the template.

Understanding the navigation mechanism of Anqi CMS

The core of the navigation menu handling is the "navigation list tag" in the flexible template tag system of Anqi CMSnavListThis tag can easily obtain data from the navigation items configured in the background. Each one passing throughnavListThe navigation items obtained by the label all contain a series of useful properties, and the most crucial among them isIsCurrent.

IsCurrentis a boolean (boolean) property, and its value is when and only when the page currently being browsed by the visitor matches the page linked by the navigation itemtrue. Whether it is top-level navigation or secondary sub-navigation, Anqi CMS can intelligently judge and assign valuesIsCurrent, which provides great convenience for us to implement highlighting effects.

Manual implementation: Highlight the current page link

Next, let's see how to use the navigation menu of the websiteIsCurrentattribute to highlight the current page link.

第一步：Locate navigation menu template file

Generally, the navigation menu code of a website is placed in a common template file, such asheader.html/base.htmlorpartial/nav.htmlEnglish.You need to find the part that contains the navigation menu code based on the specific structure of the template you are currently using.Auto CMS encourages modular template design, so this is usually an easily found code snippet.

Step 2: UsenavListLabel to get navigation data

After finding the corresponding template file for the navigation menu, you will see the code to render navigation usingnavListtags, 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 %}

Step 3: UseIsCurrentproperty to add highlighted style

Now, we will add a CSS class dynamically according to the<li>or<a>label, based on theitem.IsCurrentproperty, for example,active.

{% 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 item)itemAnd sub-navigation itemssubItem) ofIsCurrentProperty. If this property istrue, then we will<li>a labelactiveclass.

Step 4: Define highlight styles

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

You can change the theme of the website.style.cssFile (usually located/public/static/css/下）中添加如下CSS代码：

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

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

请根据您的网站设计调整颜色、字体和其他样式属性，以确保高亮效果与整体风格协调。

Advanced Usage and Precautions

Anqi CMS'sIsCurrentThe property is designed very intelligently. It is not only suitable for navigation items directly linked to the homepage, article list page, or single page, but also when the navigation item points to a category, and the user actually accesses a specific article under that category.IsCurrentAlso, it can accurately identify and highlight the corresponding parent category navigation items. This means you do not need to configure the highlight logic separately for each article page; the system will handle it automatically.

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 intelligent highlight feature of the navigation menu in the website built with Anq CMS, providing a more friendly and professional browsing experience for visitors.

Common Questions (FAQ)

Q1：Why is the navigation item not highlighted even though I followed the steps?A1：There may be several reasons. First, please check if your CSS file is loaded correctly,activeThe style of the class has been defined. Next, make sure you have used it correctly in the template.{% if item.IsCurrent %}class="active"{% endif %}such a conditional statement and applied it to the correct HTML tag (usually)<li>or<a>）。Finally, if the website has cache enabled, remember to click on "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 levels, can it still work normally?A2: Yes,IsCurrentThe property design initially considered multi-level navigation scenarios. As long as your navigation structure is correctly configured in the navigation settings of the Anqi CMS backend, and your template is like the example in the article, withitem.NavListThe sub-navigation list has been traversed repeatedly,IsCurrentThe attribute can accurately judge the current page and assign values at each level of navigation.

Q3: BesidesactiveCan I use other style class names to achieve highlighting for this class name?A3: Of course you can.activeIt is just a commonly used sample 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 put it in the template.class="active"Replace it with the class name you choose, and define the corresponding class styles in your CSS file.