Featured image of post Hexo 使用 SweetAlert 美化弹窗

Hexo 使用 SweetAlert 美化弹窗

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;
}

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

参考文章

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

Licensed under CC BY-NC-SA 4.0
使用 Hugo 构建 主题 StackJimmy 设计
发表了 32 篇文章・ 总计 66.22 k 字
本站总访问量 · 总访客数
本博客已稳定运行 🧡