最近在B站看到了有UP主做的介绍视频
本石蒜厨怎能放过如此可爱的东西
所以在这里写一个原帖地址以及我是如何添加的
(毕竟Handsome的教程好像还没有嘛)
当然,如果能帮到人最好啦

首先,这个是原帖地址

https://github.com/itorr/sakana

因为其使用的是MIT开源嘛
所以我就搬过来用了

首先,在该介绍页面我们能够找到两段代码

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


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

如果你和本博客使用的同样是基于Typecho的handsome主题的话
你可以在主题的设置外观中找到 “开发者设置“

我们需要打开开发者设置,然后将

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

这段代码添加到其自定义CSS


然后将这段代码

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

添加到自定义输出body 尾部的HTML代码

然后点一下保存,在主页刷新一下你的页面就ok啦

并且这个还提供很多参数可以自行修改的,比如惯性和衰减之类的
详细的参数你可以去大佬原帖看看啦
(地址就是最上面的那个)

文章的最后
♪sa→ka→na——(>○<)♪

Last modification:September 2, 2022
如果觉得我的文章对你有用,请随意赞赏