写这篇博客的缘故是因为看到cnblogs上的live2d
模型可以自动欢迎,但是自己又不会魔改Hexo
的live2d
,就想到了以弹窗的方式来欢迎。
本文基于Hexo Butterfly主题,其他主题的修改可能会有所不同,请自行了解文件对应位置。
Butterfly主题已默认开启Pjax。
此版基于博主之前所发布的关于NexT主题的修改,同时修复了部分问题。
最终的实现效果如下:
选择一个好看的弹窗
首先,你既然要弹窗,就要好看,而不是JavaScript
里的alert()
函数,在洛谷上做题的时候,看到“提交成功”的弹窗还比较好看,就查找了一下来源(详情),然后选定了这个,感觉还不错。
配置
作者使用了Git进行主题安装。如果您使用的是npm安装,请将以下目录中themesbutterflysource
替换为source
。
获取JavaScript和CSS文件
我们需要将sweetalert.js
和sweetalert.css
放到自己博客下,防止CDN炸裂导致的错误。
新建JavaScript文件
在博客根目录往下找到themesbutterflysourcejs
文件夹,新建sweetalert.js
,文件内容请看这里,觉得复制麻烦的可以直接按Crtl S
进行保存。
新建CSS文件
在博客根目录往下找到themesbutterflysourcecss
文件夹,新建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>
这样就完成了引入。
自动弹窗
在博客根目录往下找到themesbutterflysourcejs
文件夹,新建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()
})
这样,就大功告成了。