9. 看板娘配置指南
695 字
3 分钟
9. 看板娘配置指南
看板娘配置指南
配置文件位置
src/config/pioConfig.ts
看板娘类型
博客支持两种看板娘模型:
| 类型 | 说明 |
|---|---|
| Spine | 骨骼动画,配置更灵活 |
| Live2D | 平面建模,资源丰富 |
Spine 看板娘配置
启用/禁用
export const spineModelConfig: SpineModelConfig = { // Spine 看板娘开关 enable: true, // true=启用, false=禁用 // ...}模型配置
model: { // Spine模型文件路径 path: "/pio/models/spine/firefly/1310.json", // 模型缩放比例 scale: 1.0, // X轴偏移 x: 0, // Y轴偏移 y: 0,},位置配置
position: { // 显示位置 // bottom-left=左下角, bottom-right=右下角 // top-left=左上角, top-right=右上角 corner: "bottom-left", // 距离边缘0px offsetX: 0, // 距离下边缘0px offsetY: 0,},注意:右下角可能会挡住返回顶部按钮。
尺寸配置
size: { // 容器宽度 width: 135, // 容器高度 height: 165,},交互配置
interactive: { // 交互功能开关 enabled: true, // 点击时随机播放的动画列表 clickAnimations: [ "emoji_0", "emoji_1", "emoji_2", "emoji_3", "emoji_4", "emoji_5", ], // 点击时随机显示的文字消息 clickMessages: [ "你好呀!我是流萤~", "今天也要加油哦!✨", "想要一起去看星空吗?🌟", "记得要好好休息呢~", "有什么想对我说的吗?💫", ], // 文字显示时间(毫秒) messageDisplayTime: 3000, // 待机动画列表 idleAnimations: ["idle", "emoji_0", "emoji_1", "emoji_3", "emoji_4"], // 待机动画切换间隔(毫秒) idleInterval: 8000,},响应式配置
responsive: { // 在移动端隐藏 hideOnMobile: true, // 移动端断点 mobileBreakpoint: 768,},层级与透明度
// 层级zIndex: 1000,
// 透明度opacity: 1.0,Live2D 看板娘配置
启用/禁用
export const live2dModelConfig: Live2DModelConfig = { // Live2D 看板娘开关 enable: false, // true=启用, false=禁用 // ...}模型配置
model: { // Live2D模型文件路径 path: "/pio/models/live2d/snow_miku/model.json", // 也可以使用其他模型 // path: "/pio/models/live2d/illyasviel/illyasviel.model.json",},其他配置
Live2D 的位置、尺寸、交互等配置与 Spine 相同,参考上面的说明。
切换看板娘类型
启用 Spine
spineModelConfig: { enable: true,},live2dModelConfig: { enable: false,},启用 Live2D
spineModelConfig: { enable: false,},live2dModelConfig: { enable: true,},常见问题
Q: 看板娘不显示?
- 检查对应类型的
enable是否为true - 检查模型文件路径是否正确
- 检查浏览器控制台是否有错误
Q: 看板娘挡住内容?
调整 position.corner 切换位置:
corner: "bottom-left", // 改到左下角或调整 zIndex 降低层级:
zIndex: 100,Q: 移动端也想显示看板娘?
responsive: { hideOnMobile: false, // 在移动端显示},Q: 如何自定义对话内容?
修改 clickMessages 数组:
clickMessages: [ "你的第一条消息", "你的第二条消息", "你的第三条消息",],Q: 待机动画不切换?
检查 idleAnimations 是否配置了有效的动画名称。
Q: 点击没有反应?
- 检查
interactive.enabled是否为true - 检查
clickAnimations是否配置了有效的动画
支持与分享
如果这篇文章对你有帮助,欢迎分享给更多人或赞助支持!
相关文章 智能推荐
1
12. 字体配置指南
博客搭建 博客字体配置教程,包含内置字体选择、自定义字体添加、字体加载优化等详细设置。
2
16. 国际化配置指南
博客搭建 博客国际化配置教程,包含多语言支持、翻译管理、语言切换、SEO优化等详细设置。
3
13. 搜索功能配置指南
博客搭建 博客搜索功能配置教程,包含内置PageFind搜索、搜索框设置、搜索结果优化等详细设置。
4
11. 主题颜色配置指南
博客搭建 博客主题颜色配置教程,包含主色调、深色模式、固定模式等详细设置。
5
6. 樱花特效配置指南
博客搭建 博客樱花特效配置教程,包含樱花数量、尺寸、速度、透明度等参数的自定义设置。
随机文章 随机推荐