左下角引入一个博客宠物。
一、部署
1.1 下载脚本
下载 stevenjoezhang 的 Github 解压后将 live2d-widget-master 放到服务器的 wordpress 目录下
下载 fghrsh 的 Github 解压后也同样将 live2d_api-master 放到服务器的 wordpress 目录下
[root@dameng wordpress]# pwd /home/wwwroot/wordpress [root@dameng wordpress]# ll live2d* live2d_api-master: total 56 drwxr-xr-x 2 www www 4096 May 19 2020 add drwxr-xr-x 2 www www 4096 May 19 2020 get -rw-r--r-- 1 www www 1063 May 19 2020 LICENSE drwxr-xr-x 8 www www 4096 Nov 22 16:53 model -rw-r--r-- 1 www www 1410 Nov 24 15:14 model_list.json -rw-r--r-- 1 www www 1653 Nov 24 15:03 model_list.json_bak -rw-r--r-- 1 www www 1703 Nov 24 14:57 model_list.json_cat drwxr-xr-x 2 www www 4096 May 19 2020 rand drwxr-xr-x 2 www www 4096 May 19 2020 rand_textures -rw-r--r-- 1 www www 4415 May 19 2020 README.md drwxr-xr-x 2 www www 4096 May 19 2020 switch drwxr-xr-x 2 www www 4096 May 19 2020 switch_textures drwxr-xr-x 2 www www 4096 May 19 2020 tools live2d-widget-master: total 264 drwxr-xr-x 2 www www 4096 Feb 26 2024 assets -rw-r--r-- 1 www www 2175 Nov 24 14:39 autoload.js drwxr-xr-x 2 www www 4096 Feb 26 2024 demo -rw-r--r-- 1 www www 35149 Feb 26 2024 LICENSE -rwxr-xr-x 1 www www 151453 Feb 26 2024 live2d.min.js -rw-r--r-- 1 www www 919 Feb 26 2024 package.json -rw-r--r-- 1 www www 11170 Feb 26 2024 README.en.md -rw-r--r-- 1 www www 10235 Feb 26 2024 README.md -rw-r--r-- 1 www www 881 Feb 26 2024 rollup.config.js drwxr-xr-x 2 www www 4096 Feb 26 2024 src -rwxr-xr-x 1 www www 4937 Feb 26 2024 waifu.css -rw-r--r-- 1 www www 11812 Feb 26 2024 waifu-tips.js -rwxr-xr-x 1 www www 11548 Feb 26 2024 waifu-tips.json
注意
最好将目录都修改用户及组属主为 www
chown -R www:www /home/wwwroot/wordpress/live2d*
1.2 修改 autoload.js 脚本
将 live2d_path 和 apiPath 两个路径修改成服务器中对应路径【注意路径是相对于 wordpress 而言】
const live2d_path = "/live2d-widget-master/" apiPath: "/live2d_api-master/"
1.3 引入脚本
方法一：PHP 文件引入
同样在 WordPress 根目录下的 theme-modify 文件夹下，创建文件 live2dgirl.php，编辑如下代码：
<script src="/live2d-widget-master/autoload.js"></script>
再在主题代码编辑器的 header.php 文件中引入：加在【文件末尾】即可
<!-- Live2D GIRL 开始 --> <?php require('./theme-modify/live2dgirl.php'); ?> <!-- Live2D GIRL 结束 -->
方法二：直接引入
或者可以直接将 <script src="/live2d-widget-master/autoload.js"></script> 添加到 Argon 主题设置的脚本部分，添加到页头脚本或者页尾脚本都可以。
大功告成，就可以在页面看到自己的博客宠物了。
二、模型的增加与删减
完成上面的工作之后，就可以调用自己喜欢的模型了。可以从 summerscar 的 Github 里下载。
下载完模型后，挑几个自己喜欢的，把它们放到一个文件夹里，名字随意取，然后把文件夹上传到服务器 API 目录的 model 文件夹下，我的是这个目录 /home/wwwroot/wordpress/live2d_api-master/model。需要特别注意的是每个模型文件夹的 xxxx.model.json 要重命名为 index.json，其他什么都不用改。最后，修改 model_list.json 文件，把新的模型索引进去。
{ "models": [ "Potion-Maker/Pio", "Potion-Maker/Tia", [ "ShizukuTalk/shizuku-48", "ShizukuTalk/shizuku-pajama" ], [ "HyperdimensionNeptunia/neptune_classic", "HyperdimensionNeptunia/nepnep", "HyperdimensionNeptunia/neptune_santa", "HyperdimensionNeptunia/nepmaid", "HyperdimensionNeptunia/nepswim", "HyperdimensionNeptunia/noir_classic", "HyperdimensionNeptunia/noir", "HyperdimensionNeptunia/noir_santa", "HyperdimensionNeptunia/noireswim", "HyperdimensionNeptunia/blanc_classic", "HyperdimensionNeptunia/blanc_normal", "HyperdimensionNeptunia/blanc_swimwear", "HyperdimensionNeptunia/vert_classic", "HyperdimensionNeptunia/vert_normal", "HyperdimensionNeptunia/vert_swimwear", "HyperdimensionNeptunia/nepgear", "HyperdimensionNeptunia/nepgear_extra", "HyperdimensionNeptunia/nepgearswim", "HyperdimensionNeptunia/histoire", "HyperdimensionNeptunia/histoirenohover" ] ], "messages": [ "来自 Potion Maker 的 Pio 酱 ~", "来自 Potion Maker 的 Tia 酱 ~", "Shizuku Talk ！这里是 Shizuku ~", "Nep! Nep! 超次元游戏：海王星 系列" ] }
文件中 models 对应的就是模型，同一套模型的不同皮肤用 [] 括起来。
