使用一些主题自带的Live2D开关
以我自己目前使用的主题Reimu为例：
reimu-Live2D
https://github.com/D-Sketon/hexo-theme-reimu?tab=readme-ov-file#live2d
仅需在 _config.reimu.yml 中调整以下设置即可：
保存并提交后就能在部署的网页中看到Live2D小人啦~
但是这样得到的Live2D看板娘无法自定义，那么要怎么自定义呢？
有一种方式是通过修改 _config.reimu.yml 中的以下内容（不同主题的位置以及实现方法不同）：
1
2
3
4
5
6
| vendor:
fastly_jsdelivr_gh: https://fastly.jsdelivr.net/gh/
js:
live2d:
base: fastly_jsdelivr_gh|D-Sketon/plugin-live2d/
js: fastly_jsdelivr_gh|D-Sketon/plugin-live2d/js/live2d-autoload.js
|
将这些内容修改为自己的CDN链接即可，可以参考以下内容：
使用CDN
https://github.com/stevenjoezhang/live2d-widget?tab=readme-ov-file#%E4%BD%BF%E7%94%A8-cdn
但是我认为这太麻烦了（其实是我搞了半天没搞好），我选择一些更简单的方式实现（
使用OhMyLive2D组件
为你的个人博客添加一个Live2D看板娘
https://www.bilibili.com/video/BV1TD421M7zm/
我们可以来到他的官网查看在Hexo上的部署教程
首先安装
1
| npm install hexo-oh-my-live2d
|
然后在 _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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
| # hexo-oh-my-live2d 配置
OhMyLive2d:
enable: true
CDN: https://unpkg.com/oh-my-live2d
option:
dockedPosition: 'right' # 模型停靠位置 默认值: 'right' 可选值: 'left' | 'right'
# menus: |
# (currentModel) =>{
# console.log(currentModel);
# }
# menus:
# items: |
# (defaultItems)=>{
# return [
# ...defaultItems,
# {
# id: 'github',
# icon: 'github-fill',
# title: '我的github',
# onClick: ()=>window.open('https://github.com/hacxy')
# }
# ]
# }
# items:
# - id: 'github'
# icon: 'github-fill'
# title: '我的github'
# onClick: ()=>window.open('https://github.com/hacxy')
mobileDisplay: true # 是否在移动端显示
models:
- path: https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json
mobilePosition: [-10, 23] # 移动端时模型在舞台中的位置。 默认值: [0,0] [横坐标, 纵坐标]
mobileScale: 0.1 # 移动端时模型的缩放比例 默认值: 0.1
mobileStageStyle: # 移动端时舞台的样式
width: 180
height: 166
motionPreloadStrategy: IDLE # 动作预加载策略 默认值: IDLE 可选值: ALL | IDLE | NONE
position: [-10, 35] # 模型在舞台中的位置。 默认值: [0,0] [横坐标, 纵坐标]
scale: 0.15 # 模型的缩放比例 默认值: 0.1
# showHitAreaFrames: false # 是否显示点击区域 默认值: false
stageStyle:
width: 250
height: 250
- path: 'https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json'
scale: 0.12
position: [0, 0]
stageStyle:
width: 250
mobileScale: 0.08
mobilePosition: [0, 0]
mobileStageStyle: # 移动端时舞台的样式
width: 180
- path: 'https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json'
scale: 0.12
position: [0, 0]
mobileScale: 0.08
mobilePosition: [0, 0]
mobileStageStyle: # 移动端时舞台的样式
width: 180
stageStyle:
width: 250
parentElement: document.body #为组件提供一个父元素，如果未指定则默认挂载到 body 中
primaryColor: 'var(--btn-bg)' # 主题色 支持变量
sayHello: false # 是否在初始化阶段打印项目信息
tips:
style:
width: 230
height: 120
left: calc(50% - 20px)
top: -100px
mobileStyle:
width: 180
height: 80
left: calc(50% - 30px)
top: -100px
idleTips:
interval: 15000
# message:
# - 你好呀~
# - 欢迎来到我的小站~
# 自定义提示语 需要 引入 axios 库 ,也可以使用其他方法
message: |
function(){
return axios.get('https://v1.hitokoto.cn?c=i')
.then(function (response) {
return response.data.hitokoto ;
})
.catch(function (error) {
console.error(error);
});
}
# wordTheDay: true
# 自定义 https://v1.hitokoto.cn 数据
# wordTheDay: |
# function(wordTheDayData){
# return `${wordTheDayData.hitokoto} by.${wordTheDayData.from}`;
# }
# 具体方法请看: https://oml2d.com/guide/loadModel.html#oml2d-%E5%AE%9E%E4%BE%8B
# then: |
# oml2d.onStageSlideIn(() => {
# oml2d.tipsMessage('Oh My Live2D !!!', 3000, 10);
# });
|
自定义（OhMyLive2D）
首先将Live2D模型放在根目录的 source 目录下
模型怎么来？可以参考Live2d-model
Live2D模型模型文件夹结构大致如下：
1
2
3
4
5
6
7
8
9
10
| model/
- motions/
- 1.mtn
- 2.mtn
- ...
- model_name_number/
- xxx.png
- model.json
- physice.json
- model.moc
|
在 _config.yml 的 skip_render 添加模型文件夹
1
2
| skip_render:
- model/**
|
然后在 _config.yml 的 OhMyLive2d 配置中
source 改为 ''
path 为你的 model.json 路径
1
2
3
4
5
| OhMyLive2d:
enable: true
source: ''
models:
- path: /model/model.json
|
保存并提交后就能在部署的网页中看到自己的Live2D小人啦~
