0%

Hexo--NexT主题

NexT主题简介

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

我的配置

多说评论和百度统计

  • NexT主题的_config.yml,配置方式参考Hexo–添加多说评论插件和百度统计插件
    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。
---------------- The End ----------------

欢迎关注我的其它发布渠道