前言

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

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

参考文章

Hexo 搭建个人博客系列:进阶设置篇

Q.E.D.


The best thing you can do at work hard.