本文最后更新于:星期日, 五月 31日 2020, 2:37 下午

效果图:

image


教程:

  1. 进入博客文件夹的/themes/next文件夹下

    cd /themes/next
  2. 下载安装Progress module,如下

    git clone https://github.com/theme-next/theme-next-pace source/lib/pace
  3. /themes/next/_config.yml中设置,如下

    # 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 #选择进度条样式
  4. 不同的样式效果图:

  • 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主题美化之顶部加载进度条
文章作者:潘高
发布时间:2019年02月21日 - 21:32:19
最后更新:2020年05月31日 - 14:37:59
原始链接:https://blog.pangao.vip/Hexo%E5%8D%9A%E5%AE%A2NexT%E4%B8%BB%E9%A2%98%E7%BE%8E%E5%8C%96%E4%B9%8B%E9%A1%B6%E9%83%A8%E5%8A%A0%E8%BD%BD%E8%BF%9B%E5%BA%A6%E6%9D%A1/
许可协议:署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

Hexo博客NexT主题美化之网站标题栏背景变色 上一篇
Node.js安装教程 下一篇
如果这篇文章对你有帮助,或者想给我微小的工作一点点资瓷,请随意打赏。
潘高 微信支付

微信支付

潘高 支付宝

支付宝

 目录