hexo优化之路-进阶篇

我这篇文章主要是讲解以 next 主题的各项高度定制设置，让自己的博客更加美化。（网上有很多关于 Next 主题的配置方法，我主要是把网上找到的各个设置做个汇总吧.NexT 是一款简洁优雅且易于使用的主题，配置比较简单，只需要稍微修改配置文件即可，功能也比较全，分类、归档、标签显示明了，让人一看就知道干嘛的

进度条

下载 module 文件,进入~/blog/themes/next` 目录，输入以下指令

1

git clone https://github.com/theme-next/theme-next-pace source/lib/pace

修改配置文件
1

pace: true
设置进度条样式,打开http://github.hubspot.com/pace/docs/welcome/ 选择自己喜欢的样式进行样式配置
1

pace_theme: pace-theme-flash # 这里可以选择替换成自己喜欢的样式

设置侧边栏设置圆形可旋转头像

　　设置方法：

　　找到生成的 Hexo 目录themes/next/source/css_common/components/sidebar下的sidebar-author.styl，将里面的 css 样式内容全部替换为：

 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
29
30
31
32
33


.site-author-image {
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;

  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  transition: 1.4s all;
}

.site-author-image:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -transform: rotate(360deg);
}

.site-author-name {
  margin: $site-author-name-margin;
  text-align: $site-author-name-align;
  color: $site-author-name-color;
  font-weight: $site-author-name-weight;
}

.site-description {
  margin-top: $site-description-margin-top;
  text-align: $site-description-align;
  font-size: $site-description-font-size;
  color: $site-description-color;
}