Hexo系列3：博客优化

最近把博客做了一些修改和优化，将做的一些修改记录如下：

• 把侧边栏头像变成圆形，并且鼠标停留在上面发生旋转效果。

修改主题文件d:hexo\next\source\css\_common\components\sidebar\sidebar-author.styl中的内容如下

.site-author-image {
  display: block;
  margin: 0 auto;
  max-width: 96px;
  height: auto;
  border: 2px solid #333;
  padding: 2px;

  /* start*/
  border-radius: 50%
  webkit-transition: 1.4s all;
  moz-transition: 1.4s all;
  ms-transition: 1.4s all;
  transition: 1.4s all;
  /* end */
}

/* start/
.site-author-image:hover { 
  background-color: #55DAE1;
  webkit-transform: rotate(360deg) scale(1.1);
  moz-transform: rotate(360deg) scale(1.1);
  ms-transform: rotate(360deg) scale(1.1);
  transform: rotate(360deg) scale(1.1);
}
/* end */

//下面的文件保持原样

• 修改字体

修改themes\next\source\css\_variable\custome.styl文件如下：

// 标题，修改成你期望的字体族
$font-family-headings = Georgia, sans

// 修改成你期望的字体族
$font-family-base = "Microsoft YaHei", Verdana, sans-serif

// 代码字体
$code-font-family = "Input Mono", "PT Mono", Consolas, Monaco, Menlo, monospace

// 正文字体的大小
$font-size-base = 16px

// 代码字体的大小
$code-font-size = 14px

• 修改代码块中字体大小

找到\themes\next\source\css\_common\components\highlight\highlight.styl ，修改font-size属性即可

$code-block
  background: highlight-background
  margin: 20px 0
  padding: 15px
  overflow: auto
  //修改代码字体大小
  font-size 14px
  color: highlight-foreground
  line-height:  $line-height-code-block

• 修改顶部菜单的字体大小

修改\themes\next\source\css\_common\components\header\menu.styl文件的font-size属性即可

• 添加文章热度的请看这里
• 为博客创建留言功能，请看这里
• 设置社交连接，参考这里
• 文章开启打赏功能，看这里
• next主题官方指南