一、部署

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对应的就是模型，同一套模型的不同皮肤用[]括起来。

三、参考

1. 鸦鸦大佬的文章：养一只博客宠物
2. Bensz大佬的文章：Docker系列 WordPress系列 特效
3. stevenjoezhang的Github
4. fghrsh的Github