站点加载进度条

发表于 更新于 分类于 Changyan：

在Next主题中通过使用Pace来实现加载进度条，启用的方法可以通过git clone或CDN资源。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