As an experienced website operations expert, I know how crucial clear navigation and page status indicators are in terms of user experience and search engine optimization (SEO). AnQiCMS, with its flexible and powerful template engine, provides us with many conveniences, including the ability topages.FirstPage.IsCurrentoritem.IsCurrentThe ability to accurately judge the current page status and add special CSS styles to it.This not only can significantly improve the user browsing experience, but also indirectly optimize the website's accessibility.
IsCurrent：Website navigation 'Compass'
In complex website structures, users often need to clearly identify their current location.Imagine when a user is browsing a product category page, if the corresponding category item in the sidebar navigation can be highlighted, or if the current page number can be highlighted when clicking the pagination button on the article list page, it will undoubtedly greatly enhance their ease of use.IsCurrentProperty makes it easy to recognize this dynamic page state.
IsCurrentIt is essentially a boolean value (trueorfalseWhen a navigation item, category item, or pagination link points to the page that the user is currently visiting, itsIsCurrentproperty will be set totrue。We can take advantage of this feature to apply unique CSS styles to these 'current page' elements.
Highlight the currently active item in the navigation menu.
Anqi CMS'snavListTags are the tools to build the main navigation of a website, it traverses and outputs every navigation link, and provides us withitem.IsCurrentThis valuable identifier. Whether it is a level one navigation or a sub-item in a multi-level dropdown menu, we can judge its active state based on this attribute.
For example, in our template file (usually)partial/header.htmlorbash.htmlin the navigation section), you can construct the navigation structure like this:
{% navList navs %}
<ul class="main-navigation">
{% for item in navs %}
<li class="nav-item {% if item.IsCurrent %}active-link{% endif %}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
{%- if item.NavList %} {# 判断是否存在子导航 #}
<ul class="sub-navigation">
{%- for inner in item.NavList %}
<li class="sub-nav-item {% if inner.IsCurrent %}active-sub-link{% endif %}">
<a href="{{ inner.Link }}">{{ inner.Title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endnavList %}
In the above code snippet, we cleverly in<li>TagsclassProperties have been added with conditional judgment:{% if item.IsCurrent %}active-link{% endif %}This means that if the currently traverseditem(whether it is the main navigation itemitemor the sub-navigation iteminner)points to the page the user is visiting, then the<li>The element will gain an extra one.active-linkoractive-sub-linkCSS class.
Next, we just need to define the styles of these classes in the website's CSS file (usually)/public/static/css/style.css), for example:
.main-navigation .nav-item .active-link > a,
.sub-navigation .sub-nav-item .active-sub-link > a {
color: #007bff; /* 蓝色高亮 */
font-weight: bold;
border-bottom: 2px solid #007bff; /* 底部边框强调 */
}
/* 也可以直接高亮整个列表项背景 */
.main-navigation .nav-item.active-link,
.sub-navigation .sub-nav-item.active-sub-link {
background-color: #e9ecef; /* 浅灰色背景 */
}
By such settings, when the user switches pages on the website, the current page link in the navigation menu will be highlighted dynamically, providing the user with intuitive visual feedback.
In the pagination component, highlight the current page number
The pagination component plays an important role in the content list page of the CMS, helping users navigate through a large amount of content.paginationTags also provide powerfulIsCurrentSupport, allowing us to precisely control the style of each page.
Inpaginationin the tag,pagesA variable is an object containing all pagination information. We can access it throughpages.FirstPage.IsCurrentDetermine if it is the home page,pages.LastPage.IsCurrentDetermine if it is the last page, and for each page number in the middle,pages.Pagesuse the loop of the array,item.IsCurrentto determine.
The following is an example of a typical pagination component template code:
<div class="pagination-wrapper">
{% pagination pages with show="5" %}
<ul class="pagination-list">
{# 首页链接 #}
<li class="page-item {% if pages.FirstPage.IsCurrent %}current-page{% endif %}">
<a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
</li>
{# 上一页链接 #}
{% if pages.PrevPage %}
<li class="page-item">
<a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
</li>
{% endif %}
{# 中间页码 #}
{% for pageItem in pages.Pages %}
<li class="page-item {% if pageItem.IsCurrent %}current-page{% endif %}">
<a href="{{pageItem.Link}}">{{pageItem.Name}}</a>
</li>
{% endfor %}
{# 下一页链接 #}
{% if pages.NextPage %}
<li class="page-item">
<a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
</li>
{% endif %}
{# 尾页链接 #}
<li class="page-item {% if pages.LastPage.IsCurrent %}current-page{% endif %}">
<a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
</li>
</ul>
{% endpagination %}
</div>
Similarly, we can definecurrent-pagestyles:
.pagination-list .page-item.current-page > a {
background-color: #007bff;
color: #ffffff;
border-radius: 4px;
padding: 6px 12px;
}
.pagination-list .page-item > a {
padding: 6px 12px;
text-decoration: none;
color: #333;
}
Thus, when users browse pages, the current page number will be clearly displayed in a special style, making it convenient for users to understand which page of content they are browsing.
The current category in the category list is highlighted.
Except for navigation and pagination, the Anqi CMS alsocategoryListtags are also supported when displaying the category list in the sidebaritem.IsCurrent. This can provide a more detailed browsing experience for content-rich websites:
[en]`twig {% categoryList categories with moduleId=“1” parentId=“0” %}