Hexosweetalert2开屏弹窗

项目地址

https://github.com/sweetalert2/sweetalert2

安装

在GitHub Release界面下载sweetalert2.all.min.js放入\themes\source\js中

在\themes\source\js新建一个js文件，如startup.js

对主题yml文件修改

1
2
3
4
5
6
inject:
  enable: true 
  css:
  
  js:

修改为

1
2
3
4
5
6
7
8
inject:
  enable: true 
  css:

  js:
      - /js/sweetalert2.all.min.js
      - /js/startup.js

这样就可以在打开博客时弹出弹框

使用

对startup.js添加内容即可修改弹窗

阅读官方文档修改样式

sweetalert2.github.io

如本站使用的

1
2
3
4
5
6
7
8
9
10
11
Swal.fire({  
    title: "这里是李小黑的博客",  
    html: "由于本站及图库均搭建在外网<br>最好使用<b><font color=\"＃1E90FF\">魔法</font></b>浏览本网站哦",  
    icon: "",  
    allowOutsideClick: true,  
    showConfirmButton: false,  
    confirmButtonText: "好的",  
    imageUrl: "https://cdn.jsdelivr.net/gh/lxhei1831/blog_img@main/X2Twitter.com_EwmI-j3VEAMGDJ3_gif-ezgif.com-video-to-gif-converter%20(1).gif",  
    imageWidth: 160,  
    imageHeight: 160,  
});

效果如图

pjax

防止在博客内每切换一次页面都会弹出一次窗口，就要启用pjax

在主题yml文件中修改为true即可

1
2
3
4
5
pjax:  
  enable: true  
  exclude:  
    # - xxxx  
    # - xxxx