自定义live2d | 龙年大吉

主题自带的live2d，也就是左下角人物，使用的是下面这个项目

live2d-widget

https://github.com/stevenjoezhang/live2d-widget

如果不把这个项目放入服务器上，然后引用js的话，会导致live2d人物图片显示不出来，可能是受到jsdelivr的限制。如果你有服务器的话不妨可以折腾一下

如果上面主题自带的live2d显示不出来的话，可以使用我下面的方法.

首先需要在配置文件里将主题自带的live2d给关闭:

1
2
3

# live-2d(左下角动画人物)
live2d:
  on: false # 控制显示或者隐藏

首先在source文件夹(根目录下的source文件夹)下创建live2d/index.js文件，写入以下内容:

L2Dwidget.init({
  model: {
    jsonPath:
      "https://unpkg.com/live2d-widget-model-unitychan@1.0.5/assets/unitychan.model.json",
    scale: 1,
  },
  display: {
    position: "left", //模型的表现位置
    width: 150, //模型的宽度
    height: 300, //模型的高度
    hOffset: -50, // 向左向右偏移
    vOffset: -150, // 向上向下偏移, 根据情况可以自己调整数值
  },
  mobile: {
    show: false, // 手机端不显示
    scale: 0.5,
  },
  react: {
    opacityDefault: 1, //模型默认透明度
    opacityOnHover: 0.2,
  },
});

然后找到主题的配置文件_config.yml，找到import, 将两个js引进去：

import:
  link:
    # - <link href="xxx.css"  rel="stylesheet">
  script: 
    - <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
    - <script src="/live2d/index.js"></script>

然后就能显示左下角的live2d了，这个方法是看的这个文章：

live2d

https://blog.csdn.net/linshuhe1/article/details/94903871

可以阅读这个文章，更改模型。
最后效果如图:

当然，还有网上说的hexo-helper-live2d这个插件，你们也可以试试，也是加载live2d的。可以百度这个插件，然后配置。