【Butterfly主题】弹出欢迎弹窗

pai233

发布于 2022-04-25 16:48:39

8773

发布于 2022-04-25 16:48:39

文章被收录于专栏：pai233的专栏

写这篇博客的缘故是因为看到cnblogs上的live2d模型可以自动欢迎，但是自己又不会魔改Hexo的live2d，就想到了以弹窗的方式来欢迎。

本文基于Hexo+Butterfly主题，其他主题的修改可能会有所不同，请自行了解文件对应位置。

Butterfly主题已默认开启Pjax。

此版基于博主之前所发布的关于NexT主题的修改，同时修复了部分问题。

最终的实现效果如下：

选择一个好看的弹窗

首先，你既然要弹窗，就要好看，而不是JavaScript里的alert()函数，在洛谷上做题的时候，看到“提交成功”的弹窗还比较好看，就查找了一下来源（详情），然后选定了这个，感觉还不错。

配置

作者使用了Git进行主题安装。如果您使用的是npm安装，请将以下目录中\themes\butterfly\source\替换为\source\。

获取JavaScript和CSS文件

我们需要将sweetalert.js和sweetalert.css放到自己博客下，防止CDN炸裂导致的错误。

新建JavaScript文件

在博客根目录往下找到\themes\butterfly\source\js文件夹，新建sweetalert.js，文件内容请看这里，觉得复制麻烦的可以直接按Crtl+S进行保存。

新建CSS文件

在博客根目录往下找到\themes\butterfly\source\css文件夹，新建sweetalert.css，文件内容请看这里。

保存完后的结构如下：

引入到主题中

打开主题配置文件，在inject配置项的head中进行注入：

inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
    - <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    - <script type="text/javascript" src ="/js/welcome.js" ></script> 
    - <script src="/js/sweetalert.js"></script>
    - <link rel="stylesheet" href="/css/sweetalert.css">
  bottom:
    # - <script src="xxxx"></script>

这样就完成了引入。

自动弹窗

在博客根目录往下找到\themes\butterfly\source\js文件夹，新建welcome.js：

function welcome(){
    let welcome_text = '欢迎光顾本蒟蒻的小窝~'
    if(document.referrer!==''){
        let referrer=document.referrer.split("/")[2];
        welcome_text="欢迎你，来自"+referrer.toUpperCase()+"的用户！";
        if(referrer.toUpperCase()==document.domain.toUpperCase())return;
    }
    swal({
        title: " 欢迎！",
        text: welcome_text+'\n打开页面下方音乐以获得更佳体验！',
        imageUrl: "/img/avatar.jpg",
        timer: 3000,
        showConfirmButton: false
    });
}
$(document).ready(()=>{
    welcome()
})

这样，就大功告成了。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-04-09，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript