Hexo博客NexT主题美化之顶部加载进度条

本文最后更新于:2024年6月17日 下午

效果图:

image


教程:

  1. 进入博客文件夹的/themes/next文件夹下
1
cd /themes/next
  1. 下载安装Progress module,如下
1
git clone https://github.com/theme-next/theme-next-pace source/lib/pace
  1. /themes/next/_config.yml中设置,如下
1
2
3
4
5
6
7
8
9
# Progress bar in the top during page loading.
# Dependencies: https://github.com/theme-next/theme-next-pace
pace: true #是否开启进度条
# Themes list:
# pace-theme-big-counter | pace-theme-bounce | pace-theme-barber-shop | pace-theme-center-atom
# pace-theme-center-circle | pace-theme-center-radar | pace-theme-center-simple | pace-theme-corner-indicator
# pace-theme-fill-left | pace-theme-flash | pace-theme-loading-bar | pace-theme-mac-osx | pace-theme-minimal
# For example
pace_theme: pace-theme-center-atom #选择进度条样式
  1. 不同的样式效果图:
  • pace-theme-big-counter image

  • pace-theme-bounce
    image

  • pace-theme-barber-shop image

  • pace-theme-center-atom image

  • pace-theme-center-circle image

  • pace-theme-center-radar image

  • pace-theme-center-simple image

  • pace-theme-corner-indicator image

  • pace-theme-fill-left image

  • pace-theme-flash image

  • pace-theme-loading-bar image

  • pace-theme-mac-osx image

  • pace-theme-minimal image

后记:

  • 我的网络时好时坏的,所以进度条也是录的时快时慢,请大家见谅。
  • 想知道怎么在 Mac 下高效的制作 gif 动图的小伙伴请移步至 Mac 屏幕录制 GIF 动图
  • 为了让大家可以直观的查看进度条的效果,因此我录制了 gif 动图,如果您觉得这对您有帮助,请随意打赏或评论点赞,谢谢大家。


如果这篇文章对你有帮助,或者想给我微小的工作一点点资瓷,请随意打赏。
潘高 微信支付

微信支付

潘高 支付宝

支付宝


Hexo博客NexT主题美化之顶部加载进度条
https://blog.pangao.vip/Hexo博客NexT主题美化之顶部加载进度条/
作者
潘高
发布于
2019年2月22日 下午
更新于
2024年6月17日 下午
许可协议