方法一：使用 hexo-helper-live2d
Installations
首先在网站根目录下执行npm install --save hexo-helper-live2d，下载 Live2d 插件
下载模型，在网站根目录下新建live2d_models文件夹，将模型文件放入其中,模型文件可在以下链接下载
https://github.com/xiazeyu/live2d-widget-models
修改_config.yml文件，添加如下配置
1
2
3
4
5
6
7
8
9
10
11
| live2d:
enable: true
model:
use: nipsilon
display:
position: left
width: 175
height: 350
log: true
mobile:
show: false
|
文件的存放位置参考下图
效果图
Configurations
helper 特有
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
debug: false
model:
use: live2d-widget-model-wanko
|
General Settings
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
live2d:
model:
scale: 1
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
|
相比方法一，方法二支持更丰富的特性，见Live2D Widget
对于 Icarus，在<blog_root_folder>\themes\icarus\layout\layout.jsx末尾添加<script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>然后运行hexo s即可看到 live2d-model
或者，你也可以克隆项目到本地，例如在/theme/icarus/source/js/live2d/中克隆项目，并修改``layout.jsv和autoload.js`；
如果需要修改样式，可自行更改waifu.css live2d.min.js waifu-tips.js
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
| File: themes\icarus\layout\layout.jsx
module.exports = class extends Component {
render() {
const { site, config, page, helper, body } = this.props;
const language = page.lang || page.language || config.language;
const columnCount = Widgets.getColumnCount(config.widgets, config, page);
return <html lang={language ? language.substr(0, 2) : ''}>
<Head site={site} config={config} helper={helper} page={page} />
<body class={`is-${columnCount}-column`}>
<Footer config={config} helper={helper} />
<Scripts site={site} config={config} helper={helper} page={page} />
<Search config={config} helper={helper} />
......
// Note Here you can inject custom scripts
+ <script type="text/javascript" src="/js/live2d/autoload.js"></script>
</body>
</html>;
}
};
File: public\js\live2d\autoload.js
- const live2d_path = "https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";
+ const live2d_path = "/js/live2d/";
function loadExternalResource(url, type) {
}
if (screen.width >= 768) {
}
|
如果模型显示过程中被覆盖，可适当调大z-index，使其置于网页上层
Ref
hexo-helper-live2d
Hexo 添加 Live2D 看板娘+模型预览
