给 Typecho 博客添加 Live 2D 看板娘的笔记

1. 给 Typecho 博客安装 live 2D 插件

茶这里使用的是 Paugram dalao 制作的 Pio 插件。
具体安装就不细述啦。

插件项目 Gayhub 地址：
https://github.com/Dreamer-Paul/Pio
插件项目帮助文档 & 常见问题：
https://docs.paul.ren/pio
插件项目开发故事：
https://paugram.com/coding/add-poster-girl-with-plugin.html

下面两段是搬运的作者写的文档【捂脸】

初始安装

1. 从 GitHub 上获取本项目。
2. 将插件压缩包上传到你的网站。Typecho 插件的默认存放路径在 /usr/plugins
3. 解压插件的压缩包文件，默认得到一个文件夹，应该为 Pio-master
4. 将文件夹更名为 Pio 以确保插件可以正常工作
5. 登录你的 Typecho 后台，在导航栏找到 控制台 > 插件 > Pio > 启用

指导视频

你是 Typecho 新手吗？不妨先观看一下本视频后再进行操作吧！访问 Bilibili 观看 将支持展示 CC 字幕！

安装完成后默认看板娘没载出来？

多半是主题模板所致，至少我的是酱紫。解决方法就是在后台更改主题文件的 footer.php，
在其末尾加上一句 <?php $this -> footer(); ?>

2. 添加其他看板娘模型

这里的模型均位于 插件目录/models 文件夹，并且所有模型的配置文件名必须为 model.json 才可以正常使用。

所以下好的模型直接丢进 插件目录/models 文件夹就完事啦，可以直接在 Pio 插件的后台进行模型更换。

Pio 插件作者开设的模型下载站，可以在里面找找
https://mx.paul.ren/

3. 调教你的看板娘（大雾）

相信在很多情况下，你的看板娘总是由于本身模型宽度空余过大，导致TA不会贴边站，而是如上图一样挡住一部分的页面排版。

而通过在 Pio 插件后台修改宽度时，有些看板娘又格外地傲娇，修改宽度并不会直接缩短这类看板娘的模型宽度空余使其靠边站，而是会整体渲染变小。

而茶经研究发现，在 Pio 插件按照原长宽尺寸设定并渲染看板娘后，再通过 F12 键审查元素并改变其长宽后，看板娘居然服帖地不改变大小而是成功贴边站了，此时缩短宽度就可以使这类看板娘向右平移。

运用 js 实现对看板娘的渲染后更改其长宽

如何渲染后更改其长宽呢？经过一番资料的搜寻，茶终于找到了用 js 解决的方案。

JavaScript 控制（改变）canvas(画布)的大小
https://blog.csdn.net/qq_29594393/article/details/52849339

感谢上面这只 dalao 的文章让我有了法子调教TA。

Pio 插件所显示的 Live 2D 模型是建立在一个 canvas 里的。

canvas 是 HTML5 的“画布”标签，而 canvas 的width和 height 实际上不是 style 的属性，而是 attribute 属性。

所以我们就可以通过更改 canvas 的 attribute 属性来实现更改其长宽的目的。

于是就有了下面这串 js

<?php $this -> footer(); ?>

<script type="text/javascript">
var pio=document.getElementById("pio")

var width=280;
var height=550;

pio.setAttribute("width",width)
pio.setAttribute("height",height)

</script>

上面整一段 js 我放在了主题文件的footer.php 的最末尾，因为我想那里大概也应是模型渲染之后了吧XD。

如图，经过一番折腾，看板娘也终于服帖地贴边站不再挡东西啦。

注意，宽高值可以先通过 F12 键审查元素并改变其长宽，调试好后再写进上方的 js 里诶！

有些看板娘更改宽高会比例失调比如画面压缩怎么破？

那当然上面的 js 把他最后两句注释掉就完事啦因为没有用啦，你也可以留着它，对于这类比例于尺寸正相关的看板娘，在你算好对应正确比例的宽高尺寸之后，可以直接在 js 里更改输入正确比例宽高值，而不用去经常崩溃或者加载莫名巨久的 Pio 插件后台再更改啦。

当然我现在的看板娘没这个特性所以我就不研究下去惹。

茶觉得设置为 静态 模式下体验最佳

经过一番测（ba）试（wan），还是觉得看板娘在 Pio 插件的静态模式下体验最佳。

为什么捏？

因为首先看板娘可拖动主要是为了挡东西时可以手动地移开它，而这个问题经上面的折腾后已经解决了，现在 TA 已经不太会再挡东西了。

其次，为什么不选择固定模式，固定模式不是可以有按钮的交互么？因为插件的不完善，其互动仅限于文字层面和博客功能层面的互动，而不会触发 Live 2D 模型本身的 motion 动作，所以我暂时还是干脆不开启按钮交互了。

就算是设置为 静态模式，看板娘在 PC 端的页面上依旧会有文字问候语，但是每访问一个页面模型都会来一句，怎么解决吖？

茶的办法是给服务器上 pio 插件中路径为 \usr\plugins\Pio\static\pio.js 的第53行附近加上一段判断此时用户访问的 url 是否为首页。

var testurl = window.location.href;
if(testurl === "http://matce.cn/i/"){
    clearTimeout(this.t);
    this.t = setTimeout(function () {
        dialog.classList.remove("active");
    }, 3000);
}
else{
    dialog.classList.remove("active");
}

酱紫就可以让看板娘只能在首页说话 hhh