Hexo主要设置和所装插件

发表于 更新于 分类于 阅读次数： Waline：

1. Hexo Admin

Docker HEXO spurin/hexo 自带

以下内容管理员所见：

2.Valine

通 过 安 装 ： npm install next-theme/hexo-next-valine

安装评论valine

  1. 注册leancloud，建议选择国际版。leancloud既能管理评论，也能统计阅读情况。在创建的应用里点击数据存储-结构化数据-创建Class，点击创建Class，新建名为Comment，选择无限制，其它默认，然后点击创建，用来查看评论。 再在数据存储-结构化数据-创建Class，点击创建Class，新建名为Counter，选择无限制，其它默认，用来统计阅读。
  2. next主题8.7没有自带valine评论，安装：npm install next-theme/hexo-next-valine。valine相关文件会下载至Hexo\node_modules\hexo-next-valine，打开该文件夹里的default.yaml，全部复制，粘贴到主题配置文件里。

# For more information: https://valine.js.org, https://github.com/xCss/Valine 

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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
# Valine
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine:
  enable: true
  appId: VmHoTNSI8CMNRxjKhFku5U5p-MdYXbMMI 
  appKey: BId3NqbgjjNq9umzjbaPUTku
  js: https://cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js
  placeholder: "输入你的评论\n昵称为必填项目，输入QQ号可以直接获取用户名和头像，并且省去了填写邮箱的麻烦！\n虽然email不是必选，但是填写了email可以收到推送通知哦！" # Comment box placeholder
  avatar: "mm" # Gravatar style
  meta: [nick, mail] # Custom comment header
  pageSize: 10 # Pagination size
  lang: zh-cn # Language, available values: en, zh-cn
  visitor: false # Article reading statistic
  comment_count: true # If false, comment count will only be displayed in post page, not in home page
  recordIP: true # Whether to record the commenter IP
  serverURLs:  # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
  enableQQ: true # Whether to enable the Nickname box to automatically get QQ Nickname and QQ Avatar
  requiredFields: [nick] # Set required fields: [nick] | [nick, mail]
  emojiCDN: '//cdn.jsdelivr.net/gh/haomingvince/ghcdn/'
  emojiMaps: {
        "bilibili_doge.png": "CommentEmote/bilibili_doge.png",
        "bilibili_baiyan.png": "CommentEmote/bilibili_baiyan.png",
        "bilibili_bishi.png": "CommentEmote/bilibili_bishi.png",  
        "bilibili_bizui.png": "CommentEmote/bilibili_bizui.png",  
        "bilibili_chan.png": "CommentEmote/bilibili_chan.png",    
        "bilibili_dai.png": "CommentEmote/bilibili_dai.png",      
        "bilibili_daku.png": "CommentEmote/bilibili_daku.png",    
        "bilibili_dalao.png": "CommentEmote/bilibili_dalao.png",  
        "bilibili_dalian.png": "CommentEmote/bilibili_dalian.png",
        "bilibili_dianzan.png": "CommentEmote/bilibili_dianzan.png",
        "bilibili_facai.png": "CommentEmote/bilibili_facai.png",
        "bilibili_fanu.png": "CommentEmote/bilibili_fanu.png",
        "bilibili_ganga.png": "CommentEmote/bilibili_ganga.png",
        "bilibili_guilian.png": "CommentEmote/bilibili_guilian.png",
        "bilibili_guzhang.png": "CommentEmote/bilibili_guzhang.png",
        "bilibili_haixiu.png": "CommentEmote/bilibili_haixiu.png",
        "bilibili_heirenwenhao.png": "CommentEmote/bilibili_heirenwenhao.png",
        "bilibili_huaixiao.png": "CommentEmote/bilibili_huaixiao.png",
        "bilibili_jingxia.png": "CommentEmote/bilibili_jingxia.png",
        "bilibili_keai.png": "CommentEmote/bilibili_keai.png",
        "bilibili_koubi.png": "CommentEmote/bilibili_koubi.png",
        "bilibili_kun.png": "CommentEmote/bilibili_kun.png",
        "bilibili_lengmo.png": "CommentEmote/bilibili_lengmo.png",
        "bilibili_liubixue.png": "CommentEmote/bilibili_liubixue.png",
        "bilibili_liuhan.png": "CommentEmote/bilibili_liuhan.png",
        "bilibili_liulei.png": "CommentEmote/bilibili_liulei.png",
        "bilibili_miantian.png": "CommentEmote/bilibili_miantian.png",
        "bilibili_mudengkoudai.png": "CommentEmote/bilibili_mudengkoudai.png",
        "bilibili_nanguo.png": "CommentEmote/bilibili_nanguo.png",
        "bilibili_outu.png": "CommentEmote/bilibili_outu.png",
        "bilibili_qinqin.png": "CommentEmote/bilibili_qinqin.png",
        "bilibili_se.png": "CommentEmote/bilibili_se.png",
        "bilibili_shengbing.png": "CommentEmote/bilibili_shengbing.png",
        "bilibili_shengqi.png": "CommentEmote/bilibili_shengqi.png",
        "bilibili_shuizhao.png": "CommentEmote/bilibili_shuizhao.png",
        "bilibili_sikao.png": "CommentEmote/bilibili_sikao.png",
        "bilibili_tiaokan.png": "CommentEmote/bilibili_tiaokan.png",
        "bilibili_tiaopi.png": "CommentEmote/bilibili_tiaopi.png",
        "bilibili_touxiao.png": "CommentEmote/bilibili_touxiao.png",
        "bilibili_tuxie.png": "CommentEmote/bilibili_tuxie.png",
        "bilibili_weiqu.png": "CommentEmote/bilibili_weiqu.png",
        "bilibili_weixiao.png": "CommentEmote/bilibili_weixiao.png",
        "bilibili_wunai.png": "CommentEmote/bilibili_wunai.png",
        "bilibili_xiaoku.png": "CommentEmote/bilibili_xiaoku.png",
        "bilibili_xieyanxiao.png": "CommentEmote/bilibili_xieyanxiao.png",
        "bilibili_yiwen.png": "CommentEmote/bilibili_yiwen.png",
        "bilibili_yun.png": "CommentEmote/bilibili_yun.png",
        "bilibili_zaijian.png": "CommentEmote/bilibili_zaijian.png",
        "bilibili_zhoumei.png": "CommentEmote/bilibili_zhoumei.png",
        "bilibili_zhuakuang.png": "CommentEmote/bilibili_zhuakuang.png",
        "tieba_1.png": "CommentEmote/tieba_1.png",
        "tieba_2.png": "CommentEmote/tieba_2.png",
        "tieba_3.png": "CommentEmote/tieba_3.png",
        "tieba_4.png": "CommentEmote/tieba_4.png",
        "tieba_5.png": "CommentEmote/tieba_5.png",
        "tieba_6.png": "CommentEmote/tieba_6.png",
        "tieba_7.png": "CommentEmote/tieba_7.png",
        "tieba_8.png": "CommentEmote/tieba_8.png",
        "tieba_9.png": "CommentEmote/tieba_9.png",
        "tieba_10.png": "CommentEmote/tieba_10.png",
        "tieba_11.png": "CommentEmote/tieba_11.png",
        "tieba_12.png": "CommentEmote/tieba_12.png",
        "tieba_13.png": "CommentEmote/tieba_13.png",
        "tieba_14.png": "CommentEmote/tieba_14.png",
        "tieba_15.png": "CommentEmote/tieba_15.png",
        "tieba_16.png": "CommentEmote/tieba_16.png",
        "tieba_17.png": "CommentEmote/tieba_17.png",
        "tieba_18.png": "CommentEmote/tieba_18.png",
        "tieba_19.png": "CommentEmote/tieba_19.png",
        "tieba_20.png": "CommentEmote/tieba_20.png",
        "tieba_21.png": "CommentEmote/tieba_21.png",
        "tieba_22.png": "CommentEmote/tieba_22.png",
        "tieba_23.png": "CommentEmote/tieba_23.png",
        "tieba_24.png": "CommentEmote/tieba_24.png",
        "tieba_25.png": "CommentEmote/tieba_25.png",
        "tieba_26.png": "CommentEmote/tieba_26.png",
        "tieba_27.png": "CommentEmote/tieba_27.png",
        "tieba_28.png": "CommentEmote/tieba_28.png",
        "tieba_29.png": "CommentEmote/tieba_29.png",
        "tieba_30.png": "CommentEmote/tieba_30.png",
        "tieba_31.png": "CommentEmote/tieba_31.png",
        "tieba_32.png": "CommentEmote/tieba_32.png",
        "tieba_33.png": "CommentEmote/tieba_33.png",
        "tieba_46.png": "CommentEmote/tieba_46.png",
        "tieba_47.png": "CommentEmote/tieba_47.png",
        "tieba_48.png": "CommentEmote/tieba_48.png",
        "tieba_49.png": "CommentEmote/tieba_49.png",
        "tieba_50.png": "CommentEmote/tieba_50.png",
        "tieba_66.png": "CommentEmote/tieba_66.png",
        "tieba_67.png": "CommentEmote/tieba_67.png",
        "tieba_68.png": "CommentEmote/tieba_68.png",
        "tieba_69.png": "CommentEmote/tieba_69.png",
        "tieba_70.png": "CommentEmote/tieba_70.png",
        "tieba_71.png": "CommentEmote/tieba_71.png",
        "tieba_72.png": "CommentEmote/tieba_72.png",
        "tieba_73.png": "CommentEmote/tieba_73.png",
        "tieba_74.png": "CommentEmote/tieba_74.png",
        "tieba_75.png": "CommentEmote/tieba_75.png",
        "tieba_76.png": "CommentEmote/tieba_76.png",
        "tieba_86.png": "CommentEmote/tieba_86.png",
        "tieba_87.png": "CommentEmote/tieba_87.png",
        "tieba_88.png": "CommentEmote/tieba_88.png",
        "tieba_89.png": "CommentEmote/tieba_89.png",
        "tieba_90.png": "CommentEmote/tieba_90.png",
        "tieba_91.png": "CommentEmote/tieba_91.png",
        "tieba_92.png": "CommentEmote/tieba_92.png",
        "tieba_93.png": "CommentEmote/tieba_93.png",
        "tieba_95.png": "CommentEmote/tieba_95.png",
        "tieba_96.png": "CommentEmote/tieba_96.png",
        "tieba_97.png": "CommentEmote/tieba_97.png",
        "tieba_98.png": "CommentEmote/tieba_98.png",
    }
  1. 在leancloud设置-应用凭证里复制AppID和AppKey，粘贴到appId和appKey，注意冒号后面有空格，并且不要和#连着。 在设置-安全中心-Web安全域名里添加自己的网址。其余按需修改。 注意，如果出现Code 401: 未经授权的操作,请检查你的AppId和AppKey，会发现有评论框但是不能提交评论。在设置-应用凭证里复制REST API 服务器地址，粘贴到serverURLs:，即可解决。
  2. 主题配置里自带leancloud的阅读统计功能。如果启用，其中app_id:``app_key:``server_url:按照valine里的填写。
1
2
3
4
5
6
leancloud_visitors:
  enable: 
  app_id:   
  app_key:  
  server_url: 
  security: true
  1. valine、leancloud和busuanzi的统计有冲突，建议如下设置：
1
2
3
4
5
6
7
8
9
10
11
12
13
valine:
  enable: true
  visitor: false  // 关闭
leancloud_visitors: 
  enable: true //打开
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: fa fa-user
  total_views: true
  total_views_icon: fa fa-eye
  post_views: false  # 关闭
  post_views_icon: far fa-eye
  1. 如果在阅读统计中出现Counter not initialized! More info at console err msg.，设置leancloud_visitors.security = false，如下：
1
2
3
leancloud_visitors: 
  enable: true    # 必须开
  security: false

3.Artitalk 说说

参考：

https://blog.csdn.net/cungudafa/article/details/105938885

https://zhuanlan.zhihu.com/p/424932976

4.本地搜索

安装：npm install hexo-generator-searchdb

Hexo config :

1
2
3
4
5
search:
  path: search.xml
  field: post
  content: true
  format: html

NexT config ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Local search
# Dependencies: https://github.com/next-theme/hexo-generator-searchdb
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

5.增强插件 hexo-enhancer

安装：npm install hexo-enhancer –save

_config.yml配置的标签可以是这样的:

1
2
keywords: HTML, JavaScript, Hexo
tags: Java, Golang, React, Vue

hexo-enhancer会扫描您的.md文章，如果文章内出现以上关键词，则自动将其分配如文章的tags属性中。

需要特别指出的是，keywords是标准配置，它最终会出现在网页meta中，而tags是自定义的属性，只会被本插件使用。

6.代码高亮

安装：npm i -S hexo-prism-plugin highlight

然后，修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置，主要配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 这一部分高亮插件与原来的highlight一样的，保留其一，这里有安装prism独立插件所以【关掉】，同时也要在NexT主题里面的prism开关关掉。
#highlight:
#  enable: false
#  line_number: true
#  auto_detect: false
#  tab_replace: false
#  wrap: true
#  hljs: false
#  exclude_languages:
#   - mermaid

# 这一部分高是prism独立插件添加的代码。
# 源码地址：https://github.com/ele828/hexo-prism-plugin
prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'     # 更多主题 https://github.com/PrismJS/prism-themes#available-themes
  line_number: true    # default false
  custom_css: # 'path/to/your/custom.css'

参数说明：

Options

  • mode:
    • realtime (Parse code on browser in real time)
    • preprocess (Preprocess code in node)
  • theme:
    • default
    • coy
    • dark
    • funky
    • okaidia
    • solarizedlight
    • tomorrow
    • twilight
    • atom-dark
    • base16-ateliersulphurpool.light
    • cb
    • duotone-dark
    • duotone-earth
    • duotone-forest
    • duotone-light
    • duotone-sea
    • duotone-space
    • ghcolors
    • hopscotch
    • pojoaque
    • vs
    • xonokai
  • line_number:
    • true (Show line numbers)
    • false (Default, Hide line numbers)
  • no_assets
    • true (Stop loading asset files)
    • false (Default, load script and stylesheets files)

安装：npm install hexo-generator-search –save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

1
2
3
search:
  path: search.xml
  field: post

7.加密 hexo-blog-encrypt

安装 npm install --save hexo-blog-encrypt

_config.yml 配置：

1
2
3
4
5
6
7
8
9
10
11
# Security 文章加密 安装 npm install hexo-blog-encrypt
encrypt: # hexo-blog-encrypt
  abstract: 以下为加密内容，需要输入密码才能查看。
  message: 需要密码查看，请输入密码。
  silent: true
  theme: xray
  tags:
  - {name: encryptAsDiary, password: passwordA}
  - {name: encryptAsTips, password: passwordB}
  wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
  wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.

8.自动摘要 hexo-excerpt

https://github.com/chekun/hexo-excerpt

安装：npm install hexo-excerpt –save

1
2
3
4
5
excerpt:
  depth: 10
  excerpt_excludes: []
  more_excludes: []
  hideWholePostExcerpts: true

9.置顶方法配置

主要有两种方法供选择 最新版NEXTv8.11在用第二种.

9.置顶方法配置

主要有两种方法供选择

方法一

原理

在Hexo生成首页HTML时，将top值高的文章排在前面，达到置顶功能。

修改方法

修改Hexo文件夹下的node_modules/hexo-generator-index/lib/generator.js，在生成文章之前进行文章top值排序。

需添加的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
posts.data = posts.data.sort(function(a, b) {
    if(a.top && b.top) { // 两篇文章top都有定义
        if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
        else return b.top - a.top; // 否则按照top值降序排
    }
    else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
        return -1;
    }
    else if(!a.top && b.top) {
        return 1;
    }
    else return b.date - a.date; // 都没定义按照文章日期降序排
});

复制

其中涉及Javascript的比较函数：

1
2
3
cmp(var a, var b) {
    return  a - b; // 升序，降序的话就 b - a
}

复制

修改完成后，只需要在front-matter中设置需要置顶文章的top值，将会根据top值大小来选择置顶顺序top值越大越靠前。需要注意的是，这个文件不是主题的一部分，也不是Git管理的，备份的时候比较容易忽略。

修改内容

以下是最终的generator.js内容，可以直接复制替换node_modules/hexo-generator-index/lib/generator.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
'use strict';

var pagination = require('hexo-pagination');

module.exports = function(locals) {
  var config = this.config;
  var posts = locals.posts.sort(config.index_generator.order_by);

  posts.data = posts.data.sort(function(a, b) {
      if(a.top && b.top) {
          if(a.top == b.top) return b.date - a.date;
          else return b.top - a.top;
      }
      else if(a.top && !b.top) {
          return -1;
      }
      else if(!a.top && b.top) {
          return 1;
      }
      else return b.date - a.date;
  });

  var paginationDir = config.pagination_dir || 'page';

  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

方法二【推荐】

1
2
$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save

置顶文章配置

然后在需要置顶的文章的Front-matter中加上top: true或者top数字top: 1：

1
2
3
4
title: 置顶
date: 2019-09-09 09:09:09
top: true
top: 1

按照数字大小依次往下置顶排序

置顶标志

置顶的文章会显示在主页最上面，没有明确的置顶标志，我们需要键入置顶标志。

设置置顶标志

打开：node_modules/hexo-theme-next/layout/_partials/post/post-meta.njk文件，定位到<div class="post-meta">标签下，插入如下代码：

第二段代码：

1
2
3
4
5
{% if post.top %}
    <i class="fa fa-thumb-tack"></i>
 <font color=7D26CD>置顶</font>
 <span class="post-meta-divider">|</span>
 {% endif %}

第二段代码：二选一（目前使用）

1
2
3
4
5
6
7
{% if post.top %}
<span class="post-meta-item-icon">
<i class="fa fa-thumb-tack"></i>
</span>
<font color=red>置顶</font>
<span class="post-meta-divider">|</span>
{% endif %}

image-20230330193314055

其它好用插件推荐：

https://blog.csdn.net/qq_43701912/article/details/107310923

https://cloud.tencent.com/developer/article/1952241