之前看到一些大佬们的博客都有只小猫咪或者其它的宠物感觉挺有意思的。在加上我这个模板的PC页面左侧确实有点空【手机端访问是没有的，我关闭了手机端显示，不然妨碍看博客文章！】，网上我也找了很多教程来看，看得我打脑阔。我也就来捣鼓下如何搞个宠物猫。以下是教程一步一步来：

注意：这篇教程是教大家把框架和API都部署在自己的服务器。

一、建立网站和文件夹

1.宝塔面板或者其它面板里面创建个二级域名出来，然后把ssl设置好，php>=7.4就OK。

二、资源准备与下载

1. 下载live2d框架 ：访问 https://github.com/stevenjoezhang/live2d-widget

点击绿色的"Code"按钮，选择"Download ZIP"

解压文件夹中的所有文件复制到你刚刚创建的网站的根目录里面去。

2. 下载live2d_api ：访问 https://github.com/fghrsh/live2d_api

同样下载ZIP文件

解压后，将所有文件复制到 你刚刚解压的框架文件里面自己新建一个api文件名里面去。

3. 下载Live2D模型 ：访问 https://github.com/summerscar/live2dDemo

下载ZIP文件

解压后，将喜欢的模型复制到网站框架/api/model/ 文件夹。

三、修改资源路径

1. 修改dist/autoload.js文件

这是最核心的配置文件，决定了Live2D资源的加载路径。

文件路径 ： 根目录/dist/autoload.js

修改内容 ：找到第9行： const live2d_path = 'https://xxxxx.com/dist/';

将 https://xxxxx.com/ 替换为你的服务器域名

例如：如果你的服务器域名为 https://your-domain.com ，则修改为 const live2d_path = 'https://your-domain.com/dist/';

2.修改cdnPath配置

在 autoload.js 文件中，找到 initWidget 函数中的 cdnPath 配置：

修改内容 ：

找到第59行： cdnPath: 'https://xxxxx.com/api/'

将 https://xxxxx.com/api/ 替换为你的服务器API路径。

例如： cdnPath: 'https://your-domain.com/api/'

3.配置model_list.json

文件路径 ： 根目录/api/model_list.json

这个文件定义了可用的Live2D模型列表，你需要根据自己上传的模型进行修改。

修改内容 ：

打开文件，查看 models 数组

将数组中的模型名称替换为你上传到 model 文件夹中的模型名称

例如，如果你上传了 hijiki 和 shizuku 两个模型，则修改为：

{
    "models": [
        "hijiki",
        "shizuku"
    ],
    "messages": [
        "来自 Hijiki 的问候 ~",
        "来自 Shizuku 的问候 ~"
    ]
}

四、配置Live2D对话内容

文件路径 ：根目录/dist/waifu-tips.json

这个文件定义了Live2D角色在不同情况下显示的对话内容，你可以根据自己的需要修改。

1.修改对话触发条件

文件中的 mouseover 和 click 数组定义了鼠标悬停和点击时的对话：

"mouseover": [
    {
        "selector": ".menu-item-home a",
        "text": ["点击前往首页", "回到首页看看吧"]
    },
    {
        "selector": ".post-title-link",
        "text": ["要看看这篇文章吗？", "这篇文章看起来很有趣呢"]
    }
]

selector ：CSS选择器，指定触发对话的元素。
text ：对话内容数组，随机显示其中一项。

五、配置服务器CORS（最关键！）

1.什么是CORS？ CORS（跨域资源共享）是浏览器的安全策略，阻止从A域名访问B域名的资源。如果你的Live2D资源部署在 a.com，而网站部署在b.com，就需要配置CORS。

2.Nginx服务器配置

宝塔面板中点击你的网站设置按钮，弹窗后找到配置文件：

# 为静态资源添加CORS头
location ~ \.(css|js|json|png|jpg|jpeg|gif|swf|ico|svg)$ {
    # 允许的域名（修改为你的网站域名）
    add_header Access-Control-Allow-Origin "https://xxxx.com" always;
    # 允许的HTTP方法
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS" always;
    # 允许的请求头
    add_header Access-Control-Allow-Headers "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range" always;
    # 暴露的响应头
    add_header Access-Control-Expose-Headers "Content-Length,Content-Range" always;
    # 处理OPTIONS预请求
    if ($request_method = 'OPTIONS') {
        return 204;
    }
}

# 为API请求添加CORS头
location ~ \.php$ {
    # 允许的域名（修改为你的网站域名）
    add_header Access-Control-Allow-Origin "https://xxxx.com" always;
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS" always;
    add_header Access-Control-Allow-Headers "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range" always;
    add_header Access-Control-Expose-Headers "Content-Length,Content-Range" always;
    
    if ($request_method = 'OPTIONS') {
        return 204;
    }
    
    # 原有PHP配置（保持不变）
    include enable-php-74.conf;
}

如果你有多个域名需要访问Live2D资源，可以使用 * 允许所有域名（不推荐）：

add_header Access-Control-Allow-Origin "*" always;

3.Apache服务器配置

如果你使用Apache服务器，找到网站根目录的 .htaccess 文件，添加以下代码：

# 允许的域名（修改为你的网站域名）
Header set Access-Control-Allow-Origin "https://xxx.com"
Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
Header set Access-Control-Allow-Headers "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range"
Header set Access-Control-Expose-Headers "Content-Length,Content-Range"

# 处理OPTIONS请求
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=204,L]

六、在网站中集成Live2D

1.WordPress主题集成
以WordPress为例，将Live2D集成到你的网站中：

1. 登录WordPress后台
2. 进入主题编辑器 ：外观 → 主题编辑器
3. 编辑footer.php文件 ：在右侧选择 footer.php 文件
4. 添加代码 ：在 </body> 标签前添加以下代码：

<!-- Live2D Widget -->
<script src="https://xxxx.com/dist/autoload.js"></script>
<!-- End Live2D Widget -->

七、测试和调试

测试Live2D是否显示
1. 清除浏览器缓存 ：按 Ctrl+Shift+Delete 清除缓存
2. 访问你的网站 ：刷新页面，查看右下角是否出现Live2D角色
3. 使用无痕模式 ：如果不显示，可以尝试使用浏览器的无痕模式测试

查看浏览器控制台错误
按 F12 打开浏览器开发者工具，查看控制台是否有错误信息：

1. 跨域错误 ：检查CORS配置
2. 404错误 ：检查资源路径是否正确
3. 模型加载错误 ：检查模型文件是否完整
4. 语法错误 ：检查代码是否有拼写错误

八、进阶配置

1.修改Live2D角色位置和样式

文件路径 ： live.ygz.ink_DPrAT/dist/waifu.css

你可以修改这个文件来调整Live2D角色的位置、大小和样式：

#waifu {
    bottom: 0;          /* 距离底部的距离 */
    right: 0;           /* 距离右侧的距离 */
    z-index: 10000;     /* 层级，确保显示在最上层 */
}

#live2d {
    width: 300px;       /* 宽度 */
    height: 300px;      /* 高度 */
}

2.添加更多模型

(1). 下载更多模型文件

(2). 将模型文件夹上传到 api/model/ 目录

(3). 修改 api/model_list.json 文件，添加新模型名称

(4). 清除浏览器缓存，刷新页面

3.修改Live2D模型旁边按钮

Live2D按钮的配置主要在 dist/autoload.js 文件中，这是Live2D的核心配置文件。

initWidget({
    waifuPath: live2d_path + 'waifu-tips.json',
    cdnPath: 'https://live.ygz.ink/api/',
    cubism2Path: live2d_path + 'live2d.min.js',
    cubism5Path: 'https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js',
    tools: ['quit'],  // 这里就是按钮配置
    logLevel: 'warn',
    drag: true,
});