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主题官方指南