【个人博客网站】博客美化（一）：制作欢迎弹窗

本文最后更新于 about 2 years ago，文中所描述的信息可能已发生改变。

TIP提示

参考了店长的方案进行修改原教程SAO-UI-PLAN-Notify 原教程SAO-UI-PLAN-LINK-START

修改正文

引入SweetAlert的jsCDN

修改[Blogroot]\_config.butterfly.yml的inject配置项

yaml

inject:
  head:
    - <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  bottom:

修改加载文件

修改[Blogroot]\themes\butterfly\layout\includes\loading\loading-js.pug

pug

.pjax-reload
  script(async).
    var preloader = {
      endLoading: () => {
        document.body.style.overflow = 'auto';
        document.getElementById('loading-box').classList.add("loaded")
        document.getElementById('loading-box').style.transition = 'opacity 3s';
        document.getElementById('loading-box').style.opacity = '0';
        setTimeout(function(){
          document.getElementById('loading-box').classList.add("loaded")
        },3000)

        //用于判断是否第一次加载
        if(sessionStorage.getItem("isReload")){
          //若显示已经加载过
          return true
        }else{
          //若为第一次加载
          sessionStorage.setItem("isReload", true)
          swal({
            title: "//弹窗标题",
            text: '//弹窗文本',
            icon: "//弹窗图标",
            button:"//按钮文本",
            timer: //弹窗延时 ,
            showConfirmButton: false
          })
        }
      },
      initLoading: () => {
        document.body.style.overflow = '';
        document.getElementById('loading-box').style.transition = '';
        document.getElementById('loading-box').style.opacity = '1';
        document.getElementById('loading-box').classList.remove("loaded")
      }
    }
    window.addEventListener('load',()=> {preloader.endLoading()})

总结

弹窗是很好写的，但奈何本人是个笨蛋，bug一堆，总之还是写出来了

修改正文 ​

引入SweetAlert的jsCDN ​

修改加载文件 ​

总结 ​

修改正文

引入SweetAlert的jsCDN

修改加载文件

总结