hexo博客next主题个性化

发表于 | 分类于

1、添加RSS

命令行切换到站点目录下，也就是通过hexo init <folder>命令创建的。然后安装 Hexo 插件：(这个插件会放在node_modules这个文件夹里)：

1
$ npm install --save hexo-generator-feed

然后在站点目录下打开配置文件_config.yml，在末尾添加（注意在冒号后面要加一个空格，不然会发生错误）：

1
2
3
# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed

然后在站点目录下的themes目录里打开next主题文件夹里面的_config.yml(如果没有next文件夹需要先下载此主题)，在里面配置为如下样子：(就是在rss:的后面加上/atom.xml，注意在冒号后面要加一个空格)

1
2
3
4
# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml

最后就可以运行看效果。

2、修改文章内链接文本样式

打开站点目录，修改文件themes\next\source\css\_common\components\post\post.styl，在末尾添加如下css样式：

1
2
3
4
5
6
7
8
9
10
11
// 文章内链接文本样式
.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;
  }
}

其中选择.post-body是为了不影响标题，选择 p 是为了不影响首页“阅读全文”的显示样式,颜色可以自己定义。

3、修改文章底部的那个带#号的标签

修改模板/themes/next/layout/_macro/post.swig，搜索 rel="tag">#，将 # 换成<i class="fa fa-tag"></i>

4、设置作者圆形头像

修改 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
59
60
61
62
63
64
65
66
67
68
.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为循环播放) ]*/
  -webkit-animation: play 2s ease-out 1s 1;
  -moz-animation: play 2s ease-out 1s 1;
  animation: play 2s ease-out 1s 1;
  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.5s ease-out;
  -moz-transition: -moz-transform 1.5s ease-out;
  transition: transform 1.5s 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);
  }
}
.site-author-name {
  margin: $site-author-name-margin;
  text-align: $site-author-name-align;
  color: $site-author-name-color;
  font-weight: $site-author-name-weight;
}
.site-description {
  margin-top: $site-description-margin-top;
  text-align: $site-description-align;
  font-size: $site-description-font-size;
  color: $site-description-color;
}

5、设置文中代码样式

打开\themes\next\source\css\_custom\custom.styl，向里面加入：(颜色可以自己定义)

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

6、添加背景图

在 themes/next/source/css/_custom/custom.styl 中添加如下代码：

1
2
3
4
5
6
7
body{
    background:url(/images/bg.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
}

图片放在themes/next/source/images目录下

7、设置页面的透明度

在 themes/next/source/css/_custom/custom.styl 中添加如下代码：

1
2
3
.post-block {
    background:rgba(255, 255, 255, 0.90) none repeat scroll !important;
}

8、修改Logo字体

在 themes/next/source/css/_custom/custom.styl 中添加如下代码：

1
2
3
4
5
6
7
8
@font-face {
    font-family: skh;
    src: url('/fonts/skh.ttf');
}
.site-title {
    font-size: 30px !important;
	font-family: 'skh' !important;
}

其中字体文件在 themes/next/source/fonts 目录下，里面有个 .gitkeep 的隐藏文件，打开写入要保留的字体文件，比如我的是就是写入 skh.ttf，具体字库自己从网上下载，推荐一个找字网下载自己喜欢的字体。

9、网站底部添加访问量

打开\themes\next\layout\_partials\footer.swig文件，在copyright前加上如下代码：

1
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

然后再合适的位置添加显示统计的代码：

1
2
3
4
5
<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
  本站访客数:<span id="busuanzi_value_site_uv"></span>
</span>
</div>

其中有两种不同计算方式的统计代码：

  • pv的方式，单个用户连续点击n篇文章，记录n次访问量
1
2
3
<span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
  • uv的方式，单个用户连续点击n篇文章，只记录1次访客数
1
2
3
<span id="busuanzi_container_site_uv">
  本站总访问量<span id="busuanzi_value_site_uv"></span>次
</span>

10、设置字体大小

打开\themes\next\source\css\ _variables\base.styl文件，将$font-size-base改成16px，如下所示：

1
$font-size-base=16px

11、实现字数统计和阅读时长统计功能

在站点目录下安装 hexo-wordcount：

1
$ npm install hexo-wordcount --save

然后在主题的配置文件中，配置如下：

1
2
3
4
5
6
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true

12、设置动画效果

NexT 默认开启动画效果，效果使用 JavaScript 编写，因此需要等待 JavaScript 脚本完全加载完毕后才会显示内容。如果在乎速度，可以将设置此字段的值为 false 来关闭动画。打开主题配置文件，搜索 use_motion，根据需求设置值为 true 或者 false 即可：

1
2
use_motion: true  # 开启动画效果
use_motion: false # 关闭动画效果

13、设置背景动画

NexT 自带两种背景动画效果。打开主题配置文件，搜索 canvas_nest 或 three_waves，根据需求设置值为 true 或者 false 即可，只能同时开启一种背景动画效果：

1
2
3
4
5
6
7
8
# canvas_nest
canvas_nest: true //开启动画
canvas_nest: false //关闭动画


# three_waves
three_waves: true //开启动画
three_waves: false //关闭动画

14、内容分享服务JiaThis

打开主题配置文件，添加/修改字段 jiathis，值为 true。

1
2
# JiaThis 分享服务
jiathis: true

15、设置阅读全文按钮

在首页显示一篇文章的部分内容，并提供一个链接跳转到全文页面是一个常见的需求。 NexT 提供三种方式来控制文章在首页的显示方式。 也就是说，在首页显示文章的摘录并显示 阅读全文 按钮，可以通过以下方法：

  1. 在文章中使用 <!-- more --> 手动进行截断，Hexo 提供的方式。推荐
  2. 在文章的 front-matter 中添加 description，并提供文章摘录。
  3. 自动形成摘要，在主题配置文件中添加：
1
2
3
auto_excerpt:
  enable: true
  length: 150

默认截取的长度为 150 字符，可以根据需要自行设定

更多个性设置参考资料

hexo官网
next主题官网
hexo的next主题个性化教程：打造炫酷网站