vuepress-plugin-live2d-cc v0.0.3

vuepress-plugin-live2d-cc

简介

vuepress-plugin-live2d-cc 是一个基于 Vuepress 2.x 的插件，它可以帮助你集成Live2D看板娘。

安装

npm install -D vuepress-plugin-live2d-cc
yarn add -D vuepress-plugin-live2d-cc
pnpm add -D vuepress-plugin-live2d-cc

用法

.vuepress/config.js文件中使用插件

import live2dPlugin from "vuepress-plugin-live2d-cc";

// 默认参数写法
plugins: [
  live2dPlugin()
],

// 自带入参写法
plugins: [
  live2dPlugin({
    enable: true,
    model: {
      url: [
        '/live2d/live2d-widget-model-Pio/assets/0.json',
        '/live2d/live2d-widget-model-Pio/assets/1.json',
        '/live2d/live2d-widget-model-Pio/assets/2.json',
        '/live2d/live2d-widget-model-Pio/assets/3.json',
        'https://raw.githubusercontent.com/iCharlesZ/vscode-live2d-models/master/model-library/hibiki/hibiki.model.json',
        // 可以用本地模型或者网络模型（本地模型请放置到 .vuepress/public/ 目录下）
      ],
    },
    display: {
      position: 'right',
      width: '135px',
      height: '170px',
      xOffset: '50px',
      yOffset: '40px'
    },
    mobile: {
      show: true
    },
    react: {
      opacity: 1.0
    }
  })
],

模型

使用了 vscode-live2d-models 中的模型，把 model.url[] 改为指定的模型地址即可。

切换模型

点击模型中央，可以切换模型。

感谢

vuepress-plugin-live2d-cc 参考了 vuepress-plugin-helper-live2d