接一个 Cubism4 live2d 看板娘：脚本引入、模型路径与气泡文案

Cubism4 的 live2d 看板娘包（嘉然模型）接到站点上，一共三步：传目录、在模板底部引脚本、把模型路径改成自己的。效果是右下角一个可交互的角色，鼠标停在链接上会冒气泡。

上传目录

解压后整个 live2d 文件夹传到主题目录下，保持目录结构不动，模型文件在 live2d/Diana、live2d/Ava 这类子目录里，每个目录对应一个 *.model3.json。

底部引入脚本

把下面片段加到模板的 footer.php，位置在 </body> 之前。路径里的 yourtheme 换成自己的主题目录名，8 个文件缺一不可：TweenLite、live2dcubismcore、pixi、cubism4 是运行时，pio.css、pio.js、pio_sdk4.js、load.js 是这套看板娘的逻辑。注意末尾原包带了 <?php } ?>，直接复制会报语法错误，需要把这一段删掉。

<!--live2d--> 
<script src="/wp-content/themes/yourtheme/live2d/TweenLite.js"></script> 
<script src="/wp-content/themes/yourtheme/live2d/live2dcubismcore.min.js"></script>
<script src="/wp-content/themes/yourtheme/live2d/pixi.min.js"></script> 
<script src="/wp-content/themes/yourtheme/live2d/cubism4.min.js"></script> 
<link href="/wp-content/themes/yourtheme/live2d/pio.css" rel="stylesheet" type="text/css"/> 
<script src="/wp-content/themes/yourtheme/live2d/pio.js"></script> 
<script src="/wp-content/themes/yourtheme/live2d/pio_sdk4.js"></script> 
<script src="/wp-content/themes/yourtheme/live2d/load.js"></script><?php } ?>

改模型路径

再打开 live2d/load.js，第 40、41 行是两个模型的 json 地址，同样改成实际的上传路径，这一步不改就是白屏。

"/wp-content/themes/yourtheme/live2d/Diana/Diana.model3.json",
"/wp-content/themes/yourtheme/live2d/Ava/Ava.model3.json",

气泡文案的判定

用一段时间会发现一个细节：鼠标移到任何元素上，气泡都会拼出“你想要了解更多”xxxxxx”吗？”，即使 innerText 是空字符串，也会显示成引号里空着的一串。改法是在 live2d/pio.js 里加一层判断，只在非空时冒泡，顺便去掉前后缀文字。

//增加判定，当移动到链接上，innerText不为空的时候才冒泡，并且删掉了前缀和后缀
 if(this.innerText!="")
{ //modules.render("想了解一下 %t 吗？".replace(/%t/, "“" + this.innerText + "”") 
modules.render("%t".replace(/%t/, this.innerText )); }

右侧按钮

看板娘右侧 5 个按键里，第 4 个用来切换暗黑模式，这套模型对它的支持不好，容易点不出效果。想只删这一个，在 pio.css 里搜 .pio-action .pio-night 加上 display: none;；想整排都去掉，加 .pio-action{display:none !important;}。