1 CDN 引入模块 #
开源地址： https://github.com/itorr/sakana/
网页小组件版本： https://github.com/dsrkafuu/sakana-widget/
将网页小组件版第一段代码，直接放入文本文件如 content\sakana\index.md，组件默认嵌在文章当中。
2 修改桌面样式 #
参考： https://www.wsjj.top/archives/sakana
将其代码插入页面文件如 blowfish\layouts\_default\single.html 的 head 或者 body 标签内任意位置，组件将固定在桌面上。
3 调整 API 参数 #
根据网页小组件版本说明，「Sakana! Widget」支持自定义图片、自动缩放和更多运行参数。
<!-- 第一部分：自定义桌面样式 -->
<style>
#sakana-widget {
display: none; /* 不显示 */
}
@media only screen and (min-width: 768px) {
#sakana-widget {
display: block; /* 块级元素 */
position: fixed; /* 固定在页面上 */
left: 16px;
bottom: 0;
}
}
</style>
<div id="sakana-widget"></div>
<!-- 第二部分：调整 API 参数 -->
<script>
function initSakanaWidget() {
/* 红衣服的叫锦木千束 chisato，黑头发的叫井上泷奈 takina，中分头背带裤的叫 ikun */
const ikun = SakanaWidget.getCharacter('chisato');
ikun.image = `ikun.png`; // url 或 当前文章所在文件夹下相对位置
ikun.initialState = {
...ikun.initialState,
d: 1, // 衰减
i: 0.001, // 惯性
};
SakanaWidget.registerCharacter('ikun', ikun);
new SakanaWidget({ character: 'ikun' }).mount('#sakana-widget'); // 坤坤第一个展示
}
</script>
<script
async
onload="initSakanaWidget()"
src="https://cdn.jsdelivr.net/npm/sakana-widget@2.3.1/lib/sakana.min.js"
></script>4 封装成短代码 #
新建 layouts\shortcodes\sakana-widget.html，文本中即可插入短代码 {{<sakana-widget>}}。不过可能出现上文嵌入的组件无法同时显示，和静态资源 ikun.png 无法加载等问题。不管是完整写入 md 还是以短代码的形式插入 md，static 目录下的 ikun.png 都可能无法加载。解决办法之一是将图片放入文章所在目录，此外，可能的办法有：
- 组件以局部模板的形式插入（已验证不太行，关键是文件查找的问题）；
- 创建 url 路径（推荐），这里提供一个示例；
- 通过 NPM 包的形式安装模块。
当然，做成局部模板 layouts\partials\sakana-widget.html 可以更好地控制组件。遗憾的是，这可能导致更严重的错误 —— 不仅缺少 ikun 头像，角色根本没创建！
<!-- 在 single.html 的 body 标签中插入模板 -->
{{ if .Params.showSakana | default (site.Params.article.showSakana | default true) }}
{{ partial "sakana-widget.html" . }}
{{ end }}
又行了？
<!-- 在 baseof.html 中插入模板，而不是 `single.html`！ -->
<!-- 本文基于 Hugo-Blowfish 主题，不同主题配置文件有略微差异 -->
{{ partial "sakana-widget.html" . }}