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

整合live2DModel

思路

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

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

整合

  1. 将live2DModel资源加入版本库(含live2d以及模型)
    1
    
    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,添加以下代码
    1
    2
    3
    4
    5
    6
    7
    8
    
    {{- /* 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,加入模型渲染逻辑。注意配合主题风格切换猫的模型
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    
    _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();

参考文章