模仿为博客添加石蒜模拟器!站点的

项目地址,按照项目readme如下添加石蒜模拟器,右下角就是成品

玩法

可以拖拽、拉伸石蒜立牌,有弹簧的触感。点击下方立碑切换人物。当由正右方向左释放泷奈时,泷奈发出“SAKANA”的声音;当上下拖拽千束时,千束发出“Chinanago”的声音

配置

themes/polk/layout/_partial/footer.ejs添加下述代码

1
2
3
4
5
6
7
8
9
10
<div class="sakana-box"></div>
<script src="https://cdn.jsdelivr.net/npm/sakana"></script>
<script>
Sakana.setMute(false);
Sakana.init({
el: '.sakana-box', // 启动元素 node 或 选择器
scale: .5, // 缩放倍数
canSwitchCharacter: true, // 允许换角色
});
</script>

样式

themes/polk/source/css/_partial/footer.styl添加

1
2
3
4
5
6
html .sakana-box{
position: fixed;
right: 0;
bottom: 0;
transform-origin: 100% 100%; /* 从右下开始变换 */
}

创建于2023.1.26/17.44,修改于2023.1.26/17.44