官方文档

简单应用

  • 引入javascript文件
  • 主题配置文件_config.butterfly.yml bottom设置项
1
2
3
4
5
6
7
8
9
10
11
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    # 自定义css

  bottom:
    # 自定义js
    # 网站平滑滚动
    - <script async src="https://npm.onmicrosoft.cn/naokuo-blog@1.2.10/js/SmoothScroll.min.js"></script>

高级应用

  1. 主题配置文件_config.butterfly.yml写入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 页面平滑滚动
smoothscroll:
  enable: true #控制开关
  smoothscroll_js: https://npm.onmicrosoft.cn/naokuo-blog@1.2.10/js/SmoothScroll.min.js
  frameRate: 150 # [Hz]
  animationTime: 400 # [ms]
  stepSize: 100 # [px]
  accelerationDelta: 50  # 50
  accelerationMax: 3   # 3
  keyboardSupport: true  # option
  arrowScroll: 50    # [px]
  pulseAlgorithm: true # true
  pulseScale: 4 # 4
  pulseNormalize: 1 # 1
  fixedBackground: true # 背景固定
  • 参数释义
参数默认释义
enabletrue/false【必选】控制开关
smoothscroll_jsURLsmoothscroll CDN
frameRate150帧速率
animationTime400动画持续时间
stepSize100步距
accelerationDelta50加速度增量
accelerationMax3加速度最大值
keyboardSupporttrue/false【必选】键盘支持控制开关
arrowScroll50键盘滚动步距
pulseAlgorithmtrue/false【必选】脉冲算法控制开关
pulseScale4脉冲标度
pulseNormalize1脉冲正常化
fixedBackgroundtrue/false【必选】固定背景控制开关
  • 博主的配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 页面平滑滚动
smoothscroll:
  enable: true #控制开关
  smoothscroll_js: https://npm.onmicrosoft.cn/naokuo-blog@1.2.10/js/SmoothScroll.min.js
  frameRate: 300 # 150 [Hz]
  animationTime: 500 # 400 [ms]
  stepSize: 150 # 100 [px]
  accelerationDelta: 100 # 50
  accelerationMax: 3 # 3
  keyboardSupport: true  # option
  arrowScroll: 50 # 50 [px]
  pulseAlgorithm: true # true
  pulseScale: 4 # 4
  pulseNormalize: 1 # 1
  fixedBackground: true # 背景固定
  1. 在路径themes/anzhiyu/layout/includes/third-party/smoothscroll.pug 新建smoothscroll.pug
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
- const { frameRate, animationTime, stepSize, accelerationDelta, accelerationMax, keyboardSupport, arrowScroll, pulseAlgorithm, pulseScale, pulseNormalize, fixedBackground } = theme.smoothscroll

script.
  window.SmoothScrollOptions = { 
    frameRate: !{frameRate ? frameRate : 150 },
    animationTime: !{animationTime ? animationTime : 400 },
    stepSize: !{stepSize ? stepSize : 100 },
    accelerationDelta: !{accelerationDelta ? accelerationDelta : 50 },
    accelerationMax: !{accelerationMax ? accelerationMax : 3 },
    keyboardSupport: !{keyboardSupport},
    arrowScroll: !{arrowScroll ? arrowScroll : 50 },
    pulseAlgorithm: !{pulseAlgorithm},
    pulseScale: !{pulseScale ? pulseScale : 4 },
    pulseNormalize: !{pulseNormalize ? pulseNormalize : 1 },
    fixedBackground: !{fixedBackground}
  }

script(async src=url_for(theme.smoothscroll.smoothscroll_js))
  1. 在路径themes/anzhiyu/layout/includes/additional-js.pug 引入
1
2
3
//- 页面平滑滚动
if theme.smoothscroll.enable
  != partial("includes/anzhiyu/smoothscroll", {}, { cache: true })

API 自定义选项

  • 以下为可选项（可不用配置）
自定义可选项
  1. Options
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
    // Scrolling Core(滚动核心)
    animationTime    : 400, // [ms]
    stepSize         : 100, // [px]

    // Acceleration(加快)
    accelerationDelta : 50,  // 50
    accelerationMax   : 3,   // 3

    // Keyboard Settings(键盘设置)
    keyboardSupport   : true,  // option
    arrowScroll       : 50,    // [px]

    // Pulse (less tweakable) 脉冲（不太可调整）
    // ratio of "tail" to "acceleration" “尾部”与“加速度”之比
    pulseAlgorithm   : true,
    pulseScale       : 4,
    pulseNormalize   : 1,

    // Other(其他)
    touchpadSupport   : false, // ignore touchpad by default 默认情况下忽略触摸板
    fixedBackground   : true, 
    excluded          : ''    
}
  1. 如果要在加载库（同步版本）后设置自定义选项：
1
2
<script src="SmoothScroll.js"></script>
<script>SmoothScroll({ keyboardSupport: false })</script>
  1. 如果要在加载库（异步版本）之前设置自定义选项：
1
2
<script>window.SmoothScrollOptions = { keyboardSupport: false }</script>
<script async src="SmoothScroll.js"></script>