How to implement dynamic styles for navigation links in an Aq Enterprise CMS template, such as highlighting the current page?

In website operation, the navigation bar is not only the entry for users to explore the content of the website, but also a key factor in enhancing user experience and the professionalism of the website.An intelligent navigation system that can highlight the current page, directly telling the user 'Where are you', thus greatly improving the usability of the website.As an experienced CMS operation personnel, I am well aware of the strength of its template system. Next, I will elaborate on how to implement dynamic highlighting of navigation links in the CMS template.

Overview of Anqi CMS navigation mechanism

The template engine of AnQi CMS adopts syntax similar to Django, which provides high flexibility for content display. For navigation functionality, the system has built-innavListLabel, this is a very practical tool that allows us to retrieve preset navigation link data from the background. What is more remarkable is that,navListEach navigation item (item) obtained by the label includes a boolean field namedIsCurrentthis.IsCurrentThe field is the key to the intelligent judgment of the current page and the navigation link correspondence in AIGQ CMS. When the page visited by the user matches a navigation link, the system will automatically link the correspondingitem.IsCurrentField settings set totrue.

Implement the core idea of navigation highlighting

To implement navigation highlighting in the Anqi CMS template, our core strategy is to combinenavListThe navigation data provided by the tags, as well as the Anqi CMS template engine'sifLogical judgment tag. Specifically, when we loop through the navigation list in the template, we can check each navigation item'sIsCurrentfield value. IfIsCurrentresponse fortrue，we dynamically add a specific CSS class to the HTML element corresponding to the navigation item (for example<li>or<a>tag)activeorcurrent。Then, define the styles for these classes in a CSS file to achieve visual highlighting effects.

Gradually implement highlighting display

In order to clearly demonstrate the implementation process of navigation highlighting, we can break it down into the following steps:

Firstly, in your CMS template file, such aspartial/header.html(English for commonly used to store the header and navigation bar code of a website) or more basic.base.htmlusenavListTags to get navigation data. You can navigate according to the navigation categories configured in the background.typeId参数来指定需要调用的导航列表。

{% navList navs %}
    <!-- 导航项将在此处循环遍历 -->
{% endnavList %}

接下来，在navList标签内部，您需要使用for循环来遍历所有获取到的导航项。在每次循环中，itemThe variable will represent the navigation link that is currently being processed.

{% navList navs %}
    <ul class="main-menu"> {# 假设您的主菜单有一个类名为 main-menu #}
        {%- for item in navs %}
            {# 处理单个导航项 #}
        {% endfor %}
    </ul>
{% endnavList %}

InforIn the loop, we can make use ofitem.IsCurrentfield for conditional judgment. Ifitem.IsCurrenthas a value oftrue，Explanation of the current navigation item pointing to the page the user is visiting at the moment, at this time we can add a CSS class to its belonging。“<li>or<a> Dynamically add a CSS class on the tag。“

<li class="{% if item.IsCurrent %}active{% endif %}">
    <a href="{{ item.Link }}">{{item.Title}}</a>
</li>

The logic of this code is:“item.IsCurrentresponse fortrue,<li>Label will receive an additionalactiveclass; conversely, ifitem.IsCurrentresponse forfalse,<li>label will notactiveclass.

if your website navigation design includes secondary or multi-level dropdown menus, Anqi CMS'snavListLabels can also be supported. Each navigation item includes its sub-navigation list, with a data structure similar to the first-level navigation items.NavListThe field will include its sub-navigation list, with a data structure similar to the first-level navigation items.forLoop internally, and nest anotherifCheck with a judgmentitem.NavListIf it exists, use another oneforLoop to traverse the second-level navigation items, and apply similarlyIsCurrentPerform a highlight judgment.

{% navList navs %}
<ul class="main-menu">
    {%- for item in navs %}
        <li class="{% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
            {%- if item.NavList %} {# 检查是否存在二级导航 #}
            <ul class="sub-menu"> {# 二级菜单可以有自己的类名，例如 sub-menu #}
                {%- for sub_item in item.NavList %}
                    <li class="{% if sub_item.IsCurrent %}active{% endif %}">
                        <a href="{{ sub_item.Link }}">{{sub_item.Title}}</a>
                    </li>
                {% endfor %}
            </ul>
            {% endif %}
        </li>
    {% endfor %}
</ul>
{% endnavList %}

It should be noted that if a child navigation item is activated in the nested navigation scenario