Loading... # 序章 起因便是从网友博客看到的，觉得很有意思<a href="https://www.c-dreamer.top" target="_blank">某科学的贝壳</a> 然后便去了作者的GitHub寻找源码实装了-<a href="https://github.com/dsrkafuu/sakana-widget" target="_blank">Sakana! Widget</a> 本文以Handsome博客主题为出发点教程实装。 其实所有网页也是大同小异找到合适的地方引用即可，本文可做参考 有更多脑洞去操作的建议前往作者GitHub参考修改更多自定义。  好看又好玩，使劲摇一摇，太阳上山到下山 # 开始 引用模块到全站主框架中 最新的可前往作者GitHub中寻找（应该没有  ```html <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sakana-widget@2.5.0/lib/sakana.min.css" /> <script> function initSakanaWidget() { new SakanaWidget().mount('#sakana-widget'); } </script> <script async onload="initSakanaWidget()" src="https://cdn.jsdelivr.net/npm/sakana-widget@2.5.0/lib/sakana.min.js" ></script> ``` ## 寻找合适的地方，放置框架引用小组件 本站则是找到全站右侧边栏来引用小组件 引用代码： ```html <div id="sakana-widget"></div> ``` Handsome博客主题右侧边栏文件： component-sidebar.php  # 结束 简单的引用便完成的，后面的花里胡哨的还得靠自己慢慢玩了 自定义图片：修改引用的js，修改base64编码图片，将自己的图片转换为编码覆盖即可。 最后修改：2023 年 06 月 22 日 © 允许规范转载 赞 0 如果觉得我的文章对你有用，请随意赞赏
