joeybling / vuepress-plugin-helper-live2d

VuePress集成Live2D看板娘. Live2D plugin for VuePress.

vuepress-plugin-helper-live2d

 _          _                      _ _           ____     _
| |__   ___| |_ __   ___ _ __     | (_)_   _____|___ \ __| |
| '_ \ / _ \ | '_ \ / _ \ '__|____| | \ \ / / _ \ __) / _` |
| | | |  __/ | |_) |  __/ | |_____| | |\ V /  __// __/ (_| |
|_| |_|\___|_| .__/ \___|_|       |_|_| \_/ \___|_____\__,_|
             |_|

---

欢迎使用和Star支持，如使用过程中碰到问题，可以提出Issue，我会尽力完善

介绍

    VuePress集成Live2D看板娘 Live2D plugin for VuePress.

• 功能还很少，欢迎各位给我提意见和建议~
• vuepress-plugin-helper-live2d 是为 VuePress 1.0.0+制作的插件。

线上预览

预览 ➡️ https://zhousiwei.gitee.io/ibooks

推荐一款VuePress主题

一款简洁优雅的VuePress主题 ➡️ https://github.com/JoeyBling/vuepress-theme-yilia-plus

效果截图

安装

yarn add vuepress-plugin-helper-live2d
# or
npm install vuepress-plugin-helper-live2d --save

---

开始使用

引入该插件

在配置文件中引入 vuepress-plugin-helper-live2d

查看 官方文档。

module.exports = {
  plugins: [
    'vuepress-plugin-helper-live2d',
  ],
}

插件配置

module.exports = {
  plugins: [
    [
      'vuepress-plugin-helper-live2d', {
        // 是否开启控制台日志打印(default: false)
        log: false,
        live2d: {
          // 是否启用(关闭请设置为false)(default: true)
          enable: true,
          // 模型名称(default: hibiki)>>>取值请参考：
          // https://github.com/JoeyBling/hexo-theme-yilia-plus/wiki/live2d%E6%A8%A1%E5%9E%8B%E5%8C%85%E5%B1%95%E7%A4%BA
          model: 'hibiki',
          display: {
            position: "right", // 显示位置：left/right(default: 'right')
            width: 135, // 模型的长度(default: 135)
            height: 300, // 模型的高度(default: 300)
            hOffset: 65, //  水平偏移(default: 65)
            vOffset: 0, //  垂直偏移(default: 0)
          },
          mobile: {
            show: false // 是否在移动设备上显示(default: false)
          },
          react: {
            opacity: 0.8 // 模型透明度(default: 0.8)
          }
        }
      }
    ]
  ]
}

捐赠

    如果感觉对您有帮助，请作者喝杯咖啡吧，请注明您的名字或者昵称，方便作者感谢o(￣︶￣)o

微信	支付宝

关于我

• 个人博客
• 技术笔记
• GitHub
• 码云
• 简书
• CSDN
• 知乎
• 微博
• 主要涉及技术：Java后端开发、聚合支付、公众号开发、开源爱好者、Linux

LICENSE

vuepress-plugin-helper-live2d's Issues

适配vuepress2.0

Feature Request

hi! 看板娘后续会适配vuepress2.0.0吗

🙋Others

可以增加更多的模型吗？

模型增加

https://github.com/iCharlesZ/vscode-live2d-models

这里的模型有很多，看看能不能新增？

打包速度优化

不管换不换角色模型，打包出来的 dist / live2d / shizuku / assets / snd 里总会有15个mp3文件
换了 hibiki 这个角色，又多出 dist / live2d / hibiki / assets / snd 里的5个mp3文件
这么多mp3文件都在dist文件里要上传

关键是角色点了也不互动，要不把打包结果优化下去掉mp3文件？或者给角色添加互动音效？

构建后的项目体积过于庞大

构建工具会将所有的live2d模型全部打包，但实际上只需要打包config.js中指定的live2d模型即可，是否在后续的版本中进行优化？

vuepress无法使用该插件

❓问题

使用npm或yarn安装该插件到项目中编译会出现错误
warning An error was encountered in plugin "vuepress-plugin-helper-live2d"
创建一个干净的vuepress项目也是如此

在config.js中的配置如下

plugins: [
    [
      'vuepress-plugin-helper-live2d',
      {
        live2d: {
          enable: true,
          model: 'hibiki',
          display: {
            position: "right",
            width: 135,
            height: 300,
            hOffset: 65,
            vOffset: 0,
          },
          mobile: {
            show: false
          },
          react: {
            opacity: 0.8
          }
        }
      }
    ]
  ]

🐥环境 & 设置

Node.js & npm version

node 11.11.0
npm 6.7.0
yarn 1.22.4