这篇文章上次修改于 1252 天前,可能其部分内容已经发生变化,如有疑问可询问作者。
经常访问我博客的朋友们也许会注意到左下角多了一个新伙伴,她是来自《药水制作师》的 Pio~
在很久以前,@Jad 发了一篇关于 Live2D 的 教程。此后我逐渐看到各位大佬的博客增加了这个小挂件,而我一直盼望自己的博客也增加一个。之前一直想找个机会试水一下 Typecho 的插件开发,于是今天就抽时间做出来了。
目前本插件不存在任何依赖的样式和库,所以并没有一些交互功能。但我会在新版本当中逐渐实现,而不需要任何的库。
插件自带了版本更新检测功能,调用了我自己写的一个简易 API,默认会统计你的网站地址。
插件特性
- 插件自带版本更新检测功能
- 可以在插件设置自定义模型配置文件
- 可以在插件目录下放置使用自己的模型
- 不需要任何库,让你的看板娘轻装上阵
- 指定选择器后可和页面链接内容进行交互
- 支持前台更换模型,需要在后台选中多个模型
授权协议
由于原项目使用 GPL 2.0 协议,故本项目也采用相同的开源协议进行授权。
原创不易!如果喜欢本项目,请 Star 它以示对我的支持~
项目地址
Typecho 版(我做的)
- 特点:自带 Pio 模型,支持后台更换其他模型,还可自定义换肤,可放在插件目录下或外部引用
- 依赖:无
- 下载:GitHub 传送门
- 文档:传送门
WordPress 版(喵喵做的)
- 特点:自带 2233 模型,不支持后台更换,但包含一言、文字交互等功能
- 依赖:需要 JQuery 支持
- 下载:GitHub 传送门
Typecho 版(泽泽移植的)【已停止维护】
- 特点:和 WP 版一样,自带 2233 模型,不支持后台更换,但包含一言、文字交互等功能
- 依赖:需要 JQuery 支持
- 下载:传送门
Emlog 版(广树做的)
- 特点:自带 Histoire 模型,不支持后台更换,但可以接入图灵机器人实现互动
- 依赖:需要 JQuery 支持
- 下载:传送门
Z-Blog 版(FGHRSH 做的)
- 特点:自带 Pio、Tia 模型,支持换肤。不支持后台更换,但包含一言、文字交互等功能
- 依赖:需要 JQuery 支持
- 下载:传送门
模型下载
新手教程
疑难解答
参见插件文档的 常见问题 节点。如果你遇到的问题不在文档范围之内,可以在此文评论留言。
描述问题请请确认文档内容,并填写真实的网站链接、报错信息和可供联系的邮箱,否则将有可能不予回复,敬请谅解!
已有 166 条评论
博主,有 Hexo 博客版么
博主,那个模型不显示图像怎么回事呀,加载都正常,mime类型也添加了
@别抢我小鱼干 F12 看看报错信息?是哪个图片显示不出来
博主,为什么我的看板娘会出现cdn.jsdelivr.net加载不了呀
@别抢我小鱼干 项目本身并没有使用这个地址吧,你看看是不是自己修改了什么代码?
博主。这个怎么解决呀,已拦截跨源请求:同源策略禁止读取位于 https://api.fczbl.vip/hitokoto/ 的远程资源。(原因:CORS 请求未能成功)。状态码:(null)
@别抢我小鱼干 看上去原作者的 API 寄了,然后看板娘显示不出来估计是你没配置 MimeType,看你是 IIS 服务器,得改改才行
@Paul 博主,这个具体怎么改呀
@别抢我小鱼干 文档上有说明
大佬,我安装完了发现控制台报错,报错具体如下:Uncaught TypeError: Cannot read properties of undefined (reading '0')at o.r.hitTestSimpleCustom (l2d.js:175:52) at o.hitTestCustom (l2d.js:4247:35) at o.tapEvent (l2d.js:4085:435) at p (l2d.js:745:163) at g (l2d.js:774:41)然后,打开您的博客发现Pio也是报这个错,求解额,只要鼠标一点击就报这个错,一直报
@Luckly 参考文档 https://docs.paul.ren/pio/ 搜索「点击页面或模型,控制台就会出现报错」,另外我也把我的改掉了,没报错了,遗留很久了 😂
大佬!考虑支持 moe3 的模型吗!现在旧版模型已经不太好找了w
@黑川眠也 你可以看看 dev_v3 分支,另有其人已经弄了一个 V3 的使用方法
在 Vue 中该如何使用呢
@inory Vue 2 还是 3 呢?WebPack 打包还是页面直接引用?
@Paul vue2,我在 vue 文件中引入了 pio.js,我看文档是 new Paul_Pio,应该怎样改呢,我对js不是很精通
@inory 在 HTML 下直接使用就可以了喔,这个东西并不需要依赖 Vue
@Paul 我知道 html 可以直接用,但我的项目是 vue 的
@inory Vue 也是这样用的啊== 我还 React 呢,难不成还封装一次?
@Paul 我是这样写的
import Pio from "../../assets/pio";
new Pio({参数}),他报错 _assets_pio__WEBPACK_IMPORTED_MODULE_1___default.a is not a constructor,是我的使用方法不对吗
@inory 这个不是 Vue 组件啊,也不是 WebPack 打包的东西,肯定不行啊。只能当作普通网页的库来用,正确方式是直接修改 public 的 index.html,然后下面引入 script
请问如何添加更换衣服…是个人网站
@histion skin 那里引用多个 config 文件就行,每个 config 里面使用不同的皮肤(所以可以使用这个换人)