Hexo 加密插件适配

作者: 小橘猫

发表于2025-06-27

更新于2025-06-27

总字数: 883字

阅读时长: 2分钟

访问量:

编程前端

hexo-blog-encrypt 是一款应用于 Hexo 博客框架的加密插件，它可以单独对某篇文章加密，也可以对某个 Tag 下的所有文章加密，支持分别设置密码、自定义提示语、更换主题……

只要按照官方文档的说明一步步执行，安装使用这款插件十分简单。但如果你的加密文章需要生成 TOC，又或者加密文章中包含由 Js 脚本驱动的内容，那么你就需要做一些额外的工作。

正确生成 TOC 目录

经过加密后，文章的 page.content 会被替换成 “内容已被加密，请输入密码查看” 等提示，而 Hexo 的 TOC 一般就是根据 page.content 生成的。因此，我们需要增加相应的判断，在加密时使用文章的原生内容来生成目录。

找到 Hexo 主题中 TOC 的模板文件（比如，Meow 主题的 TOC 模板文件路径是 layout/pages/post/toc.pug），然后修改生成 TOC 的函数。

1
2
3

.toc-content
-  != toc(page.content, { class: 'toc-list', list_number: theme.post.toc.number, max_depth: theme.post.toc.max_depth, max_items: theme.post.toc.max_items})
+  != toc(page.encrypt ? page.origin : page.content, { class: 'toc-list', list_number: theme.post.toc.number, max_depth: theme.post.toc.max_depth, max_items: theme.post.toc.max_items})

注意：有些主题的文章页面对象可能被定义为 post 而不是 page，需要根据实际情况进行修改。

加密时隐藏 TOC

在很多时候，我们在加密文章的同时也希望 TOC 中的标题不被暴露。我在检查插件源代码 hbe.js 时发现解密函数中有这么一段 TOC 相关的内容：

// TOC part
var tocDiv = document.getElementById("toc-div");
if (tocDiv) {
  tocDiv.style.display = 'inline';
}

在不修改引入的 Js 文件的情况下，我们给 TOC 的容器增加 id toc-div，并且在刚才的 TOC 模板文件中做进一步修改：当文章被加密时，TOC 默认不显示。

1
2
3

-.toc-content
+.toc-content#toc-div(style=page.encrypt ? "display:none" : "")
  != toc(page.encrypt ? page.origin : page.content, { class: 'toc-list', list_number: theme.post.toc.number, max_depth: theme.post.toc.max_depth, max_items: theme.post.toc.max_items})

不得不说，插件源码直接将 id 写死的做法实在太简单粗暴了。在里面甚至还能看到对图片懒加载和 Next 主题的额外处理，但实际上用户应用的主题不一定有图片懒加载，使用的图片懒加载方式也不一定是默认的写法，更不一定用的是 Next 主题…… 所以将这样的代码嵌入并不合理。

解密后重新执行脚本

文章处于加密状态时，页面加载时执行的 Js 脚本无法获取对应的元素并使之生效；文章解密后，Js 脚本并不会自动再执行一次，导致某些文章内容无法正常显示。这时官方文档中提及的 known issue。

第一个解决办法是在文章末尾插入 <script> 标签并手动调用需要的函数，但这样做极其麻烦。

第二个解决办法是监听插件解密后触发的 hexo-blog-decrypt 事件，并将需要重新执行的函数全部写入，相当于自动刷新。

以 Meow 主题为例，在 source/js/main.js 文件中新增以下代码：

const refreshFn = () => {
  const refresh = () => {
    // 逐个执行需要的函数，根据实际情况列出
    initLazyLoad();
    initCodeBlock();
    initTags();
  };

  refresh();
};

// 根据传入的加密标识判断是否需要监听
if (GLOBALCONFIG.encrypt) {
  // 解密后执行函数
  window.addEventListener("hexo-blog-decrypt", refreshFn);
}