00

当你的博客是完全闭源的，但又想把最近的一次更新放出来时，我们就可以这样做——把本次提交信息直接写到底栏里！

理论上，不止是可以在底栏显示，也可以在侧边栏等等地方，甚至可以只在某一个页面显示。

注意！Butterfly 主题的 insert 和 footer 功能不支持直接插入 ejs。

01 获取 commit 信息

这步卡了我好久。因为我博客的源代码仓库和部署仓库都转成了闭源，没办法直接从 GitHub 获取。

于是，我想到两种方案：

直接修改 footer 的模板，在编译的同时直接把当前 commit 信息写入footer。
在 footer 上新引入一个 js，以此实现不修改主题文件而实现这一功能。

经过我的深思熟虑，其实是因为我直接用 npm 管理主题包（hexo-theme-butterfly），而不是手动安装到 source 下，直接改的话未来更新主题会比较麻烦。我最终选择了第二种方法。

那么好，直接把要求喂给 Gemini 2.5 Pro，于是我们可以得到这样一个文件：

const fs = require('fs');
const path = require('path');
const { execSync } = require('child_process');

console.log('Generating final commit-info.js file...');

try {
  const hash = execSync('git rev-parse --short HEAD').toString().trim();
  const message = execSync('git log -1 --pretty=%s').toString().trim();
  const dateISO = execSync('git log -1 --format=%cI').toString().trim();

  const commitInfo = { hash, message, dateISO };

  const commitInfoJsonString = JSON.stringify(commitInfo);

  const jsContent = `
window.commitInfo = ${commitInfoJsonString};

document.addEventListener('DOMContentLoaded', function() {
  const placeholder = document.getElementById('commit-info-placeholder');
  const info = window.commitInfo;

  if (placeholder && info && info.hash) {
    const date = new Date(info.dateISO).toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai', hour12: false });

    const repoUrl = \`https://github.com/[你的 GitHub 用户名]/[你的源代码仓库]/commit/\${info.hash}\`; // 在客户端脚本中使用 info.hash

    placeholder.innerHTML = \`
      <p style="margin: 0.5em 0;">最后更新于：\${date}</p>
      <p style="margin: 0.5em 0;">
        <a href="\${repoUrl}" target="_blank" rel="noopener noreferrer">[\${info.hash}]</a>
        - <span>\${info.message}</span>
      </p>
    \`;
  }
});
`;

  const outputDir = path.join(__dirname, 'source', 'js');
  if (!fs.existsSync(outputDir)) {
    fs.mkdirSync(outputDir, { recursive: true });
  }
  const outputPath = path.join(outputDir, 'commit-info.js');
  fs.writeFileSync(outputPath, jsContent);

  console.log(`Successfully generated script to: ${outputPath}`);

} catch (error) {
  console.error('Failed to generate commit-info.js:', error);
  process.exit(1);
}

复制它，再进行一些你自己的可能有的修改，并保存为 博客根目录/generate-commit-info.js。先试试 node 直接跑一下试试吧：

Generating final commit-info.js file...
Successfully generated script to: /home/Arkria/blog-source/source/js/commit-info.js

cat 一下看看：

window.commitInfo = {"hash":"4b673e3","message":"test02","dateISO":"2025-08-24T17:29:02+08:00"};

document.addEventListener('DOMContentLoaded', function() {
  const placeholder = document.getElementById('commit-info-placeholder');
  const info = window.commitInfo;

  if (placeholder && info && info.hash) {
    const date = new Date(info.dateISO).toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai', hour12: false });

    const repoUrl = `https://github.com/AkinaLTS/blog-source/commit/${info.hash}`; 

    placeholder.innerHTML = `
      <p style="margin: 0.5em 0;">最后更新于：${date}</p>
      <p style="margin: 0.5em 0;">
        <a href="${repoUrl}" target="_blank" rel="noopener noreferrer">[${info.hash}]</a>
        - <span>${info.message}</span>
      </p>
    `;
  }
});

完美！

02 预留 html 容器

Q：为什么要预留一个 html 容器呢？
A：因为上个 js 脚本生成的 commit-info.js 使用ID寻找容器。不提前声明=Boom。

翻找 _config.butterfly.yml，找到 Footer Settings，我们插入一个 placeholder，就像这样：

# --------------------------------------
# Footer Settings
# --------------------------------------
footer:
  owner:
    enable: true
    since: 2022
  custom_text: >
    <a href="https://icp.gov.moe/?keyword=20240601" target="_blank">萌ICP备20240601号</a>
    # 对 就是我↓
    <div id="commit-info-placeholder" style="text-align: center; margin-top: 10px; font-size: 0.8em; color: #888;">
    </div>

  # Copyright of theme and framework
  copyright: false

03 插入 js 脚本

继续翻找 _config.butterfly.yml，找到

# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
inject:
  head:
  bottom:

在 bottom 下，添加

- <script defer src="/js/commit-info.js"></script>

即

# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
inject:
  head:
  bottom:
    - <script defer src="/js/commit-info.js"></script>

然后你就~~Vape~~注入成功了。

04 测试效果

简简单单 hexo clean && node generate-commit-info.js && hexo g && hexo s，打开 localhost:4000 看看效果：

不错，~~git add --all && git commit -m "优化系统稳定性 & 提升系统流畅度" && git push --force~~

05 一些提醒

如果你有参考我的那篇关于使用 GitHub Workflow 的文章的话，同时也需更改deploy.yml。只需添加 node generate-commit-info.js到 hexo generate 之前即可。