Hugo | 加密博文 - 黑白之海

免本地安装环境，直接云端部署即可。

我hugo是挂在cloudflare pages上的，其他平台的操作请酌情调整。

根据前人的教程¹们²，我在cloudflare pages添加了新的环境变量RUBY_VERSION=2.6.2，并把所需文件放到了博客文件夹的根目录，解密用的decrypt.js也放进根目录，短代码放进了短代码文件夹。同时在cloudflare pages的build command写chmod +x ./deploy.sh && ./deploy.sh。

众神归位——

对不起果然出现问题了！

一开始遇到的问题是Permission denied，搜了一下解决办法³。build command不要只写./deploy.sh，按我上面那段似乎就可以成功部署了。
第二个问题是，点击解密按钮，提示未定义click_handler。这个我看了一下应该是js的问题，把js文件在hugo的single.html引用一下即可。

{{.Content}}<script src="./decrypt.js"></script>

项目演示中⁴提到：

现在你可以尝试刷新页面、关闭页面再重新打开，你会发现认证状态仍然有效

所以如果想反复测试的话需要开一下浏览器无痕【

输入PASSWORD

文章的部分内容被密码保护：

加密后未解密时，在浏览器中显示为

体验谈：

添加加密脚本以后，cloudflare pages部署时间需要35s左右，比原来单独hugo生成网页要慢上一些。但总体还能接受啦w
部分主题下，加密内容的css层高段落间距等样式、对应的侧边toc目录会失效。（尝试手动添加新的css类，可行。）
RSS需要改一下，从.Content改为.Summary。

// 抄一下原有css

.hugo-encryptor-form{
   margin-top: 0;
   margin-bottom: 1rem;
}

.hugo-encryptor-container{
   line-height: 1.5em;
}

.hugo-encryptor-container p{
   margin-top: 0;
   margin-bottom: 1rem;
}

.hugo-encryptor-container h1 {
  margin: 20px auto;
}

.hugo-encryptor-container h2 {
  margin: 20px auto;
}

.hugo-encryptor-container h3 {
  margin: 20px auto;
}