博客添加石蒜模拟器

通过修改主题文件添加

添加itorr/sakana: 🐟「Sakana!」石蒜模拟器 (github.com)

  • 以anzhiyu主题为例

  • 在主题文件layout\includs\footer.pug最后添加下列代码即可

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
#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,                // 缩放倍数
        character:  'chisato',
        canSwitchCharacter: true,      // 允许换角色
      })
      Sakana.setMute(false);
    }
  script(onload = 'initSakanaTest()' src="https://cdn.jsdelivr.net/npm/sakana")

通过插件添加

概述

使用衍生版本 🐟「Sakana! Widget」

此 Hexo 插件用于在渲染 HTML 时将 Sakana! Widget 组件注入进 body 内，以非侵入式方式加载石蒜组件。

安装

1
npm install hexo-sakana --save

配置

在 _config.yml 或 _config.[theme].yml 中添加配置。

可自行修改

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
sakana:
  # 默认角色
  character: takina
  # 是否启用
  enable: true
  # 是否在移动端启用
  enable_mobile: false
  #  组件大小，默认为 200
  size: 200
  # 自适应容器大小 （最小 120px）
  # 另见：https://github.com/dsrkafuu/sakana-widget/blob/main/README.zh.md#%E8%87%AA%E5%8A%A8%E7%BC%A9%E6%94%BE
  autoFit: false
  # 组件据底部距离，需填写单位或百分号
  bottom: 0px
  # 是否启用控制栏
  controls: true
  # 线条设置
  stroke:
    # 颜色
    color: "#b4b4b4"
    # 粗细
    width: 10
  # 停止动画的阈值
  threshold: 0.1
  # 旋转角度
  rotate: 0
  # 自定义角色
  # customCharacters:
  #   - base: takina
  #     name: takina1
  #     ...

配置文件参考：https://github.com/dsrkafuu/sakana-widget/blob/main/README.zh.md