0%

hexo-博客搭建之顶部加载进度条

发表于 更新于 分类于 Disqus：
本文字数： 995 阅读时长 ≈ 2 分钟

当访问文章页时，会在网页顶部有个页面加载的进度条：theme-next-pace。

根据项目在 Github 中的提示，共有两种方法实现。

  • 第一种是将项目直接克隆到本地指定目录，然后修改配置文件开启。

  • 第二种是通过配置 cdn ，然后接着修改配置文件启用。

可以看出第二种方法更简单，直接修改 主题配置文件：_config.next.yml 即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Progress bar in the top during page loading.
# Dependencies: https://github.com/theme-next/theme-next-pace
# For more information: https://github.com/HubSpot/pace
pace:
  enable: true
  # Themes list:
  # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
  # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
  theme: minimal

vendors:
# 此处省略中间代码...
  pace: //cdn.jsdelivr.net/npm/pace-js@1/pace.min.js
  pace_css: //cdn.jsdelivr.net/npm/pace-js@1/themes/blue/pace-theme-minimal.css

这里我尝试配置过 cdn.bootcdn.net 源，但发现没有任何效果，估计与源库有关：npm/pace-js@1，在 BootCDN 并未找到相同路径的库文件，在这儿也只是记录下足迹，也希望有了解的大佬告知下其他可配置的国内源。

1
2
3
4
vendors:
# 此处省略中间代码...
  pace: //cdn.bootcdn.net/ajax/libs/pace/1.0.2/pace.js
  pace_css: //cdn.bootcdn.net/ajax/libs/pace/1.0.2/themes/black/pace-theme-minimal.css

嗯… 因为加这玩意儿即耗电也费流量，我也给屏蔽了… 谁让我是节能减排、绿色环保人士来[哈嘿]。