发表更新技术人生8 分钟读完 (约1139字)0次访问

NexT主题个性化配置

Hexo博客的NexT主题个性化配置记录

本文中提及的站点配置文件代指位于博客站点根目录下的_config.yml文件，包含对Hexo博客本身的配置，而主题配置文件代指位于主题目录下的_config.yml文件，配置与主题相关的选项。

1.设置网站图标Favicon.ico

从网上下载或制作一张(最好是32*32)你喜欢的图标，并将文件名改为favicon.ico，放在/hexo-site/source/文件夹下，修改主题配置文件：

1
favicon: /favicon.ico

2.fork me on github ribbon

打开网页1或网页2选择一个样式，复制样式对应的代码，粘贴到themes/next/layout/_layout.swig文件的<div class="headband"></div>这一行代码下面，并将a标签的href属性改成你的github地址。

3.修改网站字体大小与行高

打开\themes\next\source\css\ _variables\base.styl文件

1
2
$font-size-base = 14px     // 修改字体大小
$line-height-base = 2      // 修改行高

4.主页和正文的文章添加阴影效果

打开\themes\next\source\css\_custom\custom.styl文件，加入以下代码

1
2
3
4
5
6
7
.post {
margin-top: 20px;
margin-bottom: 20px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

5.主页文章阅读全文按钮调整

打开\themes\next\source\css\_custom\custom.styl文件，加入以下代码

1
2
3
4
.post-button {
    margin-top: 20px;
    text-align: right;
}

6.网站访问量统计

打开主题配置文件，找到如下代码，并修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"> 访客数</i>
  site_uv_footer:
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"> 总访问量</i>
  site_pv_footer:
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-eye"> 热度</i>
  page_pv_footer: ℃

7.打赏字体不闪动

修改文件\themes\next\source\css\_common\components\post\post-reward.styl，注释以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
/*
  #wechat:hover p{
    animation: roll 0.1s infinite linear;
    -webkit-animation: roll 0.1s infinite linear;
    -moz-animation: roll 0.1s infinite linear;
  }
  #alipay:hover p{
   animation: roll 0.1s infinite linear;
    -webkit-animation: roll 0.1s infinite linear;
    -moz-animation: roll 0.1s infinite linear;
  }
  */

8.自定义鼠标样式

打开themes\next\source\css\_custom\custom.styl文件，添加如下代码：

1
2
3
4
5
6
* {
    cursor: url("图片地址"),auto!important
}
:active {
    cursor: url("图片地址"),auto!important
}

注：url中的图片必须为ico文件

9.修改两侧留白的大小

打开\themes\next\source\css\_variables\base.styl文件，找到如下代码修改：

1
2
3
4
5
$main-desktop                   = 1160px   //
$main-desktop-large             = 1200px

$content-desktop                = 900px    //低于1600px的宽度
$content-desktop-large          = 900px    //大于1600px的宽度

10.修改顶部加载条样式

打开themes\next\source\css\_custom\custom.styl文件，添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
.pace .pace-progress {
    background: #0d0c0c;  /*进度条颜色*/
    height: 3px;
}
.pace .pace-progress-inner {
     box-shadow: 0 0 10px #0d0c0c, 0 0 5px     #0d0c0c;  /*阴影颜色*/
}
.pace .pace-activity {
    border-top-color: #0d0c0c;    /*上边框颜色*/
    border-left-color: #0d0c0c;    /*左边框颜色*/
}

11.h2标题底部横线

打开themes\next\source\css\_custom\custom.styl文件，添加如下代码：

1
2
3
.posts-expand .post-body h2 {
  border-bottom: 1px solid #eee;
}

12.自定义代码块样式

打开themes\next\source\css\_custom\custom.styl文件，添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
/*大代码块的自定义样式*/
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

13.网站侧边栏作者头像旋转

打开\themes\next\source\css\_common\components\sidebar\sidebar-author.styl，添加以下代码：

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
.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;

  /* 头像圆形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;

  /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束(1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ] */

  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
}

img:hover {
  /* 鼠标经过停止头像旋转
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/

  /* 鼠标经过头像旋转360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}

/* Z 轴旋转动画 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

14.修改文章中链接文本样式

修改文件themes\next\source\css\_common\components\post\post.styl，在末尾添加如下代码：

1
2
3
4
5
6
7
8
9
10
.post-body p a {
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

NexT主题个性化配置

http://blog.fcj.one/next-config.html

作者

ChangingFond

发布于

2017-09-24

更新于

2022-04-29

许可协议

#

评论

最新文章

标签

C#1
Cuda2
Deep Learning9
Elasticsearch1
Frontend3
Git1
Guava1
Java2
JavaScript2
Linux12
Markdown1
Mockito1
Person Re-ID5
ResNet1
SQL1
SQL Server2
Windows2
apache2
css1
git2
hexo6
php1
python2
vps6
论文1
×