vuepress添加看板娘(live2d)教程
相关信息
本文使用的live2d插件为Oml2d
官方文档
安装
安装插件
cd 到vuepress项目根目录
添加依赖包
npm
npm install vuepress-plugin-oh-my-live2d@latestpnpm
pnpm add vuepress-plugin-oh-my-live2d@latestyarn
yarn add vuepress-plugin-oh-my-live2d@latest添加models（可选）
注意
由于官方文档提供的live2d模型资源站点https://model.oml2d.com/疑似跑路，强烈建议您自行部署模型资源，或使用本站的模型资源
- 下载模型资源 Oml2d模型资源仓库
- 将
models目录下的模型文件复制到~/.vuepress/public/images/live2d目录下 示例：
部署您的vuepress站点后，您就可以通过{siteUrl}/live2d/xxx/xxx.json获取模型
使用
在vuepress配置文件中启用并配置插件
import { oml2dPlugin } from 'vuepress-plugin-oh-my-live2d';
export default defineUserConfig({
// ... other configs
plugins: [
oml2dPlugin({
// 在这里配置选项
models: [
{
path: 'https://cdn.jsdelivr.net/gh/Eikanya/Live2d-model/Live2D/Senko_Normals/senko.model3.json',
scale: 0.12,
position: [-10, 50],
stageStyle: {
width: 350
}
}
]
})
// ...other plugins
]
});参考本站的配置示例
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
import { oml2dPlugin } from 'vuepress-plugin-oh-my-live2d';
export default defineUserConfig({
base: '/',
lang: 'zh-CN',
title: '逸燧博客',
description: '海阔凭鱼跃，天高任鸟飞',
plugins: [
oml2dPlugin({
models: [
{
"path": "/live2d/Pio/model.json",
"scale": 0.4,
"position": [0, 50],
"stageStyle": {
"height": 300
}
},
{
"path": "/live2d/HK416-1-normal/model.json",
"scale": 0.07,
"position": [-60, 50],
"stageStyle": {
"width": 350
}
},
{
"path": "/live2d/HK416-2-destroy/model.json",
"scale": 0.075,
"position": [-10, 20],
"stageStyle": {
"height": 350
}
},
{
"path": "/live2d/HK416-2-normal/model.json",
"scale": 0.065,
"position": [-40, 50],
"stageStyle": {
"height": 350
}
},
]
}),
],
})更多配置选项
提示
请查看官方文档
让看板娘右侧显示的示例
import { oml2dPlugin } from 'vuepress-plugin-oh-my-live2d';
export default defineUserConfig({
// ... other configs
plugins: [
oml2dPlugin({
dockedPosition: 'right',
models: [
{
path: 'https://cdn.jsdelivr.net/gh/Eikanya/Live2d-model/Live2D/Senko_Normals/senko.model3.json',
scale: 0.12,
position: [-10, 50],
stageStyle: {
width: 350
}
}
]
})
// ...other plugins
]
});不出意外的话，看板娘就可以正常显示了