左下角引入一个博客宠物。
一、部署
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对应的就是模型，同一套模型的不同皮肤用[]括起来。
