首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >萌萌哒二次元看板娘

萌萌哒二次元看板娘

作者头像
Bess Croft
发布2020-04-03 16:43:26
8010
发布2020-04-03 16:43:26
举报
文章被收录于专栏:贝丝的专栏贝丝的专栏

不少同学应该都发现了,许多人的博客都有类似萌萌哒、看板娘的东西。这个其实是一个名叫hexo-helper-live2d的插件,那么,我们一起来向Hexo里放上一只萌萌哒二次元看板娘吧!

安装

首先,在Hexo博客根目录下运行git,然后再命令行输入:

npm install --save hexo-helper-live2d

当然也可以以标签模式运行,但是不建议这样,容易带来不必要的麻烦。目前最新的插件版本应该是+ hexo-helper-live2d@3.1.0

配置

基础设置

在安装好插件之后,我们可以向Hexo的或者主题的_config.yml文件中添加配置,但是我建议你添加到Hexo的_config.yml中,而不是主题的配置文件中。

live2d:
  enable: true		#默认开启
  scriptFrom: local		# 默认
  pluginRootPath: live2dw/	# 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/       # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/	# 模型文件相对与插件根目录路径
  tagMode: false		# 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false  		# 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-wanko	#当前使用的模型
  display:
    position: right		#显示位置:左或右
    width: 150			#画布的宽度,显示模型画布的长度
    height: 300			#画布高度显示模型画布的高度
  mobile:
    show: true		#是否在移动设备上显示,默认为true

请注意,如果你不想手机端显示,请把mobile下的show的值改为false,大多数情况下会遮挡视线。我最开始没注意,但是好多人跟我说手机端影响阅读体验了,然后我发现是得取消。

详细的设置

详细设置其实不愿意折腾的同学可以不用管,但是你想按照自己的意愿来,还是可以尝试的。按照官方文档的说法:设置分为helper特有的和公共的, 你需要把他们合并放到 _config.yml。以下是helper特有:

# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true
  # enable: false
  scriptFrom: local # 默认
  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  # scriptFrom: jsdelivr # jsdelivr CDN
  # scriptFrom: unpkg # unpkg CDN
  # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false # 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-wanko # npm-module package name
    # use: wanko # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/wanko # 相对于博客根目录的路径
    # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url

General Settings

这里具体的设置,以及你想要的更多,可以参考官方API文档

示例:

# Live2D
## https://github.com/xiazeyu/live2d-widget.js
## https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
live2d:
  model:
    scale: 1			#模型与canvas的缩放
    hHeadPos: 0.5		#模型头部横坐标
    vHeadPos: 0.618		#模型头部纵坐标
  display:
    superSample: 2		#超采样等级
    width: 150			#画布的宽度,显示模型画布的长度
    height: 300			#画布高度显示模型画布的高度
    position: right		#显示位置:左或右
    hOffset: 0			#水平偏移
    vOffset: -20		#垂直偏移
  mobile:
    show: true		#是否在移动设备上显示
    scale: 0.5		#移动设备上的缩放
  react:
    opacityDefault: 0.7		#默认透明度
    opacityOnHover: 0.2		#鼠标移上透明度

模型

有许多方法来使用不同的模型,这里来介绍我设置的方法:

  1. 在Hexo跟目录下新建文件夹live2d_models
  2. 然后在live2d_models下建文件夹<你要安装的模型的名字>
  3. 然后在<你要安装的模型的名字>下新建json文件:<你要安装的模型的名字>.model.json

可以参考我的:

Hexo
│
├──live2d_models
│          └── koharu
				└──koharu.model.json
安装模型

在git的命令行输入:

npm install --save live2d-widget-model-<你要安装的模型的名字>

比如我的:

npm install --save live2d-widget-model-koharu

然后你就可以通过向 model.use 键入包名 (live2d-widget-model-wanko) 来使用了。当然,你也可以去官方发布寻找live2d小模型

最后

嗯,如果你是没有CDN会死星人,直接将 .model.json 的url地址输入 model.use。祝你成功!


*版权声明:版权归作者本人所有,尊重原创,推送文章除非无法确认,都会注明作者和来源。如果出处有误或侵犯到原作者权益,实属无心之举,请务必与我联系删除或授权事宜。本公众号所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-03-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 爪哇派生 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 配置
    • 基础设置
      • 详细的设置
        • 安装模型
    • 最后
    相关产品与服务
    内容分发网络 CDN
    内容分发网络(Content Delivery Network,CDN)通过将站点内容发布至遍布全球的海量加速节点,使其用户可就近获取所需内容,避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题,有效提升下载速度、降低响应时间,提供流畅的用户体验。
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档