把可爱的 Pio 捉到博客上吧!

熊猫小A 9 个月前 •  偶尔Geek 7009 •  28

==野生的 Pio 相当少见,但是一只鲜活的 Pio 可以为我们提供一整天的能量。注意不要发出任何声音,跟着我悄悄地从后面接近她……==

把可爱的 Pio(就是现在左下角那只)捉到博客上吧!

下载地址:AlanDecode/Live2D-Typecho-Plugin

好几个月前,@Jad 大佬写了一篇文章 ,然后一众大佬都开始把可爱的看板娘捉到自己的博客上,一时间出现 Pio 血洗个人博客的壮观景象。

然后有几位大佬把 Live2D 封装成了适用于各个平台的插件,目前我知道的有:

@保罗 写的 Typecho 适用的插件 项目介绍 项目地址

@DaiDR 写的 WordPress 版 项目介绍

@小白-白 写的 WordPress 版,模型是 2233 项目介绍

@qqdie写的 2233 Typecho 插件也很不错 项目介绍

后来我参照 @后宫学长 的介绍文章与上述的文章自己也试了试,都是直接在网页代码上改的,有一点点不方便,特别是主题需要更新什么的,就又要来一遍。虽说已经有了 Typecho 的插件版,不该重复造轮子,但由于已有的 Typecho 插件没有交互的功能,而且最近我突然对写 Typecho 插件有点感兴趣,所以决定自己写一个,于是参照了上面几位大佬的代码鼓捣了一个出来。

请输入图片描述

更新

  • 现在在移动设备上不再显示
  • 船新的版本,用标签代替了按钮。这个创意来自 Mashiro
  • 针对透明主题增加了使消息提示框和工具按钮列表背景透明的方法,更炫酷一些。
  • 新的按钮,另外图标换成了 Font Awesome,可以在插件设置页面里面选择要不要引入。
  • 2018-05-27:更改了随机换装的实现方式,之前的实在是蠢。现在要添加更多的衣服的话把衣服图片扔在 插件目录/model/textures 下就好。这个功能参照了大佬的文章:来创建一个私有的随机图服务吧! 果然代码基本靠抄

功能

  • 返回主页按钮
  • 随机换装按钮
  • 一言(Hitokoto)按钮
  • 照相按钮
  • 隐藏按钮
  • 大小自适应。在移动设备上不显示。
  • 鼠标悬浮提示。加入更多的提示语句可以自己修改 message.json

食用方法

  • 下载或者 Clone 上面的 Repo,解压后把文件夹改名为 Live2D ,扔到 /usr/plugins/目录下。
  • 到插件配置面板里设置你的主页链接和模型相关的参数。
  • 这样一只可爱的 Pio 就会出现在博客的左下角。
  • 默认的消息提示框和按钮列表是有背景色的,如果不想要的话在解压后的文件夹里使用 git checkout transparent 切换到新分支~这样背景就透明了,在 handsome 透明模式上更好看。

注意事项

  • 使用了 JQuery 库,如果你的站没有引入或者引入的是别的图标库可以在插件设置页面里面选择引入。
  • 使用前记得在插件设置面板里把该填的填了。
  • 插件里带了 3 套衣服,更多的模型……应该还蛮好找的吧……
  • PJAX 里鼠标悬浮提示可能失效,需要在主题回调函数中添加 initTips();
  • 在 Mirages 主题出现遮挡侧边栏的情况,可以在主题设置中添加如下自定义 CSS:
.display-nav > #l2d-tools-panel{
    display:none;
}
.display-nav > #live2d{
    transition: .5s ease all;
    transform: translateX(17.5rem);
}

本项目参照了:

https://github.com/journey-ad/live2d_src

https://github.com/galnetwen/Live2D

https://github.com/Dreamer-Paul/Pio

https://github.com/galnetwen/Random-Image

参考的文章有:

感谢各位大佬!

Tags:博客githubpiolive2d插件typecho
上一篇
打赏
下一篇

添加新评论

已有 28 条评论

 cc 4 星期前 • |

大佬 左边的按键怎么隐藏呢

 熊猫小A 4 星期前 • |
@cc

你可以自己写一段 CSS 隐藏 #l2d-tools-panel{display:none}

 cc 4 星期前 • |
@熊猫小A

是在live2d.min.css 里面加上 #l2d-tools-panel{display:none} 嘛

 熊猫小A 4 星期前 • |
@cc

是的

 兔子裹煎蛋卷 1 个月前 • |

问一下大佬,怎么在手机上也能够加载pio~小可爱呀

 熊猫小A 1 个月前 • |
@兔子裹煎蛋卷

新版本已经默认不加载了,你可以试试老版本:链接:https://pan.baidu.com/s/14wjBgmjaeK9ZVnBjZzVlug
提取码:o4w9

 兔子裹煎蛋卷 1 个月前 • |
@熊猫小A

感谢

 林海草原 1 个月前 • |

哟呵,主题更新了?还是自己私人用的版本?怎么有种bootstrap的风格?

 熊猫小A 1 个月前 • |
@林海草原

噗 这是个新写的,准备自用了~
觉得 Bootstrap 有点意思,就边看文档边写,顺便就弄了一个出来哈哈

 liucan 2 个月前 • |

大佬问下75行

中js的引用换到对象储存可以不,我改了路径无法加载

 熊猫小A 2 个月前 • |
@liucan

如果从对象存储加载的话,可能会有跨域问题……所以不太好搞

 liucan 2 个月前 • |

你邮箱@我下,我截图给你看