作为一位资深的网站运营专家,我深知在用户体验和搜索引擎优化(SEO)方面,清晰的导航和页面状态指示是多么关键。安企CMS(AnQiCMS)以其灵活且强大的模板引擎,为我们提供了诸多便利,其中就包括通过pages.FirstPage.IsCurrent或item.IsCurrent这样的布尔变量,精准判断当前页面状态,并为其添加特殊CSS样式的能力。这不仅能显著提升用户浏览体验,还能间接优化网站的可访问性。
IsCurrent:网站导航中的“指南针”
在复杂的网站结构中,用户常常需要明确自己当前所处的位置。想象一下,当用户在浏览一个产品分类页面时,如果侧边栏导航中对应的分类项能够高亮显示,或者在文章列表页点击了分页按钮,当前页码能够突出显示,这无疑会大大提升他们的使用便利性。安企CMS正是通过其模板标签中内置的IsCurrent属性,让这种动态的页面状态识别变得轻而易举。
IsCurrent本质上是一个布尔值(true或false),当某个导航项、分类项或分页链接指向用户当前正在访问的页面时,它的IsCurrent属性就会被设置为true。我们便可以利用这个特性,为这些“当前页”元素应用独特的CSS样式。
在导航菜单中点亮当前活跃项
安企CMS的navList标签是构建网站主导航的利器,它遍历输出每一个导航链接,并为我们提供了item.IsCurrent这个宝贵的标识。无论是一级导航还是多级下拉菜单中的子项,我们都可以依据这个属性来判断其活跃状态。
例如,在我们的模板文件(通常是partial/header.html或bash.html中的导航部分)中,可以这样来构造导航结构:
{% 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 %}
在上面的代码片段中,我们巧妙地在<li>标签的class属性中加入了条件判断:{% if item.IsCurrent %}active-link{% endif %}。这意味着如果当前遍历到的item(无论是主导航项item还是子导航项inner)指向的是用户正在访问的页面,那么该<li>元素就会额外获得一个active-link或active-sub-link的CSS类。
接下来,我们只需在网站的CSS文件(通常是/public/static/css/style.css)中定义这些类的样式,例如:
.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; /* 浅灰色背景 */
}
通过这样的设置,当用户在网站中切换页面时,导航菜单中的当前页链接便会动态地高亮显示,为用户提供直观的视觉反馈。
在分页组件中突出当前页码
分页组件在内容列表页中扮演着重要角色,帮助用户在大量内容中穿梭。安企CMS的pagination标签同样提供了强大的IsCurrent支持,让我们能够精确控制每个页码的样式。
在pagination标签中,pages变量是一个包含所有分页信息的对象。我们可以通过pages.FirstPage.IsCurrent判断是否是首页,通过pages.LastPage.IsCurrent判断是否是尾页,而对于中间的每一个页码,则在pages.Pages数组的循环中,使用item.IsCurrent来判断。
下面是一个典型的分页组件模板代码示例:
<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>
类似的,我们可以在CSS中定义current-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;
}
这样,用户在分页浏览时,当前页码就会清晰地以特殊样式显示,方便用户理解自己在浏览哪一页的内容。
分类列表中的当前分类高亮
除了导航和分页,安企CMS的categoryList标签在侧边栏显示分类列表时,同样支持item.IsCurrent,这对于内容丰富的网站来说,能够提供更细致的浏览体验:
”`twig {% categoryList categories with moduleId=“1” parentId=“0” %}