Fluid添加Live2d看板娘

添加看板娘

使用 live2d-widget 插件，添加 Live2D 看板娘

引入项目

把 live2d-widget 项目clone到本地博客目录的source目录下。

放在source目录下的所有开头不是_的文件，在hexo generate的时候，都会被拷贝到public文件夹下，且 Hexo 默认会渲染所有的 HTML 和 Markdown 文件。

配置文件_config.yml中，配置：

skip_render: live2d-widget/*

这样，hexo 就不会渲染live2d-widget目录下的所有文件。

项目autoload.js配置

这一步主要是配置加载资源的路径

配置live2d_path

修改live2d-widget/autoload.js中的常量live2d_path为live2d-widget这一目录的 URL：

// 把
const live2d_path = "https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";
// 改为
const live2d_path = "/live2d-widget/";

autoload.js中的注释的绝对路径指的是，将资源打包放到[Blogroot]/source/中后，以[Blogroot]/source/为根目录（/）的绝对路径。

"/live2d-widget/"后面的斜杠一定要加上，不然就会拼接出错误的请求路径。例如请求live2d-widget目录下的live2d.min.js时的请求路径 http://localhost:4000/live2d-widgetlive2d.min.js

验证

hexo clean
hexo g
hexo s

能够通过浏览器访问到live2d.min.js就可以了。

配置模型资源

initWidget({
    waifuPath: live2d_path + "waifu-tips.json",
    //apiPath: "https://live2d.fghrsh.net/api/",
    // cdnPath: "https://fastly.jsdelivr.net/gh/fghrsh/live2d_api/",  // 原作者api
    cdnPath: "https://npm.elemecdn.com/akilar-live2dapi@latest/",  // Akilar站长api
    // https://fastly.jsdelivr.net/gh/fghrsh/live2d_api/
    tools: ["hitokoto", "asteroids", "switch-model", "switch-texture", "photo", "info", "quit"]
		});

apiPath 和 cdnPath 两个参数设置其中一项即可。apiPath 是后端 API 的 URL，可以自行搭建，并增加模型，可以参考 live2d_api。而 cdnPath 则是通过 jsDelivr 这样的 CDN 服务加载资源，更加稳定。

注入autoload.js脚本

通过注入代码的方式，为博客网页无侵入式地增加autoload.js脚本。

博客目录下scripts文件夹（如不存在则创建），在里面创建任意名称的 js 文件，在文件中写入如下内容：

Github.io 站点

hexo.extend.filter.register('theme_inject', function(injects) {
    // Github Page
    injects.head.raw('default', '<script src="https://boxpiggy.github.io/live2d-widget/autoload.js"></script>');
});

• head表示在标签中的结尾注入；
• raw方法表示注入的是原生代码，第一个参数是键名，第二个参数则是一句原生的 HTML 语句。

完成以上步骤后就可以提交了。

模型调整

修改waifu.css，看板娘放到最上层（默认为1，修改为999就是最顶层，值越大所在的图层就越高）：

z-index: 999;

效果

如左下角。

---

参考

博客live2d看板娘配置——fluid主题（提到 fluid 主题的注入代码方式添加脚本）

akilar - Live2d Widget（解释详细）

fluid添加看板娘（提到修改模型）