Hexo主题NexT中文章计数样式的自定义方法

Hexo主题NexT作为一款流行的静态博客主题，其文章计数功能在8.0版本后有了较大变化。本文将详细介绍如何自定义文章计数样式，特别是如何将其恢复为旧版设计。

新版计数样式的特点

NexT 8.0版本后，文章计数采用了徽章(badge)样式设计，这种设计具有以下特征：

• 圆形背景
• 醒目的颜色
• 独立于文字之外的显示效果

恢复旧版样式的方法

方法一：直接修改主题源文件

找到主题目录下的categories.styl文件，修改.category-list-count相关样式：

.category-list-item {
  margin: 5px 10px;
}

.category-list-count {
  color: $grey;
  
  &::before {
    content: ' (';
  }
  
  &::after {
    content: ') ';
  }
  font-size: $font-size-base;
}

方法二：通过注入样式(推荐)

在项目的_data目录下创建或修改styles.styl文件，添加以下内容：

.category-all-page .category-list-count {
    badge() {all: unset;}
    badge()
    
    color: $grey;

    &::before {
      content: ' (';
    }

    &::after {
      content: ') ';
    }
    font-size: $font-size-base;
}

样式修改原理分析

1. badge样式重置：通过badge() {all: unset;}清除默认的徽章样式
2. 括号添加：使用伪元素::before和::after添加括号
3. 颜色调整：将颜色改为灰色($grey)以降低视觉冲击
4. 字体大小：保持与正文一致的字体大小

最佳实践建议

1. 推荐使用注入样式的方法，这样在主题更新时不会丢失自定义设置
2. 可以根据个人喜好调整括号样式或颜色
3. 修改后建议清除Hexo缓存并重新生成查看效果

通过以上方法，用户可以轻松地将文章计数样式调整为更符合个人审美的设计，同时保持主题的可维护性。这种自定义方式也展示了Hexo+NexT主题强大的灵活性。