之前我在看二叉树树的网站的时候，看到了他网站底下有一个构建时间，
于是我就想着在我的这个博客里添加这个功能。
说实话，这玩意儿挺实用的，访客一眼就能看出站点最近有没有更新

然后我就开始折腾了。

一开始觉得很简单，不就是改改主题模板，插一行代码显示时间嘛。
我想要的是每次执行 hexo g 生成静态文件时固定下来的那一刻

于是我开始翻 Butterfly 主题的 footer.pug 模板，想直接在源文件里加逻辑。
结果第一次尝试就翻车了，因为 Pug 对缩进极其敏感，我随便改了几行，整个页脚直接报错渲染不出来。
还好我提前备份了原始文件，不然整个博客都得瘫痪。这次教训让我明白：能不动主题源文件，就尽量别动。

后来我换了个思路——利用 Butterfly 自带的 inject 注入功能，配合 Hexo 的 after_generate ，
在每次生成站点时自动创建一个 JS 文件，里面存着构建时间，再通过 inject 把这个 JS 塞到页面底部。全程不碰主题源码，升级主题也不受影响。

具体实现步骤
第一步：创建生成时间脚本
在 Hexo 根目录下的 scripts 文件夹（如果没有就手动创建）中新建一个文件，命名为 build-time.js，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// scripts/build-time.js
hexo.extend.filter.register('after_generate', function () {
const fs = require('fs');
const path = require('path');
const now = new Date();
// 格式化为：2026年08月05日 13:21:40
const pad = n => String(n).padStart(2, '0');
const Y = now.getFullYear();
const M = pad(now.getMonth() + 1);
const D = pad(now.getDate());
const h = pad(now.getHours());
const m = pad(now.getMinutes());
const s = pad(now.getSeconds());
const timeStr = `${Y}年${M}月${D}日 ${h}:${m}:${s}`;
const jsContent = `window.BUILD_TIME = '${timeStr}';`;
const filePath = path.join(hexo.public_dir, 'js', 'build-time.js');
// 确保目录存在
if (!fs.existsSync(path.dirname(filePath))) {
fs.mkdirSync(path.dirname(filePath), { recursive: true });
}
fs.writeFileSync(filePath, jsContent);
});

这个脚本会在每次 hexo g 完成后，在 public/js/ 目录下生成一个 build-time.js 文件，里面定义了一个全局变量 window.BUILD_TIME，值就是当前的构建时间。

第二步：在主题配置中注入显示逻辑
打开你的 _config.butterfly.yml 配置文件，找到 inject 字段（如果没有就手动添加），在 bottom 列表中加入以下两项：

1
2
3
4
5
6
7
8
9
10
11
12
inject:
bottom:
- <script src="/js/build-time.js"></script>
- <script>
document.addEventListener('DOMContentLoaded', function() {
var el = document.createElement('span');
el.textContent = '构建时间：' + window.BUILD_TIME;
el.style.cssText = 'font-size:0.85rem;opacity:0.7;display:block;text-align:center;margin-top:6px;';
var footer = document.querySelector('.footer-other');
if (footer) footer.appendChild(el);
});
</script>

第一行加载我们生成的 JS 文件，第二行则是在页面加载完成后，动态创建一个 元素，把构建时间显示在页脚的版权信息下方。

效果与注意事项
保存以上两个文件后，运行 hexo clean && hexo g 重新生成站点（如果用 hexo s 预览，记得重启服务）。

页脚会出现类似“构建时间：2026年08月05日 13:21:40”的文字，这个时间固定为你最后一次执行 hexo g 的时刻，不会随浏览器刷新而改变。

因为用的是 inject 注入，没有修改任何主题源文件，所以以后升级 Butterfly 主题也不会丢失这个功能。

折腾完之后，看着页脚那行小字，虽然只是一个微不足道的细节，但心里莫名舒坦

有时候技术折腾就是这样，不是为了什么惊天动地的功能，就是图个乐子，图个“我做到了”的满足感。

搞定，收工。