Hexo+Next 主页以及侧边栏头像旋转

最近优化自己的博客，换了个NexT主题。使用的是NexT主题的Muse样式。
我的博客
在进行了NexT主题的安装和常规设置成功之后。这里讲解如何在首页author上方显示圆形头像，在鼠标放上的时候头像进行旋转以及侧边栏头像的圆形和旋转设置。

主页显示头像

1. 主页设置显示头像
   Muse样式默认主页是不显示头型的，只显示作者、简介和菜单。
   打开主题配置文件Blog—>themes—>next—>_config.yml，找到custom_logo字段
   1.1 打开主页header上头像的显示，将enabled设为true.
   1.2 image必须是图片的网络地址
   实现了头像显示
   

   custom-logo.png

2. 现在首页头部显示头像是正方形的，根据字段custom-logo，找到NexT主题关于custom-logo的设置。发现了_logo.styl文件，目录为Blog—>themes—>next—>source—>css—>_schemes—>Muse—>_logo.styl
   要实现圆形显示，而且实现旋转效果。
   对于构建网页来说，CSS文件是控制网页内容如何显示的。
   打开_logo.styl文件，发现custom-logo-image字段，猜测应该就是对应头像了，增加对于头像custom-logo-image的设置。
   添加代码如下代码即可

.custom-logo-image {
  margin: 0 auto;
  padding: 5px;
  max-width: 150px;
  background: white;
  /* start*/
  border-radius: 50% #头像圆角
  transition: 2.5s all; #旋转动画时间
}

.custom-logo-image:hover {
  transform: rotate(360deg); #旋转角度
}
/* end */

3. 在Blog目录重启服务即可实现。
   最终实现效果展示：

   
   custom_logo.gif

侧边栏头像旋转

侧边栏显示的头像设置成圆形，并且鼠标滑过头像旋转的设置和主页的头像设置差不多。进入CSS文件，找到关于sidebar中关于作者的设置文件。NexT主题关于sidebar的基础设置位于文件夹_common中，改变此文件夹内文件，会改变所有主题的相对应设置。

1. 打开Blog—>themes—>next—>source—>css—>_common—>components—>sidebar—>sidebar-author.styl
2. 修改关于.site-author-image的设置，改成如下代码

.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;
  /* start*/
  border-radius: 60%
  transition: 2.5s all;
}

.site-author-image:hover {
  background-color: #55DAE1; #背景颜色 
  transform: rotate(360deg);
}
/* end */

3. 重新启动服务器Blog:hexo s

传送门：博客