Hexo--NexT主题

NexT主题简介

  • NexT有着完善的使用文档,NexT官方资料
  • NexT整合了常用的插件,如评论、分享、统计;
  • 下载安装
1
2
cd ~/blog
git clone https://github.com/iissnan/hexo-theme-next themes/next

我的配置

多说评论和百度统计

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 多说配置:
# Duoshuo ShortName
duoshuo_shortname: 注册前缀
# 开启热评文章
duoshuo_hotartical: true

# 可以看到评论用户的UA信息
# Make duoshuo show UA
# user_id must NOT be null when admin_enable is true!
# you can visit http://dev.duoshuo.com get duoshuo user id.
duoshuo_info:
ua_enable: true
admin_enable: false
user_id: 0

# 百度统计配置:
# Baidu Analytics ID
# 这里只需要填写js代码中hm.js链接的参数(如下:xxxxxxx)部分,而不再需要将整个js配置到模板中
baidu_analytics: xxxxxxx

  • 百度统计代码

1
2
3
4
5
6
7
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?xxxxxxx";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();

百度分享

  • NexT主题的_config.yml,其它主题配置方式参考地址

1
2
3
4
5
6
# Baidu Share
# Available value:
# button | slide
# Warning: Baidu Share does not support https.
baidushare:
type: button

阅读次数

  • 注册LeanCloud帐号,在LeanCloud中创建应用,具体配置方式查看参考资料

  • 复制AppID以及AppKey并在NexT主题的_config.yml文件中我们相应的位置填入即可,正确配置之后文件内容像这个样子:

1
2
3
4
leancloud_visitors:
enable: true
app_id: joaeuuc4hsqudUUwx4gIvGF6-gzGzoHsz
app_key: E9UJsJpw1omCHuS22PdSpKoh
  • 这里要注意,一定要在LeanCloud中的安全中心配置Web安全域名,否则不能正常统计

字数统计和阅读时常

  • 参考资料

  • 安装hexo-wordcount插件,在站点的根目录下执行以下命令:
    npm install hexo-wordcount --save

  • 修改模板位置:themes\next\layout\_macro\post.swig,插入代码如下:

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
# 查找如下代码段:
{# LeanCould PageView #}
{% if theme.leancloud_visitors.enable %}
<span id="{{ url_for(post.path) }}" class="leancloud_visitors" data-flag-title="{{ post.title }}">
&nbsp; | &nbsp;
<span class="post-meta-item-icon">
<i class="fa fa-eye"></i>
</span>
<span class="post-meta-item-text">{{__('post.visitors')}} </span>
<span class="leancloud-visitors-count"></span>
</span>
{% endif %}

# 添加如下代码段:
# 以下部分为:字数统计、阅读时长插入代码
<span class="post-time">
&nbsp; | &nbsp;
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">字数统计:</span>
<span class="post-count">{{ wordcount(post.content) }}(字)</span>

</span>

<span class="post-time">
&nbsp; | &nbsp;
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">阅读时长:</span>
<span class="post-count">{{ min2read(post.content) }}(分)</span>

</span>
# 以上部分为:字数统计、阅读时长插入代码
  • 安装 hexo-generator-searchdb,在站点的根目录下执行以下命令:
    $ npm install hexo-generator-searchdb --save

  • NexT主题的_config.yml

1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000
  • 重新编译之后会发现左侧导航栏最下方多出一个搜索菜单

标签页和分类页

  • 默认情况下,NexT没有开启标签页和分类页功能

  • 新增标签页

使用命令hexp new page “tags” 并将页面类型设置为tags

1
2
3
4
5
---
title: 标签
date: 2016-11-17 23:03:47
type: "tags"
---

通常情况下你的标签页并不需要评论框,取消评论代码

1
2
3
4
5
6
---
title: 标签
date: 2016-11-17 23:03:47
type: "tags"
comments: false
---

在主题配置文件下的菜单设置项memu下设置,设置完成在主页导航可以看到标签导航栏

1
2
menu:
tags: /tags
  • 新增分类页

使用命令hexp new page categories 并将页面类型设置为categories

1
2
3
4
5
---
title: 分类
date: 2016-11-17 23:08:35
type: "categories"
---

通常情况下你的标签页并不需要评论框,取消评论代码

1
2
3
4
5
6
---
title: 分类
date: 2016-11-17 23:08:35
type: "categories"
comments: false
---

在主题配置文件下的菜单设置项memu下设置,设置完成在主页导航可以看到分类导航栏

1
2
menu:
categories: /categories

设定首页/归档/标签页面文章的篇数

  • 安装如下插件,在站点的根目录下执行以下命令:

1
2
3
$ npm install hexo-generator-index --save
$ npm install hexo-generator-archive --save
$ npm install hexo-generator-tag --save
  • NexT主题的_config.yml

1
2
3
4
5
6
7
8
9
10
index_generator:
per_page: 5

archive_generator:
per_page: 20
yearly: true
monthly: true

tag_generator:
per_page: 10

RSS设置

  • 安装 hexo-generator-feed,在站点的根目录下执行以下命令:
    $ npm install hexo-generator-feed --save

  • NexT主题的_config.yml

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
  • 编译后,会看到左侧头像下方会显示RSS入口

跳过指定文件的渲染

  • 如果某些资源希望放到source下,但是又不希望被编译,可以在hexo的_config.yml中增加如下配置:

1
2
3
4
skip_render:
- zabbix/** #跳过zabbix文件夹下的全部子目录和文件
- abc.html #跳过某一个具体的文件
- *.html #跳过以html结尾的文件
  • 比如我的导航菜单中的『资料』,其下面配置的资源就是我从为知笔记中导出的html。