How to determine the current link status in the navigation list tabs and add a highlight style?

In website operation, clear navigation is a key element in improving user experience.When users can intuitively see their location on the current page, it not only reduces a sense of confusion but also enhances the professionalism and usability of the website.This is a very effective method to add a highlight style to the current link in the navigation bar.

In AnQi CMS, implementing the current link highlight for navigation items is actually simpler and more direct than you might imagine.This is mainly due to the built-in template tags that provide ready-made judgment mechanisms, we do not need to write complex backend logic, but only need to perform simple condition judgments and style additions in the template file.

Understanding the core:navListTags andIsCurrentProperty

The template system of AnQi CMS adopts syntax similar to the Django template engine, making content display control very flexible. When handling navigation lists, we usually use tonavListThis tag is used to fetch the preset navigation link list from the backend, and then we can loop through these links in the front-end template.

What's even better is,navListLabels in each returned navigation item (usually referred to as)item) come with a very useful boolean property calledIsCurrent. ThisIsCurrentThe property will be compared with the URL of the page the current user is visiting and the URL linked to the navigation item. If they match,IsCurrentthe value will betrue[en] This navigation item indicates that it is the corresponding link of the current page; otherwise, it is not.false.

[en] It is this one.IsCurrent[en] Attributes, providing the most direct and convenient basis for us to judge the current link status and add highlight styles.

[en] Implementation steps: judge and add styles in the template.

Next, let's see how to highlight navigation items in the template files of Anqi CMS with specific operations.

Step 1: Get the navigation list data

Firstly, you need to call in the templatenavListthe tag to get navigation data. Usually, we will assign these navigation data to a variable, such asnavsand then throughforLoop through these navigation items.

{% navList navs %}
    <ul>
    {%- for item in navs %}
        {# 这里是每个导航项的HTML结构，接下来我们会在这里添加高亮逻辑 #}
    {% endfor %}
    </ul>
{% endnavList %}

Second step: UtilizeIsCurrentAdd highlighted class name property

At each iteration of the loop,itemwe can check itsIsCurrentProperties. We can useifConditional judgment, whenitem.IsCurrentresponse fortrueThen, add a preset CSS class to the corresponding HTML element (usually<li>or<a>tag), such asactive.

{% navList navs %}
    <ul class="main-nav">
    {%- for item in navs %}
        <li class="{% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
        </li>
    {% endfor %}
    </ul>
{% endnavList %}

In the above code snippet,{% if item.IsCurrent %}active{% endif %}The purpose of this line of code is:itemif the current<li>a labelactivehas the CSS class name.

Third step: define your highlight style

Finally, you just need to add the highlight style in your website's CSS file (usually/public/static/你的模板名/css/style.cssor a similar path), for thisactiveclass name.

For example, you can set it up like this:

.main-nav li a {
    color: #333;
    text-decoration: none;
    padding: 10px 15px;
    display: block;
}

.main-nav li.active a {
    color: #007bff; /* 蓝色字体 */
    font-weight: bold; /* 加粗 */
    background-color: #e9ecef; /* 浅灰色背景 */
    border-radius: 5px;
}

/* 如果你的导航有鼠标悬停效果，确保高亮样式优先级更高 */
.main-nav li a:hover {
    color: #0056b3;
}
.main-nav li.active a:hover {
    color: #007bff; /* 高亮状态下鼠标悬停，颜色保持不变 */
}

Through such settings, when the user accesses the "About Us

Advanced: Highlighting Multi-Level Navigation

Anqi CMS'snavListTags also support displaying multi-level navigation, andIsCurrentproperties are also effective in multi-level navigation. If your navigation includes sub-menus, you can use nestedforProcess in a loop.IsCurrentThe property will intelligently determine the current page item, whether it is the main navigation or the sub-navigation item.

{% navList navs %}
    <ul class="main-nav">
    {%- for item in navs %}
        <li class="{% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
            {%- if item.NavList %} {# 如果有子导航 #}
            <dl class="sub-nav">
                {%- for inner in item.NavList %} {# 遍历子导航 #}
                    <dd class="{% if inner.IsCurrent %}active-sub{% endif %}"> {# 为子导航添加不同的高亮类名 #}
                        <a href="{{ inner.Link }}">{{inner.Title}}</a>
                    </dd>
                {% endfor %}
            </dl>
            {% endif %}
        </li>
    {% endfor %}
    </ul>
{% endnavList %}

In this multi-level navigation example, we use active-subAs a highlight class name, you can set different highlight styles for the main navigation and sub-navigation to meet more refined visual needs.

Summary

PassnavListThe tag and its built-inIsCurrentThe implementation of the navigation bar current page highlighting feature in AnQi CMS makes it very intuitive and efficient.This not only significantly improves the user experience of the website, allowing visitors to more easily understand their location on the site, but also reflects the emphasis of Anqi CMS on practicality and convenience in design.Just a few lines of simple template code and CSS styles, and your website navigation can be refreshed.

---

Common Questions (FAQ)

1. Why isn't the navigation item highlighted even though I followed the steps?

Firstly, please check if your CSS styles are correct and have sufficient priority, and are not overridden by other general styles. You can use the browser developer tools (F12) to check the HTML structure of the navigation items.activeThe class name has been successfully added. IfactiveThe class name did not appear, it may be due to an error in the template code orIsCurrentJudgment did not take effect; if the class name has been added but the style has not taken effect, you need to adjust the selector weight of CSS or exclude other style interferences. In addition, please ensure that you have filled in the correct link address for each navigation item in the background navigation settings.IsCurrentThe attribute is matched based on these links and the current page URL.

2.IsCurrentWhat criteria is used to determine the current link? Will dynamic parameters in my URL affect the determination?

Anqi CMS'sIsCurrentProperties are mainly based on the complete link of the navigation item (item.LinkCompare with the current page URL. It usually performs an exact match. If your URL structure contains dynamic parameters or aliases (such asexample.com/article?id=123), and the navigation link is only configured toexample.com/articleso thatIsCurrentMay not be automatically highlighted.In this case, it is recommended to check the pseudo-static rule settings to ensure that the navigation links are as consistent as possible with the actual page access links in structure, or consider combining front-end JavaScript for auxiliary judgment to add highlighting under certain special requirements.

3. I want to set different highlight styles for different navigation categories (such as top navigation and footer navigation). Can this be done?

It is absolutely fine. When you create different navigation categories in the background (such as top navigation,typeId=1footer navigation,typeId=2), you can call them separately in the template:

{# 顶部导航 #}
{% navList topNavs with typeId=1 %} ... {% endnavList %}

{# 页脚导航 #}
{% navList footerNavs with typeId=2 %} ... {% endnavList %}

In CSS, you can define different highlight styles for different navigation containers (such as, for the top navigation,<ul>Addclass="top-nav"and for the footer navigation,<ul>Addclass="footer-nav"):

`css .