Hexo配置Next主题

安装NexT

在其文件夹中鼠标右键,点击Git Base Here

输入命令git clone https://github.com/iissnan/hexo-theme-next themes/next

启用主题

在站点目录中（blog），打开配置文件_config.yml，将theme修改为next

启动服务

如果看到如下界面，说明成功安装了NexT主题

主题设定

在themes\next主题目录下的_config.yml文件中将scheme设定为Pisces

语言设定

在站点根目录下修改配置文件_cofig.yml中的language为zh-Hans（简体中文），可根据个人喜好修改语言

设置侧栏位置

修改主题目录下配置文件_cofig.yml中sidebar的position值,可根据个人喜好修改侧栏位置

设置头像

在站点根目录下载配置文件中新增avatar，值设置为头像的链接地址。地址可以是网络地址，也可以是本地地址（放置在站点根目录下的source/images/ 目录下）

设置文章代码主题

在主题目录下修改配置文件中的highlight_theme，默认值为nomal。可以设置为night，根据个人喜好修改文章代码主题

修改作者头像并旋转

打开\themes\next\source\css_common\components\sidebar\sidebar-author.styl，在里面添加如下代码：

.site-author-image {
  display: block;
  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: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;

  /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 
    (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/


  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
}

img:hover {
  /* 鼠标经过停止头像旋转 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/

  /* 鼠标经过头像旋转360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}

/* Z 轴旋转动画 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

好了，到此为止，我们的Hexo配置Next主题就已经完成了