部署源码

下载源码得到一个live2d_api-master文件夹并部署到自己的服务器上。
然后访问作者网站下载live2d-widget-master文件

const live2d_path = ;//live2d-widget-master文件夹路径，以/结尾，使用绝对路径

// 封装异步加载资源的方法
function loadExternalResource(url, type) {
    return new Promise((resolve, reject) => {
        let tag;

        if (type === css) {
            tag = document.createElement(link);
            tag.rel = stylesheet;
            tag.href = url;
        }
        else if (type === js) {
            tag = document.createElement(script);
            tag.src = url;
        }
        if (tag) {
            tag.onload = () => resolve(url);
            tag.onerror = () => reject(url);
            document.head.appendChild(tag);
        }
    });
}

// 加载 waifu.css live2d.min.js waifu-tips.js
if (screen.width >= 768) {
    Promise.all([
        loadExternalResource(live2d_path + waifu.css, css),
        loadExternalResource(live2d_path + live2d.min.js, js),
        loadExternalResource(live2d_path + waifu-tips.js, js)
    ]).then(() => {
        initWidget({
            waifuPath: live2d_path + waifu-tips.json,
            apiPath: ,//live2d_api-master文件夹位置，以/结尾，使用绝对路径
//          cdnPath: https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/
        });
    });
}
// initWidget 第一个参数为 waifu-tips.json 的路径，第二个参数为 API 地址
// API 后端可自行搭建，参考 https://github.com/fghrsh/live2d_api
// 初始化看板娘会自动加载指定目录下的 waifu-tips.json

console.log(`
  く__,.ヘヽ.        /  ,ー､ 〉
           ＼ ', !-─‐-i  /  /´
           ／｀ｰ'       L/／｀ヽ､
         /   ／,   /|   ,   ,       ',
       ｲ   / /-‐/  ｉ  L_ ﾊ ヽ!   i
        ﾚ ﾍ 7ｲ｀ﾄ   ﾚ'ｧ-ﾄ､!ハ|   |
          !,/7 '0'     ´0iソ|    |
          |.从    _     ,,,, / |./    |
          ﾚ'| i＞.､,,__  _,.イ /   .i   |
            ﾚ'| | / k_７_/ﾚ'ヽ,  ﾊ.  |
              | |/i 〈|/   i  ,.ﾍ |  i  |
             .|/ /  ｉ：    ﾍ!    ＼  |
              kヽ>､ﾊ    _,.ﾍ､    /､!
              !'〈//｀Ｔ´', ＼ ｀'7'ｰr'
              ﾚ'ヽL__|___i,___,ンﾚ|ノ
                  ﾄ-,/  |___./
                  'ｰ'    !_,.:
`);

部署模型

下载模型，并上传至服务器中/live2d_api-master/model路径下，同时将模型文件夹中的*.model.json文件名修改为index.json。

修改live2d_api-master文件夹下的model_list.json文件，添加新加入的模型名称。

{
    models: [
        tororo,
        hijiki,//模型名称，以,分隔
    ],
    messages: [
        喵,
        咪,//切换语言，以,分隔
    ]
}

细节修改

模型的样式文件是live2d-widget-master文件夹下的waifu.css。#waifu-toggle为召唤标签，#waifu #live2d为宠物本体，#waifu-tips为对话框，建议将宠物大小调小一点，本站将height，height均调为了220px。

效果一览

白猫效果展示

黑猫效果展示