如何根据`pages.FirstPage.IsCurrent`或`item.IsCurrent`判断当前页，并为其添加特殊的CSS样式？

作为一位资深的网站运营专家，我深知在用户体验和搜索引擎优化（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” %}