How to highlight the category link being accessed according to the `item.IsCurrent` field?
As an experienced website operations expert, I know that user experience is the foundation of website success.How to help visitors quickly locate their current position on a content-rich website and clearly understand the navigation structure is the key to improving user satisfaction.item.IsCurrentThe field, cleverly highlighting the current category link being accessed, thus significantly optimizing the website's navigation experience.
Master AnQiCMS: Skillfully useitem.IsCurrentHighlight the current category link to enhance user experience.
In a corporate content management system like AnqiCMS, which is core in Go language and focuses on efficiency and customization, every detail is designed to provide convenience for operators.When we are building the navigation and category list of a website, a common and important requirement is to let users see at a glance which category or page they are currently on.item.IsCurrentfield.
item.IsCurrentIt is a boolean flag that the system intelligently determines whether the current loop item (such as categories, navigation links) matches the page the user is currently visiting during the rendering of Anqi CMS. If it matches,item.IsCurrentThe value will betrueOtherwisefalse.This means that we do not need to write additional complex URL parsing logic, the system has already completed this task for us, and we can easily achieve the highlighting effect by using this symbol in the template.
Achieve highlighting: Practical application of category list and navigation menu
Understooditem.IsCurrentThe principle, next let's see how to apply it in the actual template file. Anqi CMS template syntax is similar to Django, intuitive and easy to understand, very suitable for quick learning.
1. Highlight display of Category List (CategoryList)
In many websites, the sidebar or the top of the page often displays a category list to facilitate user browsing and filtering of content.Assuming we want the currently visited category to be displayed in a list with different styles (for example, bold text or color).categoryListTags anditem.IsCurrentto achieve.
When we usecategoryListEach object will be included when the label loops through the categoryitemwhen the label loops through the categoryIsCurrentThis property. We only need to add a conditional judgment in the HTML element, based onitem.IsCurrentthe value to dynamically apply CSS classes.
{% categoryList categories with moduleId="1" parentId="0" %}
<ul class="category-list">
{% for item in categories %}
<li class="category-item {% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{item.Title}}</a>
</li>
{% endfor %}
</ul>
{% endcategoryList %}
In the above code snippet, we assign a class to each<li>Elements are dynamically addedactivethe class. Whenitem.IsCurrentWithtruethen,activethe class will be attached to<li>. Next, we just need to define the styles for the class in the website's CSS stylesheet.activethat are needed:
/* 示例 CSS 样式 */
.category-list .category-item.active a {
color: #007bff; /* 例如，高亮为蓝色 */
font-weight: bold; /* 字体加粗 */
border-left: 3px solid #007bff; /* 左侧添加指示线 */
padding-left: 10px;
}
/* 其他非高亮样式 */
.category-list .category-item a {
color: #333;
text-decoration: none;
display: block;
padding: 8px 0;
transition: all 0.3s ease;
}
This way, when users browse different categories, the link of the current category will be highlighted in a prominent way, greatly enhancing the clarity of navigation.
2. Highlight display of the main navigation menu (Navigation Menu)
The main navigation menu of a website is usually located at the top of the page and is the main entrance for users to access various core pages. Similar to the category list, the highlighting of the main navigation menu can also be achieved throughnavListTags anditem.IsCurrentImplementation, even multi-level navigation can be handled easily.
navListTags support multi-level navigation structure, within theitem.NavListProperties can be used to loop through sub-navigation. When dealing with these items, we can still useitem.IsCurrent.
{% navList navs %}
<nav class="main-navigation">
<ul>
{% for item in navs %}
<li class="nav-item {% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{item.Title}}</a>
{% if item.NavList %}
<ul class="sub-navigation">
{% for subItem in item.NavList %}
<li class="sub-nav-item {% if subItem.IsCurrent %}active{% endif %}">
<a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
{% endnavList %}
The corresponding CSS style can be defined as follows:
/* 主导航高亮样式 */
.main-navigation .nav-item.active > a {
color: #fff; /* 主导航文字变白 */
background-color: #007bff; /* 背景变蓝 */
border-radius: 4px;
}
/* 子导航高亮样式 */
.sub-navigation .sub-nav-item.active a {
color: #007bff;
font-weight: bold;
}
/* 其他非高亮样式 */
.main-navigation .nav-item a,
.sub-navigation .sub-nav-item a {
padding: 10px 15px;
display: block;
text-decoration: none;
color: #333;
}
In this way, whether it is the main navigation or the sub-items in the dropdown menu, the currently accessed link can be highlighted accurately, providing the user with a seamless navigation experience.
Why is it so important?item.IsCurrentThe value it brings
A seemingly simple feature, but it can bring multiple values to the website:
- Improve user experience:Users do not need to guess and can clearly know their position on the website, reducing confusion and improving browsing efficiency.
- Enhance navigation clarity:By visual differences, the classification and navigation structure are clear at a glance, helping users quickly understand the layout of the website content.
- Reduce bounce rate:A clear navigation path can encourage users to explore the website content deeply, thereby possibly increasing the time spent on the page and reducing the likelihood of leaving the website prematurely.
- Ease of use:The built-in of AnQi CMS
item.IsCurrentGreatly simplified development and maintenance work, operators and developers can focus more on the content itself rather than complex client or server-side logic.