This commit is contained in:
StevenJoeZhang 2018-07-11 15:38:35 +08:00
parent 9e20fb4d5a
commit 14c2c04cf0
3 changed files with 62 additions and 9 deletions

33
README.md Normal file
View File

@ -0,0 +1,33 @@
# live2d-widget
## 功能
在网页中添加 Live2D 看板娘
## Demo
https://zhangshuqiao.org
左下角可查看效果
## 依赖
需要jQuery和font-awesome
请确保它们已在页面中加载
## 使用
请修改autoload.js中的参数具体参考该文件内的注释这样通过
```
<script src="/path/to/autolload.js"></script>
```
就可以加载了
waifu-tips.json中包含了触发条件selector选择器和触发时显示的文字text。源文件是对Hexo的NexT主题有效的为了适用于你自己的网页也需要自行修改或增加新内容。
## 鸣谢
代码自这篇博文魔改而来:
https://www.fghrsh.net/post/123.html
其中增加了一些功能,优化了提示展现机制
更多内容可以参考:
https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02
https://zhangshuqiao.org/2018-07/在网页中添加Live2D看板娘
可以自行在后端api中增加模型
https://github.com/xiazeyu/live2d-widget-models

25
autoload.js Normal file
View File

@ -0,0 +1,25 @@
$("<link>").attr({href: "https://www.example.com/path/to/waifu.css", rel: "stylesheet", type: "text/css"}).appendTo('head');
//waifu.css的绝对路径
$.ajax({
url: 'https://www.example.com/path/to/live2d.min.js',
dataType:"script",
cache: true,
async: false
});
//live2d.min.js的绝对路径
$.ajax({
url: 'https://www.example.com/path/to/waifu-tips.js',
dataType:"script",
cache: true,
async: false
});
//waifu-tips.js的绝对路径
// 初始化看板娘,会自动加载指定目录下的 waifu-tips.json
$(window).on("load", function() {
initWidget("/lib/waifu/", "https://api.fghrsh.net/live2d");
});
//initWidget第一个参数为waifu-tips.json所在的文件夹第二个参数为api地址
//api后端可自行搭建参考https://github.com/fghrsh/live2d_api

View File

@ -1,8 +1,3 @@
/*
* https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02
* https://www.fghrsh.net/post/123.html
*/
String.prototype.render = function(context) { String.prototype.render = function(context) {
var tokenReg = /(\\)?\{([^\{\}\\]+)(\\)?\}/g, var tokenReg = /(\\)?\{([^\{\}\\]+)(\\)?\}/g,
strFlag = true, strFlag = true,
@ -26,7 +21,7 @@ String.prototype.render = function(context) {
return strFlag ? result : ""; return strFlag ? result : "";
} }
$(window).on("load", function() { function initWidget(waifuPath, apiPath) {
if (sessionStorage.getItem("waifu-display") == "none") return; if (sessionStorage.getItem("waifu-display") == "none") return;
sessionStorage.removeItem("waifu-text"); sessionStorage.removeItem("waifu-text");
$("body").append('<div class="waifu">\ $("body").append('<div class="waifu">\
@ -210,7 +205,7 @@ $(window).on("load", function() {
} }
} }
function initModel(waifuPath, apiPath) { function initModel() {
if (waifuPath === undefined) waifuPath = ""; if (waifuPath === undefined) waifuPath = "";
if (apiPath === undefined) apiPath = ""; if (apiPath === undefined) apiPath = "";
apiURL = apiPath; apiURL = apiPath;
@ -303,5 +298,5 @@ $(window).on("load", function() {
} }
}); });
} }
initModel("/lib/waifu/", "https://api.fghrsh.net/live2d"); initModel();
}); }