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

In website operation, the navigation bar is not only the entry for users to explore the website content, but also a key factor in enhancing user experience and the professionalism of the website.A smart navigation system that can highlight the current page intelligently, and can directly tell the user 'Where are you', thereby greatly improving the usability of the website.As a senior AnQi CMS operation personnel, I am well aware of the strength of its template system, and I will elaborate in detail on how to implement dynamic highlighting of navigation links in the AnQi CMS template next.

Anqi CMS navigation mechanism overview

The Anqi CMS template engine uses syntax similar to Django, which provides high flexibility for content display. For navigation functions, the system is built-in.navListLabel, this is a very practical tool that allows us to retrieve preset navigation link data from the background. What is more impressive is that throughnavListEach navigation item (item) retrieved by the tag contains a boolean field namedIsCurrent. ThisIsCurrentThe field is the key to the intelligent judgment of the corresponding relationship between the current page and the navigation link in AnQi CMS. When the user visits a page that matches a certain navigation link, the system will automatically correspond to the link corresponding to theitem.IsCurrentfield totrue.

The core idea of implementing navigation highlighting

To implement navigation highlighting in 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 label. Specifically, when we loop through the navigation list in the template, we can check each navigation item'sIsCurrentfield value. IfIsCurrentWithtrueWe dynamically add a specific CSS class to the HTML element corresponding to the navigation item (for example<li>or<a>label)activeorcurrent. Then, by defining the styles of these classes in a CSS file, you can achieve the visual highlighting effect.

Step by step to realize the highlighting display.

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

First, in your Anqi CMS template file, for examplepartial/header.html(usually used to store the header and navigation bar code of a website) or more basicbase.htmlUsenavListtags to retrieve navigation data. You can navigate through the navigation categories configured in the background bytypeIdSpecify the navigation list to be called.

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

Next, innavListWithin the tag, you need to usefora loop to iterate over all the retrieved navigation items. In each iteration,itemThe variable will represent the current navigation link being processed.

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

InforInside the loop, we can take advantage ofitem.IsCurrentfield for conditional judgment. Ifitem.IsCurrentThe value istrueIt indicates that the current navigation item points to the page the user is visiting, at this time we can add a CSS class to its parent.<li>or<a>A CSS class can be dynamically added to the tag.

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

The logic of this code is: ifitem.IsCurrentWithtrue,<li>The tag will get an extra one.activeIf not, class; on the contrary, ifitem.IsCurrentWithfalse,<li>the tag will not haveactiveClass.

If your website navigation design includes secondary or multi-level dropdown menus, Anqi CMS'navListtag can also support. Each navigation item'sNavListThe field will contain its child navigation list, with a data structure similar to the first-level navigation item. You can nest another one in the loop inside theforloop, and use aifjudgment to check.item.NavListDoes it exist, if it exists, then use one moreforLoop to traverse the second-level navigation items and apply it as wellIsCurrentPerform the 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 in the case of nested navigation, if a child navigation item is activated