欢迎大家关注我的其他账号
博客： https://zero617.top
b 站： zeroれい零
微信公众号： zero617

引言

最近石蒜可谓是火爆了整个动漫圈，也是带来了一个夏天的青春回忆。
经典的美少女+枪战风格（~~美少女贴贴赛高!!！~~）的经典组合可谓是经久不衰，始终拥有着为数不少的受众群体，
作为足立慎吾初次执导的“处女作”，极为优秀的作画加上良好的故事剧情，以及舒适的叙事节奏可谓是完美的实现了导演出道，在强敌众多、黑马不断的 7 月稳稳的拿下了客观的收视率和口碑。

说回正题，大家还记得第四集的这一幕吗？

千束和泷奈真的是==ちょ可愛い==的啊!

效果

而现在，我们可以在我们自己的博客里添加上可爱的千束和泷奈了。
动画.gif

这是项目的 GitHub 地址 dsrkafuu/sakana-widget: Sakana widget for Web. | 网页小组件版本的石蒜模拟器。 (github.com)，大家可以在成功使用后去为项目点个星鼓励支持作者下。另外懂前端的小伙伴可以自己取查看官方文档食用哦~

butterfly主题修改步骤

好，废话多说，来开始我们的实操吧！
我的方案是基于 butterfly 主题的，当然，只要使用 ==pug== 编写的主题理论上都可以通用。

首先找到博客文件夹下的主题文件夹下的 layout. pug 文件

打开并在最后添加

#sakana-widget(style='position:fixed;bottom:10px;right:10px;')
script.
  function initSakanaWidget() {
  new SakanaWidget().mount('#sakana-widget');
  }
script(async='' onload='initSakanaWidget()' src='https://cdn.jsdelivr.net/npm/sakana-widget@2.2.1/lib/sakana.min.js')

其中，修改 bottom 和 right 后的数值可以修改插件的位置。

hexo g && hexo 就可以预览效果了。

html 方案

另外，如果是用 html 写的博客也可以直接引入

<div id="sakana-widget"></div>
<script>
  function initSakanaWidget() {
    new SakanaWidget().mount('#sakana-widget');
  }
</script>
<script
  async
  onload="initSakanaWidget()"
  src="https://cdn.jsdelivr.net/npm/sakana-widget@2.2.2/lib/sakana.min.js"
></script>

也同样可以实现功能。