✨ 我是流萤白沙的「文章捕手」，擅长在文字的星海中打捞精华。每当新的篇章诞生，我就会像整理贝壳一样，将思想的闪光点串成珍珠项链~
本文介绍了如何在博客中实现轻量级的看板娘功能，使用了名为“Sakana”的JavaScript库，旨在替代资源占用较大的live2D。文章详细描述了插件的创建过程，包括在博客根目录中添加必要的JavaScript和样式文件，以及如何配置角色和样式。通过简单的代码示例，用户可以快速上手，灵活调整角色、缩放比例和其他参数，增强博客的互动性和趣味性。此项目适用于多种主题，具有较高的实用价值和可定制性。
# 前言
二次元风格博客怎么能没有自己的看板娘，但是又嫌弃 live2D 占用太多资源怎么办。
逛 github 的时候发现了这个立牌，非常适合宝宝体质，仿佛为我量身打造，于是果断搞过来。
项目 github 原址：itorr/sakana: 🐟「Sakana!」石蒜模拟器
# 实现
# 创建插件
- 博客根目录
scripts里添加sakana.js。
hexo.extend.filter.register('theme_inject', function(injects) { | |
injects.footer.file('sakana', 'views/sakana.pug', {}, {cache: true}); | |
injects.style.push('views/sakana.styl'); | |
}); |
- 博客根目录
views里添加sakana.pug。
.sakana-box | |
script(src="https://cdn.jsdmirror.com/npm/sakana") | |
script. | |
Sakana.init({ | |
el: '.sakana-box', // 启动元素 node 或 选择器 | |
scale: .5, // 缩放倍数 | |
character: 'chisato', // 锦木千束 | |
canSwitchCharacter: true, // 允许换角色 | |
}); |
- 博客根目录
views里添加sakana.styl。
html .sakana-box { | |
position: fixed; | |
left: 0; | |
bottom: 0; | |
transform-origin: 0 100%; | |
} |
适用主题 shokax，其他主题把下面代码扔进主题 layout 目录里的 footer.pug 里应该也行，使用其他模板引擎的需要自己改改。
footer.pug：
div(class="sakana-box" style='position:fixed;bottom:10px;right:10px;transform-origin: 100% 100%;') | |
script. | |
function initSakanaTest() { | |
Sakana.init({ | |
el: '.sakana-box', // 启动元素 node 或 选择器 | |
scale: .5, // 缩放倍数 | |
character: 'chisato', // 锦木千束 | |
canSwitchCharacter: true, // 允许换角色 | |
}) | |
Sakana.setMute(false); | |
} | |
script(onload = 'initSakanaTest()' src="https://cdn.jsdmirror.com/npm/sakana") |
# 可选配置
// 启动 | |
const sakana = Sakana.init({ | |
// 选项：默认值 | |
el: '.sakana-box', // 启动元素 node 或 选择器 | |
character: 'takina', // 启动角色 'chisato','takina' | |
inertia: 0.01, // 惯性 | |
decay: 0.99, // 衰减 | |
r: 60, // 启动角度 | |
y: 10, // 启动高度 | |
scale: 1, // 缩放倍数 | |
translateY: 0, // 位移高度 | |
canSwitchCharacter: false, // 允许换角色 | |
onSwitchCharacter(character){ // 切换角色回调 | |
console.log(`${character} dayo~`); | |
}, | |
}); |
OK，结束～
