对于博客内容加密这件事，在有后端服务器的情况下，是一件比较简单的事情，但是对于静态博客来说，就比较麻烦了。Hexo 博客里面有个非常著名的加密插件 hexo-blog-encrypt，它的大概原理是在 hexo g 的时候对 HTML 的内容进行加密，然后在输入正确的密码后解密出正确的 HTML 内容。

在插件的 issue 列表里面一个 Won’t fix 的 issue 里面提到一个问题是这个插件解密后导致 Dplayer 播放器显示不出来。

https://github.com/D0n9X1n/hexo-blog-encrypt/issues/190

最后的结论是受限于 Hexo 静态博客的特性，这个问题不会被修复。

类似地，这个问题在 hexo-tag-dplayer 和 hexo-tag-aplayer 的 issue 里面也有提到。

https://github.com/MoePlayer/hexo-tag-dplayer/issues/26

https://github.com/MoePlayer/hexo-tag-aplayer/issues/124

就是这样一个冲突了好几年的问题，竟然在抄来抄去的中文互联网里面没有找到一个 Step by Step 的解决方案，为数不多的线索就是需要用回调函数，但是具体怎么用，没有一个详细的说明。

问题定位

从控制台的报错信息来看，写的是 Dplayer 未定义，在我的博客文章中的 new DPlayer 代码执行错误。

再结合这些插件的 issue 列表，这个错误表明 Dplayer 或者 Aplayer 的 JS 文件没有被正确加载。

解决方案

再进一步观察控制台的输出，发现 JS 的加载实际上在解密出来的 new DPlayer 执行之后才被执行。

所以我的解决思路就是在解密之前就加载 Dplayer 或者 Aplayer 的 JS 文件。

hexo-blog-encrypt 插件的解密函数是 decrypt，它被写在了 lib/hbe.js 里面。

所以我要做的是在 hbe.js 里面引入 Dplayer 或者 Aplayer 的 JS 文件，然后在解密之前就加载这个 JS 文件。

具体步骤如下:

  1. fork hexo-blog-encrypt 仓库

  2. 修改 lib/hbe.js 文件，加入 Dplayer 或者 Aplayer 的 JS 文件在 hbe.js 文件的头部

var dpjs = document.createElement('script');
dpjs.src = 'https://npm.elemecdn.com/dplayer/dist/DPlayer.min.js';
document.head.appendChild(dpjs);

var apjs = document.createElement('script');
apjs.src = 'https://npm.elemecdn.com/aplayer/dist/APlayer.min.js';
document.head.appendChild(apjs);

var mtjs = document.createElement('script');
mtjs.src = 'https://npm.elemecdn.com/meting/dist/Meting.min.js';
document.head.appendChild(mtjs);

  1. 修改 pakcage.json 文件，改为使用我们自己的仓库

格式为: github:用户名/仓库名

"hexo-blog-encrypt": "github:WANG-Guangxin/hexo-blog-encrypt",

当然，你也可以自己做个 npm 的包。

  1. 重新安装 hexo-blog-encrypt 插件
npm install hexo-blog-encrypt --save

再次部署博客，问题解决。