How to judge the current link status in the navigation list tags and add a highlight style?
In website operation, clear navigation is a key factor in improving user experience.When users can intuitively see their position on the current page, it not only reduces a sense of confusion but also enhances the professionalism and usability of the website.Adding a highlight style to the current link in the navigation bar is a very effective method to achieve this goal.
In Anqi CMS, highlighting the current navigation link is actually simpler and more direct than you imagine.This is mainly due to the built-in template tags of the system providing ready-made judgment mechanisms, we do not need to write complex backend logic, just perform simple conditional judgments and style additions in the template file.
Understand the Core:navListwith the tag andIsCurrentproperty
The AnQi CMS template system uses a syntax similar to the Django template engine, making content display control very flexible. When dealing with navigation lists, we often use tonavListLabel. The function of this label is to obtain the preset navigation link list from the background, and then we can display these links in the front-end template in a loop.
What's even better is,navListThe label in each returned navigation item (usually referred to asitem) contains a very practical boolean attribute calledIsCurrent. ThisIsCurrentThe attribute will compare the current URL visited by the user with the URL linked to the navigation item. If they match, thenIsCurrentThe value istrueThis indicates that this navigation item is the link corresponding to the current page; otherwise, it is not.false.
Just this one.IsCurrentAttribute, which provides the most direct and convenient basis for us to judge the current link status and add highlight styles.
Implementation steps: judge and add styles in the template
Next, let's see how to highlight the navigation item in the Anqi CMS template file through specific operations.
Step 1: Get navigation list data
Firstly, you need to callnavListthe tag to get navigation data. Typically, we will assign these navigation data to a variable, such asnavsThen proceedforLoop to iterate through these navigation items.
{% navList navs %}
<ul>
{%- for item in navs %}
{# 这里是每个导航项的HTML结构，接下来我们会在这里添加高亮逻辑 #}
{% endfor %}
</ul>
{% endnavList %}
Second step: useIsCurrentHighlight class name added
In each loopitemWe can check itsIsCurrentproperties. We can useifconditional judgment, whenitem.IsCurrentWithtrueWhen, add a predefined CSS class name to the corresponding HTML element (usually<li>or<a>tag), for exampleactive.
{% 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: if the currentitemis the current page, then give<li>label toactiveCSS class name.
Step 3: Define your highlight style
Finally, you just need to add this in your website's CSS file (usually)/public/static/你的模板名/css/style.cssor a similar path), for thisactiveClass name defines the highlight style you want.
For example, you can set it 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; /* 高亮状态下鼠标悬停，颜色保持不变 */
}
With such settings, when the user visits the "About Us" page, the "About Us" link in the navigation bar will automatically display in a blue bold background, clearly indicating the current location.
Advanced: Handling Highlighting in Multi-level Navigation
Of Security CMSnavListTags also support displaying multi-level navigation, andIsCurrentProperties are also effective in multi-level navigation. If your navigation includes submenus, you can use nestedforprocess in a loop,IsCurrentthe attribute will intelligently judge the corresponding navigation item on the current page, 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 example of a multi-level navigation, we use for the sub-navigation items.active-subAs a highlight class name, this allows you to set different highlight styles for the main navigation and sub-navigation to meet more refined visual needs.
Summary
BynavListLabels and their built-inIsCurrentThe attribute, AnQi CMS makes the implementation of the highlight function of the navigation bar on the current page very intuitive and efficient.This can not only significantly improve the user experience of the website, allowing visitors to easily understand their position on the website, but also reflects the emphasis of Anqi CMS on practicality and convenience in design.Just a few lines of simple template code and CSS style, your website navigation can be refreshed.
Frequently Asked Questions (FAQ)
1. Why did the navigation items not highlight after I set it according to the steps?
Firstly, please check that 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, and seeactiveThe class name has been successfully added. IfactiveThe class name did not appear, it may be that the template code is incorrect orIsCurrentThe judgment did not take effect; if the class name has been added but the style does not take effect, you need to adjust the CSS selector weight or exclude other style interference. In addition, please make sure that you have filled in the correct link address for each navigation item in the background navigation settings.IsCurrentThe attribute is based on matching these links with the current page URL.
2.IsCurrentWhat is used to determine the attribute of the current link? Will dynamic parameters in my URL affect the judgment?
Of Security CMSIsCurrentThe property is mainly based on the complete link of the navigation item(item.Link) Compare with the current page URL. Usually, it will perform an exact match. If your URL structure contains dynamic parameters or aliases (such asexample.com/article?id=123), while the navigation link is only configured toexample.com/articlethenIsCurrentIt may not highlight automatically. In this case, it is recommended that you check the pseudo-static rule settings to ensure that the navigation links are as consistent as possible with the actual access links on the page, or in some special cases, you can consider combining front-end JavaScript for auxiliary judgment to add highlighting.
3. Can I set different highlight styles for different navigation categories (such as top navigation and footer navigation)?
Completely. When you have created different navigation categories in the background (such as top navigation of thetypeId=1, footer navigation of thetypeId=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's<ul>addclass="top-nav", for the footer navigation's<ul>addclass="footer-nav") and so on:
`css .