Hexo之NexT主题中设置加载进度条

---

前言

• Hexo版本：4.2.0
• NexT版本：7.7.1
• GitHub：theme-next-pace
• 各种进度条样式参考：Hexo博客NexT主题美化之顶部加载进度条

---

安装部署

1）进入NexT主题文件夹

$ cd themes/next/
$ ls
_config.yml  docs/        languages/  LICENSE.md    README.md  source/
crowdin.yml  gulpfile.js  layout/     package.json  scripts/

2）克隆Github仓库（如果使用CDN可跳过此步骤）

将仓库克隆至themes/next/source/lib路径下

git clone https://github.com/theme-next/theme-next-pace source/lib/pace

3）配置NexT中的_config.xml

开启pace选项

# 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: false
  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

4）配置进度条CDN地址

在NexT主题的_config.xml文件中找到vendors选项，设置pace的cdn地址（本人设置的进度条为黑色主题，可以在jsdelivr中找到对应的样式最新版cdn地址）

vendors:
  ...
  pace: https://cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js
  pace_css: https://cdn.jsdelivr.net/npm/pace-js@1.0.2/themes/black/pace-theme-loading-bar.css

---

End~