How to determine the current page based on `pages.FirstPage.IsCurrent` or `item.IsCurrent` and add special CSS styles to it?
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 (AnQiCMS) provides us with many conveniences with its flexible and powerful template engine, including throughpages.FirstPage.IsCurrentoritem.IsCurrentSuch a boolean variable, the ability to accurately judge the current page state and add special CSS styles.This can not only significantly improve the user browsing experience, but can also indirectly optimize the accessibility of the website.
IsCurrent: The 'Compass' in the website navigation
In a complex website structure, users often need to clarify their current position.Imagine, when the 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.Aqii CMS is exactly through the built-in template tags ofIsCurrentAttribute, making it easy to identify this dynamic page state
IsCurrentEssentially a boolean value (trueorfalse), when 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.
Of Security CMSnavListTags are a powerful tool for building a website's main navigation, it traverses and outputs each navigation link, and provides us withitem.IsCurrentThis valuable identifier. Whether it is a first-level 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 (usuallypartial/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 use<li>label'sclassThe attribute has been added with a 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>an element will additionally gain oneactive-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; /* 浅灰色背景 */
}
With such settings, when the user switches pages on the website, the link of the current page in the navigation menu will be highlighted dynamically, providing the user with intuitive visual feedback.
Highlight the current page number in the pagination component
The pagination component plays an important role in the content list page, helping users navigate through a large amount of content. Anqi CMS'spaginationtags also provide powerfulIsCurrentSupport, allowing us to precisely control the style of each page.
InpaginationTagged,pagesA variable is an object containing all pagination information. We can go throughpages.FirstPage.IsCurrentDetermine if it is the home page, bypages.LastPage.IsCurrentDetermine if it is the last page, and for each page number in thepages.Pagesloop of the array, useitem.IsCurrentto judge.
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>
Similar, we can define styles in CSScurrent-page:
.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;
}
This way, when users browse through pages, the current page number will be clearly displayed in a special style, making it easy for users to understand which page they are browsing.
The current category in the category list is highlighted.
In addition to navigation and pagination, Anqi CMS also supportscategoryListtags are also supported when displayed in the sidebar category listitem.IsCurrentThis can provide a more detailed browsing experience for content-rich websites:
`twig {% categoryList categories with moduleId=“1” parentId=“0” %}