给你的vuepress站点加个live2d吧

很早以前，个人博客站点用的是hexo构建的，当时因为好玩给自己的站点加了一个live2d挂件，现在倒是将博客迁移到了vuepress上，可是找了半天没有一个vuepress的插件可以让我使用自定义的live2d模型，没办法只能自己封装了一个

如何使用

基于pixi-live2d-display我封装了一个vuepress插件，叫vuepress-plugin-pixi-live2d-display,可以自定义传入model的地址

不过只支持model3之后的模型版本

安装

npm i vuepress-plugin-pixi-live2d-display

  

or

  

yarn add vuepress-plugin-pixi-live2d-display

上传模型

可以上传到第三方平台比如oss, 或者在vuepress的.vuepress/public文件夹下

拿到对应的model3.json文件地址

添加配置

在.vuepress.config.js中添加

module.exports = {

plugins: [

['vuepress-plugin-pixi-live2d-display', { model: "你的模型地址" }]

]

}

就可以使用啦

当然，因为底层依赖包是通过script引入的，本身存在时间差，所以live2d加载一开始会比较慢，也有可能会因为依赖库未加载完成报错

其他还有一些配置参数可以参考组件配置https://www.npmjs.com/package/vuepress-plugin-pixi-live2d-display