快速添加itorr/sakana: 🐟「Sakana!」石蒜模拟器 (github.com)到你的hexo blog

以下引用git中的介绍

  • 按住立牌拖拽、松手后立牌会向反方向弹跳
  • 点击底座切换角色
  • 手机开启陀螺仪权限、摇一摇可甩动立牌 #12 待解决
  • 自走模式，以随机间隔、施加一个大小随机的力 #7 @milkybird98
  • 音效，在适当区间松手时的语音效果 #9 @zthxxx
  • 多语言支持 #26 @dsrkafuu

1, 定位需要修改的文件

我的主题是butterfly, 不过其他主题做法应该差不多.

首先找到你主题中的footer.pug文件.

这里我已butterfly为例, 这个文件在layout目录下, 当然网上也有很多小伙伴是添加到widget里面的, 反正思路都是一样哒.

2, 添加石蒜模拟器

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
29
30
31
32
#footer-wrap
  if theme.footer.owner.enable
    - var now = new Date()
    - var nowYear = now.getFullYear()
    if theme.footer.owner.since && theme.footer.owner.since != nowYear
      .copyright!= `©${theme.footer.owner.since} - ${nowYear} By ${config.author}`
    else
      .copyright!= `©${nowYear} By ${config.author}`
  if theme.footer.copyright
    .framework-info
      span= _p('footer.framework') + ' '
      a(href='https://hexo.io')= 'Hexo'
      span.footer-separator |
      span= _p('footer.theme') + ' '
      a(href='https://github.com/jerryc127/hexo-theme-butterfly')= 'Butterfly'
  if theme.footer.custom_text
    .footer_custom_text!=`${theme.footer.custom_text}`
	
  // 添加git上面的代码到这里
  // div(class="sakana-box" style='position:fixed;bottom:10px;right:10px;')
  div(class="sakana-box" style='position:fixed;bottom:10px;right:10px;transform-origin: 100% 100%;')
  script.
    function initSakanaTest() {
      // 这里是一些定制化参数, 可以参考下面
      Sakana.init({
        el:         '.sakana-box',     // 启动元素 node 或 选择器
        scale:      .5,                // 缩放倍数
        canSwitchCharacter: true,      // 允许换角色
      })
      Sakana.setMute(false);
    }
  script(onload = 'initSakanaTest()' src="https://cdn.jsdelivr.net/npm/sakana")

3, 一些设置

以下直接引用自git介绍页

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// 设定静音
Sakana.setMute(true);

// 获取静音状态
const { isMute } = Sakana.Voices;

// 启动
const sakana = Sakana.init({
  // 选项: 默认值
  el:         '.sakana-box',     // 启动元素 node 或 选择器
  character:  'takina',          // 启动角色 'chisato','takina' 
  inertia:    0.01,              // 惯性
  decay:      0.99,              // 衰减
  r:          60,                // 启动角度
  y:          10,                // 启动高度
  scale:      1,                 // 缩放倍数
  translateY: 0,                 // 位移高度
  canSwitchCharacter: false,     // 允许换角色
  onSwitchCharacter(character){  // 切换角色回调
    console.log(`${character} dayo~`);
  },
});

// 设定归零角度
sakana.setOriginRotate(10);

// 获取角色运行状态
const v = sakana.getValue();

// 确保运行
sakana.confirmRunning();

// 切换角色
sakana.switchCharacter();

// 暂停动作
sakana.pause();

// 恢复动作
sakana.play();

// 切换特定角色
sakana.setCharacter('chisato');

完成以上步骤以后直接部署到自己的blog就好啦~ 祝大家开心.