diff --git a/README.md b/README.md index fb36cce..09b7cd0 100644 --- a/README.md +++ b/README.md @@ -8,19 +8,40 @@ ## 依赖 需要jQuery和font-awesome支持,请确保它们已在页面中加载,例如在`
`中加入: -``` +```xml ``` +否则无法正常显示。 ## 使用 -请把整个项目克隆到服务器上,使之能够正常访问。修改autoload.js中的参数(具体参考该文件内的注释),这样,通过 +如果你可以通过ssh访问你的主机,请把整个项目克隆到服务器上。执行: +```bash +cd /path/to/your/webroot +git clone https://github.com/stevenjoezhang/live2d-widget.git ``` - +如果你的主机是虚拟主机,请选择`Download ZIP`,然后通过ftp上传到主机上,再解压到网站的目录下。 +如果你通过Hexo等工具部署静态博客,请选择`Download ZIP`,然后解压到本地的博客目录下。重新部署博客时,相关文件就会自动上传。 + +这样,整个项目就可以通过你的ip或者域名从公网访问了。你可以试试能否正常的通过浏览器打开`autoload.js`和`live2d.min.js`等文件。 +如果没有问题,接下来需要修改一些配置。(你也可以先在本地完成这一步骤,再上传到服务器上) +修改autoload.js中的参数`live2d_path`为`live2d-widget`这一文件夹在公网上的路径。比如说,如果你可以通过 +``` +https://www.example.com/path/to/live2d-widget/live2d.min.js +``` +访问到`live2d.min.js`,那么就把`live2d_path`的值修改为 +``` +https://www.example.com/path/to/live2d-widget/ +``` +路径末尾的`/`一定要加上。具体可以参考该文件内的注释。 +完成后,在你要添加看板娘的界面加入 +```xml + ``` 就可以加载了。 -waifu-tips.json中包含了触发条件(selector,选择器)和触发时显示的文字(text)。源文件是对Hexo的NexT主题有效的,为了适用于你自己的网页,也需要自行修改,或增加新内容。 +waifu-tips.json中包含了触发条件(selector,选择器)和触发时显示的文字(text)。源文件是对Hexo的NexT主题有效的,为了适用于你自己的网页,也需要自行修改,或增加新内容。 +如果有任何疑问,欢迎提交ISSUE。 ## 鸣谢 代码自这篇博文魔改而来: diff --git a/autoload.js b/autoload.js index fb3b5bb..49ba2ec 100644 --- a/autoload.js +++ b/autoload.js @@ -1,16 +1,18 @@ -$("").attr({href: "https://www.example.com/path/to/waifu.css", rel: "stylesheet", type: "text/css"}).appendTo('head'); +const live2d_path = "https://www.example.com/path/to/live2d-widget/"; + +$("").attr({href: live2d_path + "waifu.css", rel: "stylesheet", type: "text/css"}).appendTo("head"); //waifu.css的绝对路径 $.ajax({ - url: 'https://www.example.com/path/to/live2d.min.js', - dataType:"script", + url: live2d_path + "live2d.min.js", + dataType: "script", cache: true, async: false }); //live2d.min.js的绝对路径 $.ajax({ - url: 'https://www.example.com/path/to/waifu-tips.js', + url: live2d_path + "waifu-tips.js", dataType:"script", cache: true, async: false @@ -19,7 +21,7 @@ $.ajax({ // 初始化看板娘,会自动加载指定目录下的 waifu-tips.json $(window).on("load", function() { - initWidget("https://www.example.com/path/to/waifu-tips.json", "https://live2d.fghrsh.net/api"); + initWidget(live2d_path + "waifu-tips.json", "https://live2d.fghrsh.net/api"); }); //initWidget第一个参数为waifu-tips.json的绝对路径 //第二个参数为api地址(无需修改) diff --git a/waifu-tips.js b/waifu-tips.js index c65e851..358686e 100755 --- a/waifu-tips.js +++ b/waifu-tips.js @@ -28,10 +28,10 @@ String.prototype.render = function(context) { function initWidget(waifuPath, apiPath) { if (screen.width <= 768) return; - if (sessionStorage.getItem("waifu-display")) { - if (new Date().getTime() - sessionStorage.getItem("waifu-display") <= 86400000) return; + if (localStorage.getItem("waifu-display")) { + if (new Date().getTime() - localStorage.getItem("waifu-display") <= 86400000) return; } - sessionStorage.removeItem("waifu-display"); + localStorage.removeItem("waifu-display"); sessionStorage.removeItem("waifu-text"); $("body").append('
\
\ @@ -111,7 +111,7 @@ function initWidget(waifuPath, apiPath) { window.open("https://github.com/stevenjoezhang/live2d-widget"); }); $("#waifu-tool .fa-times").click(function() { - sessionStorage.setItem("waifu-display", new Date().getTime()); + localStorage.setItem("waifu-display", new Date().getTime()); showMessage("愿你有一天能与重要的人重逢", 2000, 11); $("#waifu").animate({bottom: -1000}, 6000, function() { $("#waifu").hide();