Next 网页自定义添加宠物

发表于 更新于 分类于 ， 阅读次数： 本文字数： 1.3k 阅读时长 ≈ 1 分钟

今天在逛别人博客的时候，发现一个很好看的动态的模型，有人形的也有次元风的；不过我还是喜欢下面的小狗狗，于是我也希望自己的博客能有它的加入。

加个需求

邀请可爱的小宠物入驻 生信小白 博客。

安装插件

1
2
npm install --save hexo-helper-live2d   ## 插件
npm install live2d-widget-model-wanko   ## 模型

添加站点配置文件

  • _config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
# 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
  model:
    use: live2d-widget-model-wanko # npm-module package name
    scale: 1
    hHeadPos: 0.5
    vHeadPos: 0.618
  display:
    superSample: 2
    width: 150
    height: 300
    position: left  ## 主页左边
    hOffset: 20
    vOffset: 0
  mobile:
    show: true
    scale: 0.5
  react:
    opacityDefault: 0.7
    opacityOnHover: 0.2

参考链接

[1] EYHN/hexo-helper-live2d: Add the Sseexxyyy live2d to your hexo! (github.com)

[2] feat: add tagMode. · EYHN/hexo-helper-live2d@e2ac803 (github.com)