正文

  1. 访问 pace.js 官网
  2. 选择加载条的颜色：例如 #F5c2D1
  3. 选择加载条样式，例如 “Corner Indicator”，点击 Download 下载。
  4. 将下载的 .css 文件放入 <project>/source/css/ 下。
  5. 编辑 _config.butterfly.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Loading Animation (加載動畫)
preloader:
  enable: true
  # source
  # 1. fullpage-loading
  # 2. pace (progress bar)
  source: 2
  # pace theme (see https://codebyzach.github.io/pace/)
  pace_css_url:

# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
 inject:
  head:
    - <link rel="stylesheet" href="/css/corner-indicator.css?v1">
  bottom:
    - <script src="https://cdn.jsdelivr.net/npm/pace-js@latest/pace.min.js"></script>

参考资料