给自己网站加一个可爱的live2d
开始
需要一台计算机,和一双手,就可以开始了(我再说什么?)
不多废话进入主题
我提供了一个较大的模型库
GETHUB
html
我提供了一个 demo
html
配置文件
function loadModel(modelId, modelTexturesId){
localStorage.setItem('modelId', modelId);
if (modelTexturesId === undefined) modelTexturesId = 0;
localStorage.setItem('modelTexturesId', modelTexturesId);
loadlive2d('live2d', 'https://api.test404.club/v3/live2d/get/?id='+modelId+'-'+modelTexturesId, console.log('live2d','模型 '+modelId+'-'+modelTexturesId+' 加载完成'));
}
function loadRandModel(){
var modelId = localStorage.getItem('modelId');
var modelTexturesId = localStorage.getItem('modelTexturesId');
var modelTexturesRandMode = 'rand'; // 可选 'rand'(随机), 'switch'(顺序)
$.ajax({
cache: false,
url: 'https://api.test404.club/v3/live2d/'+modelTexturesRandMode+'_textures/?id='+modelId+'-'+modelTexturesId,
dataType: "json",
success: function (result){
if (result.textures['id'] == 1 && (modelTexturesId == 1 || modelTexturesId == 0)) {
showMessage('我还没有其他衣服呢', 3000, true);
} else {
showMessage('我的新衣服好看嘛', 3000, true);
}
loadModel(modelId, result.textures['id']);
}
});
}
function loadOtherModel(){
var modelId = localStorage.getItem('modelId');
var modelTexturesRandMode = 'switch'; // 可选 'rand'(随机), 'switch'(顺序)
$.ajax({
cache: false,
url: 'https://api.test404.club/v3/live2d/'+modelTexturesRandMode+'/?id='+modelId,
dataType: "json",
success: function (result){
loadModel(result.model['id']);
showMessage(result.model['message'], 3000, true);
}
});
}
地址可修改为本地修改
function loadModel(modelId, modelTexturesId){
localStorage.setItem('modelId', modelId);
if (modelTexturesId === undefined) modelTexturesId = 0;
localStorage.setItem('modelTexturesId', modelTexturesId);
loadlive2d('live2d', ''+modelId+'-'+modelTexturesId, console.log('live2d','模型 '+modelId+'-'+modelTexturesId+' 加载完成'));
}
function loadRandModel(){
var modelId = localStorage.getItem('modelId');
var modelTexturesId = localStorage.getItem('modelTexturesId');
var modelTexturesRandMode = 'rand'; // 可选 'rand'(随机), 'switch'(顺序)
$.ajax({
cache: false,
url: 'live2d/'+modelTexturesRandMode+'_textures/?id='+modelId+'-'+modelTexturesId,
dataType: "json",
success: function (result){
if (result.textures['id'] == 1 && (modelTexturesId == 1 || modelTexturesId == 0)) {
showMessage('我还没有其他衣服呢', 3000, true);
} else {
showMessage('我的新衣服好看嘛', 3000, true);
}
loadModel(modelId, result.textures['id']);
}
});
}
function loadOtherModel(){
var modelId = localStorage.getItem('modelId');
var modelTexturesRandMode = 'switch'; // 可选 'rand'(随机), 'switch'(顺序)
$.ajax({
cache: false,
url: 'live2d/'+modelTexturesRandMode+'/?id='+modelId,
dataType: "json",
success: function (result){
loadModel(result.model['id']);
showMessage(result.model['message'], 3000, true);
}
});
}
hexo
安装
# npm install --save hexo-helper-live2d
在 Hexo
的 _config.yml
文件或主题的 _config.yml
文件中添加配置.
参阅 live2d-widget.js API
我的配置文件
# Live2D
## https://github.com/EYHN/hexo-helper-live2d
## https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
live2d:
enable: true
#enable: false
scriptFrom: local # 默认
pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
pluginModelPath: assets/ # 模型文件相对与插件根目录路径
# scriptFrom: jsdelivr # jsdelivr CDN
# scriptFrom: unpkg # unpkg CDN
# scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
debug: false # 调试, 是否在控制台输出日志
model:
use: live2d-widget-model-hibiki
# use: live2d-widget-model-wanko # npm-module package name
# use: wanko # 博客根目录/live2d_models/ 下的目录名
# use: ./wives/wanko # 相对于博客根目录的路径
# use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
display:
position: right
width: 145
height: 315
mobile:
show: true # 是否在移动设备上显示
scale: 0.5 # 移动设备上的缩放
react:
opacityDefault: 0.7
opacityOnHover: 0.8
接口
我有新模型时将更新本接口(本接口为二开 原作者
[猫与向日葵]())