文章代号：hexoaddsweetalert2

前言

突发奇想想给博客添加一个欢迎弹窗，介绍一下我博客的一些特色功能，如听歌和全局搜索……

然后我就Google it，发现了一个开源项目SweetAlert2，但是没有和Hexo搭配使用的教程，但是这个开源项目是JavaScript实现的，所以自己来搞也不是什么大问题，大概五分钟就搞定了，~~于是又可以写（shui）篇教程了~~

本教程以博客使用的Keep v3.7.7主题为例，其它主题可以按照差不多的思路

最终效果

视频版教程

哔哩哔哩：

正式开始

下载sweetalert2.all.min.js

从这里下载该js文件并将其放入Hexo项目根目录的source\js\文件夹，如果没有就新建一个。

将js注入到博客中

在Hexo项目根目录的source\js\文件夹中新建一个js文件，文件名如alert.js

编辑主题配置文件source\_data\keep.yml（也可能是themes\hexo-theme-keep\_config.yml），定位到

inject:
  enable: false  # Option values: true | false
  css:
      # e.g.
      # - /css/custom-1.css
      # - /css/custom-2.css
    # - ...
  js:
      # e.g.
      # - /js/custom-1.js
      # - /js/custom-2.js
    # - ...

将其更改为

inject:
  enable: true  # Option values: true | false
  css:
      # e.g.
      # - /css/custom-1.css
      # - /css/custom-2.css
    # - ...
  js:
      - /js/sweetalert2.all.min.js
      - /js/alert.js
      # e.g.
      # - /js/custom-1.js
      # - /js/custom-2.js

如果你的主题配置文件没有类似于这个的选项，尝试将js文件添加到主题源码中的js文件夹中

编辑窗口alert.js

先创建一个最简单的示例：

1	Swal.fire('Any fool can use a computer')

运行博客服务器

hexo g

如果你要进行更高级的效果，在官方文档的Example页有很多示例，看那个好看然后复制修改就行

下面是我的博客欢迎弹窗代码：（2023/10/01更新）

Swal.fire({
  title: '欢迎来到我的技术小屋(◍•ᴗ•◍)',
  html: '来了就收藏一下呗~<br>左下角可以听歌哟~<br>右上角可以进行全局搜索~<br>如果对文章内容有什么问题或者有什么想说的，可以在下方评论，我会尽快回复的~',
  iconHtml: '<i class="fas fa-home"></i>',
  confirmButtonText: '我知道啦',
  footer: '<a href="/2023/09/24/hexoaddsweetalert2/"><i class="fas fa-link"></i>你也想要同款弹窗？看这里看这里！</a>'
})

注意我使用html替代text，这样就可以使用一些html标签如<br>换行符标签

启用pjax

如果你不想要博客内切换一次页面就弹一次窗的话，就要启用一个叫做pjax的东东：

PJAX 的工作原理是通过 Ajax 从服务器获取 HTML，并用 Ajax 请求得到 HTML 替换页面上容器的内容，然后使用 pushState 更新浏览器的当前 URL，而无需重新加载页面的布局或任何资源（JS，CSS），从而提供快速，完整页面加载的外观。但实际上它只是 Ajax 和 pushState。（来自Keep官方文档的pjax页跳转）

在Keep主题中，可以很简单的启用pjax，只需将配置文件的这里改为true即可

1 2	pjax: enable: true # Option values: true \| false

如果你的主题配置文件没有pjax的话，可以参考这篇文章

后记

我的教程肯定没有涵盖全部的内容，如果你更高级的弹窗的话去翻翻官方文档吧。