Hexo使用SweetAlert美化弹窗

前言

私密文章参考: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;
}

注意：由于修改了依赖库中的代码，一旦修改或更新依赖都会覆盖掉我们的修改，需要重新修改。