Hexo NexT主题修改文章标题样式

发表于 | 更新于 | 分类于 | 热度 ℃
| 字数统计 389 字 | 阅读时长 1 分钟

闲逛的时候，发现猪猪娱乐博客里面文章的标题样式修改过，也很好看。但是在主页样式保持不变。于是尝试找了一下原网页的CSS代码并应用在自己的博客里面。

效果预览/Preview

主页效果（保持不变）

preview-主页标题效果

具体一篇文章标题效果

preview-博文标题效果

添加方法

进入主题目录

hexo\themes\next\source\css\_common\components\post

修改post.styl文件，在配置的后面添加下面的代码。该文件是博文的样式表。

注意如果想把主页标题样式一同修改，可以用把.page-post-detail去掉

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*添加下面的CSS代码来修改博客标题样式*/
.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;

  +mobile() {
    font-size: 22px;
  }
}
/*添加上面的CSS代码来修改博客标题样式*/

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

测试用html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>css test</title>
    <style media="screen">
    .page-post-detail .post-title {
      background-color:#b9d3ee;
      border-radius:.3em;
      line-height:1em;
      padding-bottom:.12em;
      padding-top:.12em;
      box-shadow:2px 2px 7px #9fb6cd
    }
    </style>
  </head>
  <body>
  <span class="post-title">Hexo+nexT主题搭建个人博客</span>


<div class="page-post-detail">

  <h1 class="post-title" itemprop="name headline">小巧但功能丰富的录屏软件LICEcap</h1>

</div>

  </body>
</html>
  • 本文作者：小飞机
  • 本文链接： posts/f6157236/
  • 版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 CN 许可协议。转载请注明出处！
------本文结束感谢阅读------
坚持原创技术分享，您的支持将鼓励我继续创作！
显示 Gitment 评论
0%