自建博客，一直想在页面上弄个“人格”，比如“伪春菜”。后来，朋友给我分享了领一只动态卡哇伊的小猫咪到你的网站吧 live2d入门这篇文章。觉得挺合适，一白一黑两只猫模型，刚好LoveIt主题也是黑白。更何况，我还是个铲屎官。

整合live2DModel

思路

看了全球首家大型线上吸猫网站这个示例后，发现其实很简单：

  1. 引入live2d的js资源
  2. 设置live2d的配置参数，放入live2d模型的路径
  3. 调用L2Dwidget的init方法，传入配置参数

整合

  1. 将live2DModel资源加入版本库（含live2d以及模型）
    git submodule add https://gitee.com/tczmh/live2DModel.git static/js/lib/live2DModel
  2. 修改layouts/partials/scripts.html模板，引入l2dwidget.min.js
    复制主题内（如themes/LoveIt）的layouts/partials/scripts.html，放到layouts/partials/scripts.html，添加以下代码
    {{- /* l2dwidget https://gitee.com/tczmh/live2DModel */ -}}
{{- $l2dwidget := "" -}}
{{- if eq (getenv "HUGO_ENV") "production" | and .Site.Params.cdn.l2dwidget_js -}}
    {{- $l2dwidget = .Site.Params.cdn.l2dwidget_js -}}
{{- else -}}
    {{- $l2dwidget = printf "<script src=\"%s\"></script>" "js/lib/live2DModel/l2dwidget.min.js" | relURL -}}
{{- end -}}
{{- $l2dwidget | safeHTML -}}
  3. 修改assets/js/blog.js，加入模型渲染逻辑。注意配合主题风格切换猫的模型
    _Blog.l2dwidget = function() {
    if (window.L2Dwidget) {
        let lightPath = 'js/lib/live2DModel/tororo/assets/tororo.model.json';
        let darkPath = 'js/lib/live2DModel/hijiki/assets/hijiki.model.json';

        let config = {
            model: {
                jsonPath: '',       // xxx.model.json 的路径
            },
            display: {
                superSample: 1,     // 超采样等级
                width: 150,         // canvas的宽度
                height: 200,        // canvas的高度
                position: 'left',   // 显示位置：左或右
                hOffset: 0,         // canvas水平偏移
                vOffset: 0,         // canvas垂直偏移
            },
            mobile: {
                show: true,         // 是否在移动设备上显示
                scale: 1,           // 移动设备上的缩放
                motion: true,       // 移动设备是否开启重力感应
            },
            react: {
                opacityDefault: 1,  // 默认透明度
                opacityOnHover: 1,  // 鼠标移上透明度
            },
        };

        this.show = function() {
            config.model.jsonPath = isDark ? lightPath : darkPath;
            L2Dwidget.init(config);
        }

        $('.theme-switch').on('click', () => {
            this.show();
        });

        this.show();
    }
}
    然后在$(document).ready()回调的函数体最后加入_Blog.l2dwidget();

参考文章