vitepress-theme-website
v1.0.8
Published
vitepress plugin for website
Downloads
63
Maintainers
Readme
vitepress-theme-website
简介
vitepress-theme-website
是一个基于 Vitepress
的主题插件,集成评论Waline、Live2D看板娘。
提示
已支持 [email protected]
版本
安装
npm install -D vitepress-theme-website
yarn add -D vitepress-theme-website
pnpm install -D vitepress-theme-website
Waline 用法
.vitepress/theme/index.js
文件中使用插件,serverURL
替换为自己的地址,更多用法详见Waline。
import DefaultTheme from 'vitepress/theme'
import { useWaline } from 'vitepress-theme-website'
export default {
...DefaultTheme,
enhanceApp(ctx) {},
setup() {
useWaline({
serverURL: 'https://waline.xinlei3166.com'
})
}
}
Live2d 用法
.vitepress/theme/index.js
文件中使用插件。
import DefaultTheme from 'vitepress/theme'
import { useLive2d } from 'vitepress-theme-website'
export default {
...DefaultTheme,
enhanceApp(ctx) {},
setup() {
useLive2d()
}
}
由于 live2d.js
打包后会导致模型显示不全,需要用cdn方式引用。
live2d.js
下载地址,下载完成后放在和 .vitepress
平级的 public
目录中。
.vitepress/config.js
文件中增加如下配置:
head: [
['script', { src: '/live2d.js' }],
]
自定义参数
useLive2d({
enable: true,
model: {
url: 'https://raw.githubusercontent.com/iCharlesZ/vscode-live2d-models/master/model-library/hibiki/hibiki.model.json'
},
display: {
position: 'right',
width: '135px',
height: '300px',
xOffset: '35px',
yOffset: '5px'
},
mobile: {
show: true
},
react: {
opacity: 0.8
}
})
模型
使用了 vscode-live2d-models 中的模型,把 model.url
改为指定的模型地址即可。
感谢
vitepress-theme-website@useLive2d
参考了 vuepress-plugin-helper-live2d