Stellar 主题修改

Stellar 主题完全满足了我的两个需求：一是 wiki 功能（这也是 Stellar 主题最大的卖点），第二个就是简洁，比起臃肿的 anzhiyu 主题，真的轻量化。

本来不打算修改任何主题文件，但是玩了一个多星期后，真的有些功能还是决定加上，就开了这个文章，作为索引，汇总一下修改内容。

规避直接修改主题文件办法

很简单的做法，直接利用 hexo.theme.setView()，在渲染前覆盖主题模板内容。把之前写的模板替换脚本直接拷过来：

/scripts/theme-override.js

const fs = require('fs');
const path = require('path');

hexo.on('generateBefore', function() {
  const themeLayoutDir = path.join(hexo.theme_dir, 'layout');
  const customLayoutDir = path.join(hexo.base_dir, 'layout');

  function walkDir(dir, baseDir, fileList = []) {
    if (!fs.existsSync(dir)) return fileList;
    fs.readdirSync(dir).forEach(item => {
      const full = path.join(dir, item);
      if (fs.statSync(full).isDirectory()) {
        walkDir(full, baseDir, fileList);
      } else {
        fileList.push({ full, relative: path.relative(baseDir, full).replace(/\\/g, '/') });
      }
    });
    return fileList;
  }

  walkDir(customLayoutDir, customLayoutDir).forEach(({ full, relative }) => {
    if (fs.existsSync(path.join(themeLayoutDir, relative))) {
      hexo.theme.setView(relative, fs.readFileSync(full, 'utf-8'));
    }
  });
});

#662：侧边栏时间轴在 PJAX 跳转后重复加载的问题

/source/js/plugins/pjax.js

                if (op && np) {
                  if (part === '.widgets') {
-                    const savedScrollTop = op.scrollTop || 0;
-                    const oldChildren = Array.from(op.children);
-                    const newChildren = Array.from(np.children);
-
-                    // Simple positional merger for performance and order preservation
-                    const maxLength = Math.max(oldChildren.length, newChildren.length);
-                    for (let i = 0; i < maxLength; i++) {
-                      const oc = oldChildren[i];
-                      const nc = newChildren[i];
-                      if (oc && nc) {
-                        if (!isWidgetIdentical(oc, nc)) {
-                          oc.replaceWith(nc);
-                        }
-                      } else if (oc) {
-                        oc.remove();
-                      } else if (nc) {
-                        op.appendChild(nc);
-                      }
-                    }
-                    // 恢复滚动位置（在 DOM 更新后重新获取引用）
-                    const widgetsContainer = oSide.querySelector('.widgets');
-                    if (widgetsContainer) {
-                      widgetsContainer.style.scrollBehavior = 'auto';
-                      widgetsContainer.scrollTop = savedScrollTop;
-                      // 延迟恢复 scroll-behavior 以确保滚动完成
-                      requestAnimationFrame(() => {
-                        widgetsContainer.style.scrollBehavior = '';
-                      });
-                    }
+                    if (op && np) {
+                      op.replaceWith(np);
+                    } else if (op) {
+                      op.remove();
+                    } else if (np) {
+                      oSide.appendChild(np);
+                    }
                  } else {

#664：feature: 新增文章页字数统计功能

Resolves #302

功能说明

通过调用 hexo-wordcount 插件，为博客文章添加：

文章页字数统计：在文章顶部信息栏显示正文总字数。
文章页阅读时长估算：根据设定的阅读速度（默认 300 字/分钟，英文减半）计算并显示预计阅读时间。
首页文章卡片字数统计：每篇文章卡片上显示字数图标和字数。

使用前提

安装 hexo-wordcount 插件：npm install hexo-wordcount --save。

已经在包管理里集成了插件依赖，安装命令可简化：npm install。

配置方式

在主题配置文件 _config.stellar.yml 中添加以下字段：

/_config.stellar.yml

wordcount: # 需要安装 hexo-wordcount 插件
  card_wordcount: true     # 首页文章卡是否显示字数
  post_wordcount: true     # 文章页是否显示字数
  reading_speed: 300       # 每分钟阅读字数（中文）
  min2read: true           # 是否显示阅读时间

如果不喜欢在卡片区域显示“约等于”，可以自行在 ‘css’ 中添加：

1
2
3

#post-count svg {
    display: none;
}

涉及文件

文件路径	修改说明
`config.yml`	新增 wordcount 配置段
`layout/_partial/main/navbar/article_banner.ejs`	引入 countinfo 局部模板
`layout/partial/main/navbar/countinfo.ejs`	文章页字数和阅读时长
`layout/partial/main/post_list/post_card.ejs`	卡片中增加字数显示
`languages/*`	多语言适配
`package.json`	默认 hexo-wordcount 插件依赖