mirror of
https://github.com/caojiezi2003/live2d-widget.git
synced 2024-11-10 04:49:47 +00:00
readme
This commit is contained in:
parent
9e20fb4d5a
commit
14c2c04cf0
33
README.md
Normal file
33
README.md
Normal 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
25
autoload.js
Normal 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
|
@ -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) {
|
||||
var tokenReg = /(\\)?\{([^\{\}\\]+)(\\)?\}/g,
|
||||
strFlag = true,
|
||||
@ -26,7 +21,7 @@ String.prototype.render = function(context) {
|
||||
return strFlag ? result : "";
|
||||
}
|
||||
|
||||
$(window).on("load", function() {
|
||||
function initWidget(waifuPath, apiPath) {
|
||||
if (sessionStorage.getItem("waifu-display") == "none") return;
|
||||
sessionStorage.removeItem("waifu-text");
|
||||
$("body").append('<div class="waifu">\
|
||||
@ -210,7 +205,7 @@ $(window).on("load", function() {
|
||||
}
|
||||
}
|
||||
|
||||
function initModel(waifuPath, apiPath) {
|
||||
function initModel() {
|
||||
if (waifuPath === undefined) waifuPath = "";
|
||||
if (apiPath === undefined) apiPath = "";
|
||||
apiURL = apiPath;
|
||||
@ -303,5 +298,5 @@ $(window).on("load", function() {
|
||||
}
|
||||
});
|
||||
}
|
||||
initModel("/lib/waifu/", "https://api.fghrsh.net/live2d");
|
||||
});
|
||||
initModel();
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user