站点加载进度条

在Next主题中通过使用Pace来实现加载进度条,启用的方法可以通过git cloneCDN资源。Pace Demo

通过 git clone

  1. 在NexT\source\lib目录下执行git clone
    1
    git clone https://github.com/theme-next/theme-next-pace pace
  1. 配置主题配置文件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    # Progress bar in the top during page loading.
    # Dependencies: https://github.com/theme-next/theme-next-pace
    pace: true # 启用pace
    # 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-simple
    pace_theme: pace-theme-minimal # 参考上面的themelist,进行选择

通过CDN资源链接

  1. 进行上方2的配置,启用pace并在pace_theme: 填入自己喜欢的主题
  2. 配置主题配置文件,找到如下位置配置CDN资源链接
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    # Internal version: 1.0.2
    # See: https://github.com/HubSpot/pace
    # Example:
    # pace: //cdn.jsdelivr.net/npm/pace-js@1/pace.min.js
    # pace: //cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js
    # pace_css: //cdn.jsdelivr.net/npm/pace-js@1/themes/blue/pace-theme-minimal.css
    # pace_css: //cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/blue/pace-theme-minimal.min.css
    pace: //cdn.bootcss.com/pace/1.0.2/pace.min.js # 按此配置
    #按此配置,并修改[]中主题样式名称为对应的`pace_theme: `配置项的名称
    pace_css: //cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-[minimal].min.css
0%