前言
私密文章参考: Hexo（sakura）设置文章置顶 + 私密文章
为 Hexo 加入了私密文章功能后，密码输入错误之后弹出的浏览器自带提示框，在整个博客中显得很不协调。
而接下来要添加的 SweetAlert ，感官上就舒服得多，能给人更好的交互体验。
安装
在 themes/Sakura/layout/_partial/footer.ejs 文件中加入以下代码
<!-- sweetalert -->
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
修改 node_modules/hexo-blog-encrypt/lib/blog-encrypt.js 文件
搜索 alert(WrongPassMessage)，找到弹出错误密码信息的 js 代码段
return await verifyContent(hmacKey, decoded);
}).catch((e) => {
alert(wrongPassMessage);
console.log(e);
return false;
});
把弹框替换为 SweetAlert
return await verifyContent(hmacKey, decoded);
}).catch((e) => {
// alert(wrongPassMessage);
swal({
text: "密码错误！",
icon: "error",
className: "password-error",
button: 'OK'
});
console.log(e);
return false;
});
在 themes/Sakura/source/css/style.css 文件中调整弹窗的样式
/* 密码错误 sweetalert 弹框样式修改 */
.swal-overlay {
background-color: transparent;
}
.swal-footer {
text-align: center;
}
.password-error {
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
border-radius: 4px;
}
注意：由于修改了依赖库中的代码，一旦修改或更新依赖都会覆盖掉我们的修改，需要重新修改。