作为一位资深的网站运营专家,我深知在用户体验和搜索引擎优化(SEO)方面,清晰的导航和页面状态指示是多么关键。安企CMS(AnQiCMS)以其灵活且强大的模板引擎,为我们提供了诸多便利,其中就包括通过pages.FirstPage.IsCurrentitem.IsCurrent这样的布尔变量,精准判断当前页面状态,并为其添加特殊CSS样式的能力。这不仅能显著提升用户浏览体验,还能间接优化网站的可访问性。

IsCurrent:网站导航中的“指南针”

在复杂的网站结构中,用户常常需要明确自己当前所处的位置。想象一下,当用户在浏览一个产品分类页面时,如果侧边栏导航中对应的分类项能够高亮显示,或者在文章列表页点击了分页按钮,当前页码能够突出显示,这无疑会大大提升他们的使用便利性。安企CMS正是通过其模板标签中内置的IsCurrent属性,让这种动态的页面状态识别变得轻而易举。

IsCurrent本质上是一个布尔值(truefalse),当某个导航项、分类项或分页链接指向用户当前正在访问的页面时,它的IsCurrent属性就会被设置为true。我们便可以利用这个特性,为这些“当前页”元素应用独特的CSS样式。

在导航菜单中点亮当前活跃项

安企CMS的navList标签是构建网站主导航的利器,它遍历输出每一个导航链接,并为我们提供了item.IsCurrent这个宝贵的标识。无论是一级导航还是多级下拉菜单中的子项,我们都可以依据这个属性来判断其活跃状态。

例如,在我们的模板文件(通常是partial/header.htmlbash.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-linkactive-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” %}