Hexo Next 配置设置

发表于 更新于 分类于 阅读次数： 本文字数： 22k 阅读时长 ≈ 20 分钟
Hexo NexT 配置设置

_config.yml是Hexo配置文件。 _config.next.yml是NexT配置文件。

[TOC]

本博客用到的

根目录_config.yml

1

根目录创建_config.next.yml

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
# 页面菜单
# next默认只有两个页面菜单，首页home和归档archives，搜索menu我们按需选择。

menu:
  home: / || home #首页
  about: /about/ || user #关于
  tags: /tags/ || tags #标签
  categories: /categories/ || th #分类
  archives: /archives/ || archive #归档
  #schedule: /schedule/ || calendar #日程表
  sitemap: /sitemap.xml || sitemap #站点地图
  #commonweal: /404/ || heartbeat #公益404

# 添加站点访问人数和总访问量
# 修改next主题配置文件，搜索busuanzi_count
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

# 主题选择
# Schemes
# scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

# 添加字数统计及阅读时长
symbols_count_time:
  separated_meta: true  # 是否换行显示 字数统计 及 阅读时长
  item_text_post: true  # 文章 字数统计 阅读时长 使用图标 还是 文本表示
  item_text_total: true # 博客底部统计 字数统计 阅读时长 使用图标 还是 文本表示
  awl: 4
  wpm: 275

# 评论Gitalk插件
gitalk:
  enable: true
  github_id: ing # GitHub repo owner
  repo: ing.github.io # Repository name to store issues
  client_id: 9f # GitHub Application Client ID
  client_secret: 70e86da6f614b3 # GitHub Application Client Secret
  admin_user: ing # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
  distraction_free_mode: true # Facebook-like distraction free mode
  # Gitalk's display language depends on user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you can set a force language value
  # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
  language: zh-CN


# 代码块增加一件复制
# 该功能next主题已经内置，我们只要打开就行，主题配置文件搜索copy_button：
# 复制模式mac主题
# 就在上面一件复制代码的下面
codeblock:
  copy_button:
    enable: true #原始false
    # Show text copy result.
    show_result: true #原始false
    # Available values: default | flat | mac
    style: mac


# 增加打赏功能
# 这个也是next具备了。先把需要的收款码放到/themes/next/source/images里面。
reward_settings:
  # If true, reward will be displayed in every article by default.
  enable: true
  animation: true
  #comment: Donate comment here.
reward:
  wechatpay: /images/wechatpay.png
  alipay: /images/alipay.png
  #bitcoin: /images/bitcoin.png

# 增加版权信息
creative_commons:
  license: by-nc-sa
  sidebar: false #首页边栏是否显示
  post: true #文章底部是否显示
  language:

# 取消动画
# 主题站点配置将motion下的enable参数设置为false即可关闭页面动画
motion:
  enable: false

# Hexo Next主题添加友情链接
# 在根目录下的/theme/next/_config.yml文件中搜索Blog rolls，在下面配置相应的网站名和网站链接即可：
# Blog rolls
links_settings:
  icon: fa fa-globe
  title: 友情链接
  # Available values: block | inline
  layout: block
links:
  #Title: https://example.com
  小佳: https://d100972.github.io

# 搜索
local_search:
  enable: true

RSS订阅设置

什么？大家都不知道什么是RSS？！！！
好吧，其实…本博主也不知道emmm，大家可以看看知乎上有关RSS的文章
PS：加上好看就完事了不是,计较干啥
首先，我们在终端命令行进入blog所在的目录，运行：

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

接着，打开站点配置文件，在文件的末尾添加：

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

然后打开主题配置文件，搜索rss，将其设置成如下所示，注意冒号后要加上一个空格

1
2
3
4
# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link, and install hexo-generator-feed: `npm install hexo-generator-feed --save`.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml

添加本站运行时间

修改**/blog/themes/next/layout/_partials/footer.swig**文件，在末尾加入如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<br />
<!-- 网站运行时间的设置 -->
<span id="timeDate">载入天数...</span>
<span id="times">载入时分秒...</span>
<script>
    var now = new Date();
    function createtime() {
        var grt= new Date("04/21/2019 15:54:40");//此处修改你的建站时间或者网站上线时间
        now.setTime(now.getTime()+250);
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
        document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";
        document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
    }
setInterval("createtime()",250);
</script>

添加字数统计及阅读时长

1.安装hexo-symbols-count-time

在博客文件夹里执行命令：

1
npm install hexo-word-counter --save

2.修改相关配置文件

  • 在站点配置文件添加：
1
2
3
4
5
6
7
symbols_count_time:
 #文章内是否显示
  symbols: true
  time: true
 # 网页底部是否显示
  total_symbols: true
  total_time: true

  • 在Next主题配置文件修改

    搜索symbols_count_time

1
2
3
4
5
6
symbols_count_time:
  separated_meta: true  # 是否换行显示 字数统计 及 阅读时长
  item_text_post: true  # 文章 字数统计 阅读时长 使用图标 还是 文本表示
  item_text_total: true # 博客底部统计 字数统计 阅读时长 使用图标 还是 文本表示
  awl: 4
  wpm: 275

设置hexo主题

1、选择hexo主题，到github上下载主题放到themes文件夹下
2、修改_config.yml里的theme为该文件夹名称

1
2
3
4
5
6
7
git clone https://github.com/theme-next/hexo-theme-next themes/next
rm -rf ./themes/next/.git
git add .
git rm --cached themes/next
git rm -r --cached .
git commit -m "backup NexT"
git push origin master

Hexo Next主题添加友情链接

在根目录下的/theme/next/_config.yml文件中搜索Blog rolls，在下面配置相应的网站名和网站链接即可：

B32BFB53-2B9F-4AD3-AFB5-9DA33BEBFB37

3EE981B9-D4CC-4D99-919C-8B56D8B6F432

评论Gitalk插件

1注册

Register a new OAuth application

5BD21F3E-7A1D-48FC-8DDC-C039D76FAE67

2主题站点配置

用的是next主题自带gitalk评论的配置，打开主题配置文件，搜索comments，在gitalk位置添加相关的内容：

1
2
3
4
5
6
7
8
9
10
11
12
gitalk:
  enable: true
  github_id: ing # GitHub repo owner
  repo: ing.github.io # Repository name to store issues
  client_id: 9f # GitHub Application Client ID
  client_secret: 70e86da6f614b3 # GitHub Application Client Secret
  admin_user: ing # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
  distraction_free_mode: true # Facebook-like distraction free mode
  # Gitalk's display language depends on user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you can set a force language value
  # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
  language: zh-CN

字数

1、npm install hexo-symbols-count-time --save
2、站点配置

1
2
3
4
5
6
7
8
#字数  
symbols_count_time:
 #文章内是否显示
  symbols: true
  time: true
 # 网页底部是否显示
  total_symbols: true
  total_time: true

搜索

1、npm install hexo-generator-searchdb --save
2、站点配置文件的扩展下添加

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

3、主题配置文件下，local_search改成true即可

1
2
local_search:
  enable: true

图片处理

1
2
3
4
5
# https://hexo.io/zh-cn/docs/asset-folders
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

新增菜单栏选项

1、添加新页面：hexo new page "xx"
2、在主题配置文件的menu中加上该页面
3、在zh-CN.yml文件中加上中文意思

宠物

官方

模型

模块安装

1
2
npm install --save hexo-helper-live2d
npm install live2d-widget-model-wanko

配置

_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  log: false
  model:
    use: live2d-widget-model-wanko
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true
  react:
    opacity: 0.7

点击鼠标显示社会主义核心价值观

编辑JS文件

添加love-click.js放在../hexo/themes/next/source/js/目录下：

1
vi themes/next/source/js/click-word.js

js代码

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
/* 社会主体核心价值观效果 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
        var $i = $("<span />").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 100000000,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#ff6651"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});

调用js文件

在../hexo/themes/next/layout/_layout.*末尾添加引用：

1
<script type="text/javascript" src="/js/click-word.js"></script>

点击弹爱心

编辑JS文件

添加love-click.js放在../hexo/themes/next/source/js/目录下：

1
vi themes/next/source/js/click-love.js
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
! function (e, t, a) {
    function n() {
        c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), o(), r()
    }

    function r() {
        for (var e = 0; e < d.length; e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--, d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999");
        requestAnimationFrame(r)
    }

    function o() {
        var t = "function" == typeof e.onclick && e.onclick;
        e.onclick = function (e) {
            t && t(), i(e)
        }
    }

    function i(e) {
        var a = t.createElement("div");
        a.className = "heart", d.push({
            el: a,
            x: e.clientX - 5,
            y: e.clientY - 5,
            scale: 1,
            alpha: 1,
            color: s()
        }), t.body.appendChild(a)
    }

    function c(e) {
        var a = t.createElement("style");
        a.type = "text/css";
        try {
            a.appendChild(t.createTextNode(e))
        } catch (t) {
            a.styleSheet.cssText = e
        }
        t.getElementsByTagName("head")[0].appendChild(a)
    }

    function s() {
        return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
    }
    var d = [];
    e.requestAnimationFrame = function () {
        return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
            setTimeout(e, 1e3 / 60)
        }
    }(), n()
}(window, document);

调用js文件

在../hexo/themes/next/layout/_layout.*末尾添加引用：

1
<script type="text/javascript" src="/js/click-love.js"></script>

点击鼠标显示爱心和社会主义核心价值观

编辑JS文件

添加love-click.js放在../hexo/themes/next/source/js/目录下：

1
vi themes/next/source/js/click-loveword.js

js代码

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
69
70
71
72
73
74
75
76
77
78
79
/* 社会主体核心价值观效果 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
        var $i = $("<span />").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 100000000,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#ff6651"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
/* 爱心特效 */
! function (e, t, a) {
    function n() {
        c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), o(), r()
    }

    function r() {
        for (var e = 0; e < d.length; e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--, d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999");
        requestAnimationFrame(r)
    }

    function o() {
        var t = "function" == typeof e.onclick && e.onclick;
        e.onclick = function (e) {
            t && t(), i(e)
        }
    }

    function i(e) {
        var a = t.createElement("div");
        a.className = "heart", d.push({
            el: a,
            x: e.clientX - 5,
            y: e.clientY - 5,
            scale: 1,
            alpha: 1,
            color: s()
        }), t.body.appendChild(a)
    }

    function c(e) {
        var a = t.createElement("style");
        a.type = "text/css";
        try {
            a.appendChild(t.createTextNode(e))
        } catch (t) {
            a.styleSheet.cssText = e
        }
        t.getElementsByTagName("head")[0].appendChild(a)
    }

    function s() {
        return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
    }
    var d = [];
    e.requestAnimationFrame = function () {
        return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
            setTimeout(e, 1e3 / 60)
        }
    }(), n()
}(window, document);

调用js文件

在../hexo/themes/next/layout/_layout.*末尾添加引用：

1
<script type="text/javascript" src="/js/click-loveword.js"></script>

网站个性化、语言和时区等

站点配置文件

1
2
3
4
5
6
7
8
# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: zh-CN
timezone: 'Asia/ShangHai'

url 网址设置

1
2
3
4
url: http://yoursite.com
root: /
permalink: :category/:year:month:day-:urlname/ #:year/:month/:day/:title/
permalink_defaults:

permalink是设置永久链接，采用文章中Front-matter定义的一个变量

如urlname: synology-build_hexo-blog

主题

我选择的是next主题

  • 下载最新版
  • 下载最新的master分支

Hexo选择主题

修改站点配置文件，默认是landscape。

1
theme: next

next主题设置

查看另一篇文章Hexo的Next主题美化设置

SEO设置

主要是百度和谷歌。

站点地图

安装站点地图插件：

1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

在站点配置文件下添加：

1
2
3
4
5
# sitemap config
sitemap: 
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

百度SEO设置

待更新

谷歌SEO设置

简要说明下流程。

谷歌网址所有权验证

我使用的是HTML 标记，把谷歌提供的标记添加到头部。

位置是themes/next/layout/_partials/head/head.swig，在前面的地方添加：

1
2
3
4
5
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="{{ theme.android_chrome_color }}">
<meta name="generator" content="Hexo {{ hexo_version }}">
<meta name="google-site-verification" content=谷歌提供的标记 />

关联github

  1. 安装hexo-deployer-git

    1
    npm install hexo-deployer-git --save

  2. 修改配置文件

    1
    2
    3
    4
    deploy:
      type: git
      repo: https://github.com/<username>/<project>
      branch: master

  3. 配置Git邮箱和用户名

    1
    2
    git config --global user.email "you@example.com"
    git config --global user.name "Your Name"

  4. 如果使用域名绑定github，需要在**/source目录下建立CHAME**文件，不能后后缀，里面只写入一个域名，没有http://和https://前缀。

添加评论

用的是next主题自带gitalk评论的配置，打开主题配置文件，搜索comments，在gitalk位置添加相关的内容：

1
2
3
4
5
6
7
8
9
10
11
12
gitalk:
  enable: true
  github_id: ing # GitHub repo owner
  repo: ing.github.io # Repository name to store issues
  client_id: 9f # GitHub Application Client ID
  client_secret: 70e86da6f614b3 # GitHub Application Client Secret
  admin_user: ing # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
  distraction_free_mode: true # Facebook-like distraction free mode
  # Gitalk's display language depends on user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you can set a force language value
  # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
  language: zh-CN

添加豆瓣电影

安装插件**hexo-douban**

1
npm install hexo-douban --save

添加站点配置文件代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#添加豆瓣电影
douban:
  user: mythsman
  builtin: false
  #book:
    #title: 'This is my book title'
    #quote: 'This is my book quote'
  movie:
    title: 'This is my movie title'
    quote: 'This is my movie quote'
  #game:
    #title: 'This is my game title'
    #quote: 'This is my game quote'
  timeout: 10000

如果只想生成某一个页面（比如只生成电影页面），把其他的配置项注释掉即可。

user: 填写豆瓣 ID。登陆豆瓣后点击个人主页，此时 url 中最后一段即是用户 ID，一般情况下会是一段数字，如果设置了个人域名的话，则个人域名即为 ID。
builtin: 是否将生成页面的功能嵌入 hexo s 和 hexo g 中。
timeout: 爬取数据的超时时间。

配置首页显示

修改next皮肤配置文件，搜索menu:

添加需要的豆瓣内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
menu:
  home: / || home
  #about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat
  #以下是豆瓣
  #Books: /books     || books
  movies: /movies   || movie
  #Games: /games   || games

修改首页菜单显示为中文，修改next主题语言文件themes\next\language\zh_CN.yml

1
2
3
4
5
6
7
8
menu:
    home: 首页
    archives: 归档
    categories: 分类
    tags: 标签
    movies: 电影
    books: 读书
    games: 游戏

写作模板

1
2
3
4
5
6
7
/scaffolds/post.md
title: {{ title }}
date: {{ date }}
urlname:
tags:
categories:
description:

去除代码块的行号

在站点配置文件中找到 highlight 节点，设置 line_number 为 false

文章图片可点击放大

需要插件fancybox3支持，安装在主题next里。

1
2
cd themes/next
git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox

主题配置文件修改：

1
2
3
# FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.
# For more information: https://fancyapps.com/fancybox
fancybox: true

选择next主题的布局

在主题配置文件blog/themes/next/_config.yml中搜索Scheme

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

首页文章不展示全文显示摘要

在文章里插入以下代码

1
<!-- more -->

页面菜单

next默认只有两个页面菜单，首页home和归档archives，搜索menu我们按需选择。

1
2
3
4
5
6
7
8
9
menu:
  home: / || home #首页
  #about: /about/ || user #关于
  #tags: /tags/ || tags #标签
  #categories: /categories/ || th #分类
  archives: /archives/ || archive #归档
  #schedule: /schedule/ || calendar #日程表
  #sitemap: /sitemap.xml || sitemap #站点地图
  #commonweal: /404/ || heartbeat #公益404

斜线//之间的文字是该页面的名称，除了归档其他的如关于about、标签tags和分类categories是需要自行添加页面文件夹的。

生成about、tags、categories页面

在博客根目录下输入命令：

1
2
3
hexo new page about
hexo new page tags
hexo new page categories

会在/source下对应生成页面文件夹和里面的index.md。对于tags和categories需要修改*index.md
内容如下：
tags：

1
2
title: 标签 #页面的头部显示
type: tags

categories：

1
2
title: 分类 #页面的头部显示
type: categories

添加站内搜索按钮

安装搜索插件：

1
npm install hexo-generator-searchdb --save
  • 在站点配置文件中添加:
1
2
3
4
5
6
#添加站内搜索按钮
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

  • 皮肤配置文件修改

    搜索local_search，enable修改为true

1
2
local_search:
  enable: true

设置网站图标”favicon.ico”

找自己喜欢的ico图标文件，32x32，修改为favicon.ico。

然后把图标文件放在/themes/next/source/images里面。

修改next配置文件，搜索favicon：

1
2
3
4
5
6
7
favicon:
  #原始small: /images/favicon-16x16-next.png
  #原始medium: /images/favicon-32x32-next.png
  medium: /images/favicon.ico
  small: /images/favicon.ico
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg

添加字数统计及阅读时长

安装hexo-symbols-count-time

在博客文件夹里执行命令：

1
npm install hexo-symbols-count-time --save

修改相关配置文件

  • 在站点配置文件添加：
1
2
3
4
5
6
7
symbols_count_time:
 #文章内是否显示
  symbols: true
  time: true
 # 网页底部是否显示
  total_symbols: true
  total_time: true

  • 在Next主题配置文件修改

    搜索symbols_count_time

1
2
3
4
5
6
symbols_count_time:
  separated_meta: true  # 是否换行显示 字数统计 及 阅读时长
  item_text_post: true  # 文章 字数统计 阅读时长 使用图标 还是 文本表示
  item_text_total: true # 博客底部统计 字数统计 阅读时长 使用图标 还是 文本表示
  awl: 4
  wpm: 275

Next的其他小功能

代码块增加一件复制

该功能next主题已经内置，我们只要打开就行，主题配置文件搜索copy_button：

1
2
3
4
5
# Add copy button on codeblock
copy_button:
  enable: true #是否开启复制功能
  # Show text copy result. #是否显示提示的复制结果
  show_result: true

复制模式mac主题

就在上面一件复制代码的下面

1
2
3
4
5
6
copy_button:
  enable: true #原始false
  # Show text copy result.
  show_result: true #原始false
  # Available values: default | flat | mac
  style: mac

增加打赏功能

这个也是next具备了。先把需要的收款码放到/themes/next/source/images里面。

搜索reward_settings修改：

1
2
3
4
5
6
7
8
9
10
reward_settings:
  # If true, reward will be displayed in every article by default.
  enable: true
  animation: true
  #comment: Donate comment here.

reward:
  wechatpay: /images/wechatpay.png
  alipay: /images/alipay.png
  #bitcoin: /images/bitcoin.png

增加版权信息

搜索creative_commons：

1
2
3
4
5
creative_commons:
  license: by-nc-sa
  sidebar: false #首页边栏是否显示
  post: true #文章底部是否显示
  language:

修改标签样式

默认的标签前面是一个#号，我们把它改成标签的符号并删除下划线：

打开**/themes/next/layout/_macro/post.swig，搜索post-footer**

找到：

1
{%- set tag_indicate = '#' %}

把**#**修改为：<i class="fa fa-tag"></i>，这个样子：

1
2
3
4
5
6
<footer class="post-footer">
  {%- if post.tags and post.tags.length %}
    {%- if theme.tag_icon %}
      {%- set tag_indicate = '<i class="fa fa-tag"></i>' %}
    {% else %}
      {%- set tag_indicate = '<i class="fa fa-tag"></i>' %}

添加本站运行时间

修改**/blog/themes/next/layout/_partials/footer.swig**文件，在末尾加入如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<br /> #换行
<!-- 网站运行时间的设置 -->
<span id="timeDate">载入天数...</span>
<span id="times">载入时分秒...</span>
<script>
    var now = new Date();
    function createtime() {
        var grt= new Date("04/21/2019 15:54:40");//此处修改你的建站时间或者网站上线时间
        now.setTime(now.getTime()+250);
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
        document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";
        document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
    }
setInterval("createtime()",250);
</script>

添加站点访问人数和总访问量

修改next主题配置文件，搜索busuanzi_count

1
2
3
4
5
6
7
8
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

代码块主题

Next主题内置了tomorrow代码块高亮主题，一共有五个，可以去Tomorrow查看预览效果，搜索highlight_theme，在highlight_theme:中改成自己想要的即可。

1
2
3
4
5
codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night #原始normal

页面加载条

Next主题使用的是PACE功能，有多种加载动画可选。

pace-theme-big-counter
pace-theme-bounce
pace-theme-barber-shop
pace-theme-center-atom
pace-theme-center-circle
pace-theme-center-radar
pace-theme-center-simple
pace-theme-corner-indicator
pace-theme-fill-left
pace-theme-flash
pace-theme-loading-bar
pace-theme-mac-osx
pace-theme-minimal

需要安装pace模块到theme/next/source/lib文件夹下。

1
2
cd themes/next
git clone https://github.com/theme-next/theme-next-pace source/lib/pace

然后修改next主题配置文件，搜索pace定位到如下代码：

1
2
3
4
5
6
pace:
  enable: true #原始false
  # Themes list:
  # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
  # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
  theme: minimal

动态背景

Next主题默认提供了三种动态背景

  • Canvas-nest
  • JavaScript 3D library
  • Canvas-ribbon

按需选择，我选择的是canvas-nest，需要安装模块到theme/next/source/lib文件夹下。

1
2
cd themes/next
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

然后修改next主题配置文件，搜索Canvas-nest定位到如下代码：

1
2
3
4
5
6
7
canvas_nest:
  enable: true
  onmobile: true # Display on mobile or not
  color: "0,0,255" # RGB values, use `,` to separate
  opacity: 0.5 # The opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 99 # The number of lines

参考

1
2
https://blog.mrzorg.top/Hexo/2020-02-12-hero-next-theme-settings/
https://blog.mrzorg.top/Hexo/2020-02-11-hexo-optimize-and-next-theme/