从今天起这里多了一只白色，高冷的看门喵。视线会一直跟着你的鼠标，鼠标靠近它就可以撸了！

目前只设定让它在PC出现，在移动端显示有些突兀。

养猫攻略

喵喵基于 live2d 绘图技术，在前端使用canvas绘制。

打包源码

# 拉取源码
$ git clone https://github.com/xiazeyu/live2d-widget.js.git

# 下载依赖
$ yarn

# 打包源码
$ npm run build:prod

lib文件夹里就是打包成果。

在hugo中使用

  • 将打包后的lib路径中的 L2Dwidget.min.js 文件放到hugo根目录的 static/js 目录中。

  • 在这儿下载喜欢的 live2d 模型放到hugo根目录的 static/live2d_models 目录中。

  • 在当前使用的主题模板中导入和执行以上代码。一般是在 hugo/themes/xx/layouts/partials/script.html 中，这个文件是页面导入的script部分(虽是html文件，但是编辑时不能使用prettier-js格式化，会破坏hugo的模板语法)。

    <script src="/js/L2Dwidget.min.js"></script>
<script>
/**
​ * The init function
​ * @param {Object}   [userConfig] User's custom config 用户自定义设置
​ * @param {String}   [userConfig.model.jsonPath = ''] Path to Live2D model's main json eg. `https://test.com/miku.model.json` model主文件路径
​ * @param {Number}   [userConfig.model.scale = 1] Scale between the model and the canvas 模型与canvas的缩放
​ * @param {Number}   [userConfig.display.superSample = 2] rate for super sampling rate 超采样等级
​ * @param {Number}   [userConfig.display.width = 150] Width to the canvas which shows the model canvas的长度
​ * @param {Number}   [userConfig.display.height = 300] Height to the canvas which shows the model canvas的高度
​ * @param {String}   [userConfig.display.position = 'right'] Left of right side to show 显示位置：左或右
​ * @param {Number}   [userConfig.display.hOffset = 0] Horizontal offset of the canvas canvas水平偏移
​ * @param {Number}   [userConfig.display.vOffset = -20] Vertical offset of the canvas canvas垂直偏移
​ * @param {Boolean}  [userConfig.mobile.show = true] Whether to show on mobile device 是否在移动设备上显示
​ * @param {Number}   [userConfig.mobile.scale = 0.5] Scale on mobile device 移动设备上的缩放
​ * @param {String}   [userConfig.name.canvas = 'live2dcanvas'] ID name of the canvas canvas元素的ID
​ * @param {String}   [userConfig.name.div = 'live2d-widget'] ID name of the div div元素的ID
​ * @param {Number}   [userConfig.react.opacity = 0.7] opacity 透明度
​ * @param {Boolean}  [userConfig.dev.border = false] Whether to show border around the canvas 在canvas周围显示边界
​ * @param {Boolean}  [userConfig.dialog.enable = false] Display dialog 显示人物对话框
​ * @param {Boolean}  [userConfig.dialog.hitokoto = false] Enable hitokoto 使用一言API
​ * @return {null}
 */


L2Dwidget.init({
  model: {
    jsonPath: '/live2d_models/tororo/tororo.model.json',
    scale: 1,
  },
  display: {
    superSample: 1,
    width: 150,
    height: 300,
    position: 'left',
    hOffset: 60,
    vOffset: 0
  },
  mobile: {
    show: false,
    scale: 0.5,
  },
  react: {
    opacity: 0.8
  }
});
</script>

大功告成

有猫了有猫了