Hexo Next主题Busuanzi站点浏览数不显示解决办法

发表于 更新于 分类于 阅读次数： 评论数：

因为 NexT 主题在 v7.0+（尤其是 v8.x / v9.x） 版本后，已经彻底移除了 _custom 目录和 custom.styl 文件的默认支持（通过 PR #868 变更）。站点没有 source/css/custom/custom.styl 或 themes/next/source/css/_custom/custom.styl 是正常现象。

为什么 PV 不显示（回顾问题根源）

  • NexT 默认在 Busuanzi 的容器（如 <span id="busuanzi_container_site_pv">）上加了 style="display: none;"（或通过 CSS 隐藏）。

  • 这是 Busuanzi 官方推荐做法：先隐藏，脚本加载成功后再 JS 动态移除 display: none 显示数字。

  • 但在某些情况下（插件冲突、live2d、异步加载延迟、scheme 差异），JS 没及时移除隐藏 → PV 容器一直不显示（UV 容器有时正常，因为位置/时机不同）。

推荐修复方式（不依赖 custom.styl）

方法1：最简单、最推荐 - 用自定义 CSS 注入（通过 custom_file_path）

NexT 支持在站点根目录的 _data 文件夹放自定义 Stylus/CSS 文件。

  1. 在你的 Hexo 项目根目录创建文件夹（如果没有）：

    1
    2

    source/_data/

  2. 在里面新建文件 styles.styl（或叫 custom.styl，名字随意，但要一致）：

    1
    2

    source/_data/styles.styl

  3. 文件内容写上强制显示的规则（Stylus 语法，很接近 CSS）：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    /* 强制显示 Busuanzi 全站 UV 和 PV 容器（覆盖 NexT 默认隐藏） */
     #busuanzi_container_site_uv,
     #busuanzi_container_site_pv {
       display: inline !important;  // 或 inline-block / block，根据实际布局测试
       visibility: visible !important;  // 额外覆盖 visibility: hidden（如果有）
     }
     
     /* 确保数值元素可见（即使父级有问题） */
     #busuanzi_value_site_uv,
     #busuanzi_value_site_pv,
     .busuanzi-value {
       display: inline !important;
     }
     
     /* 美化：统一间距、颜色（适应明暗模式） */
     .busuanzi-count,          // 如果 NexT 用了这个包裹类
     #busuanzi_container_site_uv,
     #busuanzi_container_site_pv {
       margin: 0 8px;          // 左右间距均匀
       color: var(--text-color);  // 用 NexT 变量，随主题明暗变化（推荐）
       font-size: 0.9em;       // 稍小一点，更协调
     }
     
     /* 只针对 PV 的额外样式（可选） */
     #busuanzi_container_site_pv {
       margin-left: 12px;      // 或根据你的 footer 布局微调
     }

  4. 打开你的 NexT 主题配置文件（项目根目录的 _config.next.yml 或 themes/next/_config.yml），找到或添加 custom_file_path 部分：

    1
    2
    3
    4
    5
    custom_file_path:
      # 其他可能的自定义文件...

      style: source/_data/styles.styl   # 关键这一行，路径从项目根启用

    • 注意：路径是相对 Hexo 根目录的，不是主题目录。
    • 如果你用了 variable 或 mixin，也可以类似加。

  5. 执行：

    1
    2

    hexo clean && hexo generate

    然后部署。刷新页面（清缓存 Ctrl+F5），PV 应该强制显示出来了。