通过修改hexo的css配置文件，我们可以很方便的修改博文的标题.

参考代码：

1
2
vi ./themes/next/source/css/_common/components/post/post.styl
然后在 @import 之前添加下面的代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* Hexo NexT主题修改文章标题样式 */
.page-post-detail .post-title {
  font-size: 26px;
  text-align: center;
  word-break: break-word;
  font-weight: $posts-expand-title-font-weight
  background-color: #b9d3ee;
  border-radius:.3em;
  line-height:1em;
  padding-bottom:.12em;
  padding-top:.12em;
  box-shadow:2px 2px 7px #9fb6cd;
}

...

@import "post-expand";
@import "post-collapse";
@import "post-type";

效果预览：

蓝色底色

Bonus: 下面的代码可以为鼠标划过标题设置颜色加深

1
2
3
4
5
6
7
8
9
10
11
12
/* 文章内链接文本样式 */
/*将链接文本设置为蓝色，鼠标划过时文字颜色加深，并显示下划线。*/
.post-body p a{
  color: #0593d3;
  border-bottom: none;

  &:hover {
    // color: #0477ab;
	color: #ff106c
    text-decoration: underline;
  }
}