Hexo--NexT主题

发表于 更新于 分类于
阅读次数： 本文字数： 1.2k 阅读时长 ≈ 4 分钟

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。