前言
私密文章参考: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;
}
注意:由于修改了依赖库中的代码,一旦修改或更新依赖都会覆盖掉我们的修改,需要重新修改。
参考文章
Q.E.D.