hexo-next主题美化之顶部加载条

|
| 字数统计: 254

效果图

img

教程

  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
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
682  # Progress bar in the top during page loading.
683  pace: true
684  # Themes list:
685  #pace-theme-big-counter
686  #pace-theme-bounce
687  #pace-theme-barber-shop
688  #pace-theme-center-atom
689  #pace-theme-center-circle
690  #pace-theme-center-radar
691  #pace-theme-center-simple
692  #pace-theme-corner-indicator
693  #pace-theme-fill-left
694  #pace-theme-flash
695  #pace-theme-loading-bar
696  #pace-theme-mac-osx
697  #pace-theme-minimal
698  # For example
699  # pace_theme: pace-theme-center-simple
700  pace_theme: pace-theme-center-atom
...
注意注释
773    # Internal version: 1.0.2
774    # See: https://github.com/HubSpot/pace
775    # Or use direct links below:
776    # pace: //cdn.bootcss.com/pace/1.0.2/pace.min.js
777    # pace_css: //cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-flash.min.css
778    #pace: //cdn.bootcss.com/pace/1.0.2/pace.min.js
779    #pace_css: //cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-flash.min.css
  1. 不同的样式效果图：
  2. pace-theme-big-counter

img

  • pace-theme-bounce

img

  • ace-theme-barber-shop

img

  • pace-theme-center-atom

img

  • pace-theme-center-circle

img

  • pace-theme-center-radar

img

  • pace-theme-center-simple

img

  • pace-theme-corner-indicator

img

  • pace-theme-loading-bar

img