为网页添加『Sakana！』石蒜模拟器

发表于 更新于 分类于 阅读次数： Waline： 本文字数： 2.1k 阅读时长 ≈ 4 分钟
为网页添加『Sakana！』 石蒜模拟器。

石蒜模拟器

- 项目地址：https://github.com/itorr/sakana/

- Demo： https://lab.magiconch.com/sakana/

- 效果：

image-20240115213244643

image-20240115213312229

- 安装环境：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
hexo-site@0.0.0 
├── @waline/hexo-next@3.0.1
├── disqusjs@3.0.3-canary.1
├── hexo-bilibili-bangumi@1.8.9
├── hexo-deployer-ali-oss@1.0.0
├── hexo-deployer-git@4.0.0
├── hexo-generator-archive@2.0.0
├── hexo-generator-baidu-sitemap@0.1.9
├── hexo-generator-category@2.0.0
├── hexo-generator-feed@3.0.0
├── hexo-generator-index@3.0.0
├── hexo-generator-searchdb@1.4.1
├── hexo-generator-sitemap@3.0.1
├── hexo-generator-tag@2.0.0
├── hexo-next-darkmode@0.1.11
├── hexo-next-valine@1.0.0
├── hexo-renderer-ejs@2.0.0
├── hexo-renderer-marked@6.2.0
├── hexo-renderer-stylus@2.1.0
├── hexo-server@3.0.0
├── hexo-symbols-count-time@0.7.1
├── hexo-tag-cloud@2.1.2
├── hexo-theme-landscape@1.0.0
├── hexo-theme-next@8.19.1
├── hexo@6.3.0
└── sakana@1.0.8
  • NPM安装与引入
1
npm i sakana -d
  • NexT 主题 _config.next.yml配置文件-自定义文件路径：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyStart: source/_data/post-body-start.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  bodyEnd: source/_data/body-end.njk
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl
  • 在/source/_data 路径下创建 body-end.njk 文件，修改注入内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<meta name="viewport" content="width=device-width">
<style>

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

<div class="sakana-box"></div>

<script src="https://cdn.jsdelivr.net/npm/sakana@1.0.8"></script>
<script>
// 取消静音
Sakana.setMute(true);

// 启动
Sakana.init({
  el:         '.sakana-box',     // 启动元素 node 或 选择器
  scale:      .5,                // 缩放倍数
  canSwitchCharacter: true,      // 允许换角色
  scale:      0.425,             // 缩放倍数
  character:  'takina',          // 启动角色 'chisato','takina' 
});
</script>
  • 重建站点测试效果
1
hexo s -g