Live2d Widget
写在最前
最早的时候看别人的博客很多都有一个可爱的看板娘,然后就找了教程给自己也整了一个。因为找到的教程都是稂莠不齐的,原作者自己说的也略显含糊(其实是我自己看不懂)。总之秉承着一如既往的小白风格。把网上的教程做个整合。
效果
正式步骤
1.首先克隆仓库:
https://github.com/stevenjoezhang/live2d-widget.git
2.把下载的zip
解压放到主题的assets\media
,重命名为live2d-widget
3.找到路径assets\media\live2d-widget\autoload.js
,打开autoload.js
,修改内容:
- const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/";
+ const live2d_path = "/media/live2d-widget/";
此处引用一下参考教程原话:
autoload.js
中的注释的绝对地址指的是,将资源打包放到theme/next/source
中后,以/theme/next/source
为根目录(/)
的绝对路径。
4.引入Font Awesome
将以下代码粘贴到网页HTML代码的 部分.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
5.在footer
引入JS
<script defer src="/media/live2d-widget/autoload.js"></script>
完成
本地化API配置
有读者反映使用张书樵大神的魔改方案时,Pio酱和Tia酱的模型不能像在其他网站看到的那样可以换装。这里主要是因为张书樵大神的魔改方案使用的CDN路径是通过接入的live2d_api仓库的jedelivrCDN链接,根据该项目的model_list.json和指向的model文件夹内的模型的index.json来确定模型资源。而Pio酱和Tia酱的模型装配是配合有后端服务器的API装配方式,依赖于后端生成的textures.cache来获取模型资源。解决方案是将模型装配模式由单模型 多组皮肤转换为同分组 多个模型。
1.懒人配置方案:修改张书樵大神的项目内的~\live2d-widget\autoload.js
,将模型资源由cdnPath
改为apiPath
。
// 加载 waifu.css live2d.min.js waifu-tips.js
if (screen.width >= 768) {
Promise.all([
loadExternalResource(live2d_path + "waifu.css", "css"),
loadExternalResource(live2d_path + "live2d.min.js", "js"),
loadExternalResource(live2d_path + "waifu-tips.js", "js")
]).then(() => {
initWidget({
waifuPath: live2d_path + "waifu-tips.json",
- //apiPath: "https://live2d.fghrsh.net/api/",
- cdnPath: "https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/"
+ apiPath: "https://live2d.fghrsh.net/api/",
+ //cdnPath: "https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/"
});
});
}
这个apiPath就是live2d_widget的原作者@fghrsh搭建的。但是这个API纯粹是用爱发电的产物,随时可能到期,虽然已经喊了三年了。。。详见Live2D 看板娘 API 迁移公告,所以最好还是采用自建api的方式。
模型配置方案更改
上面已经说到过,张书樵大神的魔改方案其实已经实现了本地化API,只是因为模型配置路径不同才导致无法换装的。所以其实只要注意配置模型时,保证每个可以展示的模型都有相应的index.json
并且在model_list.json
里有相应的模型路径就可以了。
这里读者可以直接使用我配置好的本地化项目的路径:
修改张书樵大神的项目内的~\live2d-widget\autoload.js
,修改cdnPath
// 加载 waifu.css live2d.min.js waifu-tips.js
if (screen.width >= 768) {
Promise.all([
loadExternalResource(live2d_path + "waifu.css", "css"),
loadExternalResource(live2d_path + "live2d.min.js", "js"),
loadExternalResource(live2d_path + "waifu-tips.js", "js")
]).then(() => {
initWidget({
waifuPath: live2d_path + "waifu-tips.json",
//apiPath: "https://live2d.fghrsh.net/api/",
- cdnPath: "https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/"
+ cdnPath: "https://npm.elemecdn.com/akilar-live2dapi@latest/"
//因为jsdelivr不支持50MB以上的包的加速,可能报403错误,所以用的vercel的CDN服务。
//可以考虑clone我配置好的live2d_api仓库自己部署到其他更快的cdn服务上。
});
});
}
除了让原有模型换装可用化以为,还顺便添加了亚丝娜、和泉纱雾,血小板、土间埋(干物妹小埋)和香风智乃
的模型哦。
Live2d Widget的更多相关文章
- 我的自定义多交互live2d折腾经历
在@m0d1 大佬的督促(?)下有了这篇复盘.不过因为可能很多地方讲得不全面+理解不够深入,故不打算把这篇当成是教程/指南,那就算是一个指北吧= = (划重点:不是教程!不是教程!不是教程! 省流简介 ...
- StructureMap 代码分析之Widget 之Registry 分析 (1)
说句实话,本人基本上没用过Structuremap,但是这次居然开始看源码了,不得不为自己点个赞.Structuremap有很多的类,其中有一个叫做Widget的概念.那么什么是Widget呢?要明白 ...
- Sencha ExtJS 6 Widget Grid 入门
最近由于业务需要,研究了一下Sencha ExtJS 6 ,虽然UI和性能上据相关资料说都有提升,但是用起来确实不太顺手,而且用Sencha cmd工具进行测试和发布,很多内部细节都是隐藏的,出了问题 ...
- 使用 CoordinatorLayout 出错 inflating class android.support.design.widget.CoordinatorLayout
ava.lang.RuntimeException: Unable to start activity ComponentInfo{com.czr.ianpu/com.czr.ianpu.MainAc ...
- yii2——自定义widget
参考资料:http://www.bsourcecode.com/yiiframework2/how-to-create-custom-widget-in-yii2-0-framework/ 如何使 ...
- Yii2 时间控件之把layDate做成widget
实现效果如下 1.把layDate封装成Yii2的widget,存在 "\common\widgets"目录下,命名为DycLayDate,具体引用查看代码. 2.对应的model ...
- 解决Android中No resource found that matches android:TextAppearance.Material.Widget.Button.Inverse问题
解决Android中No resource found that matches android:TextAppearance.Material.Widget.Button.Inverse问题http ...
- Ext.js细节:在MVC中处理Widget Column,GetCmp和ComponentQuery, Id和ItemId
针对EXT.JS版本的演进,要不断的学习新的最佳实践方法. 比如,在定义组件时,尽管用itemid,而不是id. 在搜索组件时,尽量用ComponentQuery,而不是getCmp. 在MVC中处理 ...
- App Widget简单应用
首先后台进程创建一个PendingIntent对象,其中PendingIntent中包含一个真正的Intent,创建完成后将此PendingIntent对象交给桌面控件所在的进程,当用户点击桌面控件或 ...
随机推荐
- EnvironmentLocationNotFound: Not a conda environment: C:\Program Files\Anaconda3
可参考:https://blog.csdn.net/dscn15848078969/article/details/114743744
- SAP APO-部署选项
SAP SCM Server安装提供SAP APO功能模块的所有功能. 在SAP APO的附加部署模型中,以下组件可用作SAP APO工具的一部分- OTE-在附加部署模型中,无法通过SAP SCM服 ...
- SE37 绕过权限检查 ALINK_CALL_TRANSACTION
- Vue2自定义插件的写法-Vue.use()
最近在用vue2完善一个项目,顺便温习下vue2的基础知识点! 有些知识点恰好没用到时间一长就会淡忘,这样对自己是一种损失. 定义一个对象 对象里可以有任何内容 但install的函数是必不可少的,因 ...
- Linux文本管理命令
touch命令: 创建空文件:touch newfile 也可以使用重定向符(>)创建空文件: > newfile 刷新文件时间: touch 已经存在的文件 cp命令:文件的复制 选项: ...
- ByDesign各版本区别
by zyi
- jvm jni 及 pvm pybind11 大批量数据传输及优化
PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明 本文作为本人csdn blog的主站的备份.(Bl ...
- Pytorch从0开始实现YOLO V3指南 part2——搭建网络结构层
本节翻译自:https://blog.paperspace.com/how-to-implement-a-yolo-v3-object-detector-from-scratch-in-pytorch ...
- 《SVDNet for Pedestrian Retrieval》理解
<SVDNet for Pedestrian Retrieval>理解 Abstract: 这篇文章提出了一个用于检索问题的SVDNet,聚焦于在行人再识别上的应用.我们查看卷积神经网络中 ...
- 5-12 Kafka 消息队列
消息队列(Message Queue) 软件下载 软件下载 MQ_Blog Dubbo远程调用的性能问题 Dubbo调用在微服务项目中普遍存在 这些Dubbo调用都是同步的 "同步" ...