「Sakana!」二改“石蒜模拟器”

事情的起因是看到了这位大佬发的文章

WoW！有点喜欢！

当然里面有很多二改的大佬，但是貌似都没有提到怎么换图片的问题。进过我的一番摸索得出教程。

先说食用方法：（来源：开摆のcc）

使用方式：找个合适的地方加入下面的代码，比如我是插入到 footer.php的 标签里面

<!-- 石蒜模拟器 https://github.com/itorr/sakana -->
		<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>
		<style>
			html{
				background: #CCC;
			}
			html .sakana-box{
				position: fixed;
				right: 0;
				bottom: 0;
 
				transform-origin: 100% 100%; /* 从右下开始变换 */
			}
		</style>

生效不了是正常的（毕竟jsdelivr老炸）...

下一步到Github上下载源码（Github传送门）

找到/html/sakana.min.js并下载

打开后可以发现图片是以{background-image:url(data:image/png;base64,一大串...)}这种URI形式储存的

URI具体是啥：https://baike.baidu.com/item/URI/2901761

DataURI 允许在HTML文档中嵌入小文件，可以使用 img 标签或 CSS 嵌入转换后的 Base64 编码，减少 HTTP 请求，加快小图像的加载时间。

不需要懂（确实是我也不知道）。

可以先把源码中的{background-image:url(data:image/png;base64,一大串...)}先行处理

可以先整理成这样

[data-character=chisato]{background-image:url(data:image/png;base64,空2)}.sakana-box .sakana-character[data-character=takina]{background-image:url(data:image/png;base64,空1)}

下一步是图片转换

https://www.css-js.com/tools/base64.html

https://base64.us/#

转换好后替换对应的代码片段

注意：上述空1对应的是初始图片。

最后将footer中的"https://cdn.jsdelivr.net/npm/sakana"替换成自己改好的js文件地址。

大功告成！