本博客当前使用的插件总结

发表于 更新于 分类于 阅读次数： 本文字数： 12k 阅读时长 ≈ 11 分钟
默认

本博客当前使用的插件，便于后人参考修改：

插件 版本
babel-runtime 6.26.0
hexo npm
hexo-abbrlink 2.0.5
hexo-submit-urls-to-search-engine npm
hexo-blog-encrypt 3.0.9
hexo-cake-moon-menu 1.1.3
hexo-deployer-git npm
hexo-douban 1.1.3
hexo-filter-nofollow 2.0.2
hexo-generator-archive 1.0.0
hexo-generator-baidu-sitemap npm
hexo-generator-category 1.0.0
hexo-generator-feed 2.2.0
hexo-generator-index-pin-top 0.2.2
hexo-generator-searchdb npm
hexo-generator-sitemap npm
hexo-generator-tag 1.0.0
hexo-leancloud-counter-security 1.4.1
hexo-neat 1.0.4
hexo-related-popular-posts npm
hexo-renderer-ejs 1.0.0
hexo-renderer-marked 2.0.0
hexo-renderer-stylus 1.1.0
hexo-server 1.0.0
hexo-symbols-count-time 0.7.0
hexo-tag-echarts4 1.0.1
hexo-theme-next npm
hexo-word-counter npm

[TOC]

Hexo

GitHub

NPM version Required Node version Build Status dependencies Status Coverage Status Gitter Discord Chat Telegram Chat FOSSA Status Contributor Covenant

快速开始

Install Hexo

1
npm install hexo-cli -g

Setup your blog

1
2
hexo init blog
cd blog

Start the server

1
hexo server

Create a new post

1
hexo new "Hello Hexo"

Generate static files

1
hexo generate

配置

_config.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
# Site
title: Ln's Blog #网站标题
subtitle: '有朋自远方来，不亦乐乎' #网站副标题
description: '算法、技术' #网站描述
author: Lining Wei #作者
language:
  - zh-CN
timezone: 'Asia/ShangHai'

url: https://weilining.github.io/

# hexo默认文章路径为年/月/日/文件名，目录层次过长不利于收录，所以在根目录的config.yml文件中，修改默认路径
permalink: :title.html

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

deploy:
  - type: git
    repo: git@github.com:weilining/weilining.github.io.git # 使用仓库的ssh地址
    branch: master
    token: 'f7e4ee8c4b57d3fab8c0680e192xxxx'
    message: message # git commit -m "message"
    name: weilining
    email: abc@abc.com

hexo-theme-next

GitHub
NPM version Required Hexo version License Code Quality Build Status [Build Status](

安装

如果您使用的是Hexo 5.0或更高版本，则最简单的安装方法是通过npm：

1
2
$ cd hexo-site
$ npm install hexo-theme-next

安装后，打开Hexo配置文件_config.yml并将主题变量设置为next。

1
theme: next

配置

根目录下创建_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
# 主题选择
scheme: Gemini

# 暗模式
darkmode: true

# 增加版权信息
creative_commons:
  license: by-nc-sa
  sidebar: false #首页边栏是否显示
  post: true #文章底部是否显示
  language:
  
# 菜单设置
menu_settings:
  icons: true
  badges: true # 菜单文章总数显示

# 自动摘录首页中的描述作为前导文字。
excerpt_description: true

# 使用图标代替符号＃在帖子底部指示标签
tag_icon: true

# 右边百分比显示
back2top:
  enable: true
  # 在边栏中返回顶部。
  sidebar: false
  # 滚动b2t按钮中的百分比标签。
  scrollpercent: true

Hexo 一键部署插件

地址

  • hexo-deployer-git

安装配置

安装插件：

1
npm install hexo-deployer-git --save

然后修改站点配置文件_config.yml 中的配置：

1
2
3
4
deploy:
- type: git
  repository: git@github.com:dta0502/dta0502.github.io.git
  branch: master

Hexo 文章永久链接插件

地址

  • hexo-abbrlink

安装配置

安装插件：

1
npm install hexo-abbrlink --save

然后我们可以在站点配置文件_config.yml 中修改为：

1
2
3
4
5
6
7
url: https://tding.top/
root: /
permalink: archives/:abbrlink.html
abbrlink:
  alg: crc32  # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex
permalink_defaults:

Hexo 推荐文章插件

这个可以帮助我们根据标签推荐相关文章，原版插件的使用要求编辑主题文件的，但是 NexT 主题集成了这个插件的配置，因此配置起来非常方便。

地址

  • hexo-related-popular-posts

安装配置

安装插件：

1
npm install hexo-related-popular-posts --save

我们只需要在主题配置文件_config.yml 中修改：

1
2
3
4
5
6
7
8
9
10
related_posts:
  enable: true
  title: 推荐文章 # Custom header, leave empty to use the default one
  display_in_home: false
  params:
    maxCount: 5
    PPMixingRate: 0.25
    isDate: false
    isImage: false
    isExcerpt: false

Hexo 豆瓣读书、豆瓣电影插件

安装配置

安装插件：

1
npm install hexo-douban --save
  • 具体配置教程见：Hexo 加入豆瓣读书页面

Hexo 站点地图 sitemap 生成

通用站点地图

  • 地址：hexo-generator-sitemap

安装配置：

1
npm install hexo-generator-sitemap --save

然后我们需要在 Hexo 站点配置文件_config.yml 中加入 sitemap 插件：

1
2
3
# 通用站点地图
sitemap:
  path: sitemap.xml

百度站点地图

  • 地址：Sitemap generator

安装配置：

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

具体配置类似通用站点地图，当然也可以看官方提供的教程，下面是一个简单的配置，我们在 Hexo 站点配置文件_config.yml 中添加：

1
2
3
# 百度站点地图
baidusitemap:
  path: baidusitemap.xml

Hexo 百度主动推送

地址

  • Hexo Baidu URL Submit停止
  • GitHub

安装配置

安装插件：

1
npm install hexo-submit-urls-to-search-engin --save

在站点配置文件_config.yml 中添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
hexo_submit_urls_to_search_engine:
  submit_condition: count #链接被提交的条件，可选值：count | period 现仅支持count
  count: 10 # 提交最新的10个链接
  period: 900 # 提交修改时间在 900 秒内的链接
  google: 0 # 是否向Google提交，可选值：1 | 0（0：否；1：是）
  bing: 1 # 是否向bing提交，可选值：1 | 0（0：否；1：是）
  baidu: 1 # 是否向baidu提交，可选值：1 | 0（0：否；1：是）
  txt_path: submit_urls.txt ## 文本文档名， 需要推送的链接会保存在此文本文档里
  baidu_host: https://cjh0613.github.io ## 在百度站长平台中注册的域名
  baidu_token: 请按照文档说明获取 ## 请注意这是您的秘钥， 所以请不要把它直接发布在公众仓库里!
  bing_host: https://cjh0613.github.io ## 在bing站长平台中注册的域名
  bing_token: 请按照文档说明获取 ## 请注意这是您的秘钥， 所以请不要把它直接发布在公众仓库里!
  google_host: https://cjh0613.github.io ## 在google站长平台中注册的域名
  google_key_file: Project.json #存放google key的json文件，放于网站根目录（与hexo _config.yml文件位置相同），请不要把json文件内容直接发布在公众仓库里!
  replace: 0  # 是否替换链接中的部分字符串，可选值：1 | 0（0：否；1：是）
  find_what: http://cjh0613.github.io/blog
  replace_with: https://cjh0613.com

Hexo 字数和阅读时间统计插件

地址

  • hexo-symbols-count-time

安装配置

安装插件：

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

在站点配置文件_config.yml 中添加以下代码：

1
2
3
4
5
symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true

然后由于此插件集成在 NexT 中，然后修改主题配置文件_config.yml：

1
2
3
4
5
6
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  awl: 4
  wpm: 275

Hexo RSS 生成插件

地址

  • hexo-generator-feed

安装配置

安装插件：

1
npm install hexo-generator-feed --save

在站点配置文件_config.yml 中添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date
  icon: icon.png
  autodiscovery: true
  template:

Hexo 本地搜索功能

本地搜索的原理

对于动态网站来说，可以通过 php 实现。但是，Hexo 博客是静态网站，用不了 php。

NexT 主题已经实现这个功能，它用了 Hexo 的拓展包 hexo-generator-searchdb，预先生成了一个文本库 search.xml，然后传到了网站里面。在本地搜索的时候，NexT 直接用 javascript 调用了这个文件，从而实现了静态网站的本地搜索。

插件地址

  • hexo-generator-searchdb

安装配置

安装插件：

1
npm install hexo-generator-searchdb --save

然后我们修改站点配置_config.yml 文件，添加如下内容：

1
2
3
4
5
6
# 本地搜索
search:
  path: search.xml
  field: post
  format: html
  limit: 100
  • path：索引文件的路径，相对于站点根目录
  • field：搜索范围，默认是 post，还可以选择 page、all，设置成 all 表示搜索所有页面
  • limit：限制搜索的条目数

然后修改主题配置文件_config.yml：

1
2
3
4
5
6
7
8
9
10
11
12
13
# Local Search
# Dependencies: https://github.com/theme-next/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

Hexo 文章置顶插件

地址

  • hexo-generator-index-pin-top

安装配置

安装插件：

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

在需要置顶的文章的 Front-matter 中加上 top: true 或者 top: 任意数字，比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
title: TMDb电影数据分析
declare: true
toc: true
tags:
  - Python
  - 数据分析
categories:
  - 数据分析
  - 实战
abbrlink: 7e380af2
date: 2018-11-23 13:20:03
top: 100
---

注意：top 中数字越大，文章越靠前。

设置置顶图标

打开 /themes/next/layout/_macro/ 目录下的 post.swig 文件，在 <div class="post-meta"> 的第一个 <span> 标签下，插入如下代码：

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 %}

Hexo 文章加密插件

地址

  • hexo-blog-encrypt

安装配置

安装插件：

1
npm install hexo-blog-encrypt --save

快速使用：

我们需要在文章开头添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
title: 射频微波基础知识（二）
declare: true
toc: true
tags:
  - 射频电路
categories:
  - RF
  - 射频电路
mathjax: true
+password: 
+abstract: 有东西被加密了，请输入密码查看
+message: 请输入密码
---

高级配置

详见 GitHub 说明文档。

Hexo 减少出站链接

减少出站链接能够有效防止权重分散，Hexo 有很方便的自动为出站链接添加 nofollow 的插件。

地址

  • hexo-filter-nofollow

安装配置

安装插件：

1
npm install hexo-filter-nofollow --save

再在站点的_config.yml 中添加配置，将 nofollow 设置为 true：

1
2
3
4
5
6
nofollow:
  enable: true
  field: site
  exclude:
    - 'exclude1.com'
    - 'exclude2.com'

这样，例外的链接将不会被加上 nofollow 属性。

Hexo 页面静态资源压缩插件

我们自己添加的 css 和 js 文件为了可读性，往往会有很多换行和空格，这些对于浏览器来说是没有用的，甚至还会降低渲染页面的速度。同时，由于 Markdown 转成 html 的 bug，会导致页面存在大量的空白，我们可以通过查看页面源代码发现这些大量的空白符，这也会造成页面渲染的性能问题。

因此，我们需要对页面的静态资源进行压缩，包括 css、js 和 html 等文件。

我们可以使用 hexo-neat 插件进行压缩。hexo-neat 配置简单，无需额外命令，我们只需使用原本的调试、部署命令就可以自动完成静态资源的压缩。

地址

  • hexo-neat

安装配置

安装 hexo-neat 插件

安装插件：

1
npm install hexo-neat --save

站点配置文件添加相关配置

然后我们需要在站点配置文件_config.yml 中添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 博文压缩
neat_enable: true
# 压缩html
neat_html:
  enable: true
  exclude:
# 压缩css  
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
# 压缩js
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/jquery.fancybox.pack.js'
    - '**/index.js'
    - '**/fireworks.js'

Hexo LeanCloud 安全设置插件

地址

  • hexo-leancloud-counter-security

安装配置

安装插件：

1
npm install hexo-leancloud-counter-security --save

打开 NexT 主题配置文件_config.yml，将 leancloud_visitors 下的 security 设置为 true（如没有则新增）：

1
2
3
4
5
6
7
leancloud_visitors:
  enable: true
  app_id: <<your app id>>
  app_key: <<your app key>>
  # Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
  security: true
  betterPerformance: false

对 betterPerformance 选项的说明：由于 Leancloud 免费版的云引擎存在请求线程数和运行时间限制以及休眠机制，很多时候访客数量加载会很慢。如果设置 betterPerformance 为 true，则网页则会在提交请求之前直接显示访客人数为查询到的人数 + 1，以增加用户体验。

打开博客配置文件_config.yml，新增以下配置：

1
2
3
4
5
6
leancloud_counter_security:
  enable_sync: true
  app_id: <<your app id>>
  app_key: <<your app key>
  username: 
  password:

然后输入以下命令：

1
hexo lc-counter register <<username>> <<password>>

或

1
hexo lc-counter r <<username>> <<password>>

将 <<username>> 和 <<password>> 替换为你自己的用户名和密码（不必与 leancloud 的账号）相同。此用户名和密码将在 hexo 部署时使用。

打开博客配置文件_config.yml，将 <<username>> 和 <<password>> 替换为你刚刚设置的用户名和密码：

1
2
3
4
5
6
leancloud_counter_security:
  enable_sync: true
  app_id: <<your app id>>
  app_key: <<your app key>
  username: <<your username>> #如留空则将在部署时询问
  password: <<your password>> #建议留空以保证安全性，如留空则将在部署时询问

在博客配置文件_config.yml 的 deploy 下添加项：

1
2
3
deploy:
  # other deployer
- type: leancloud_counter_security_sync

最后为：

1
2
3
4
5
6
deploy:
- type: git
  repository: git@github.com:dta0502/dta0502.github.io.git
  branch: master
  # other deployer
- type: leancloud_counter_security_sync

问题总结

安装完这个插件后，我生成博客的时候出现以下错误：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
ERROR Plugin load failed: hexo-leancloud-counter-security
Error: Cannot find module 'babel-runtime/regenerator'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (/Users/anran/Desktop/MyProject/blog/node_modules/hexo/lib/hexo/index.js:219:21)
    at /Users/anran/Desktop/MyProject/blog/node_modules/hexo-leancloud-counter-security/index.js:3:20
    at fs.readFile.then.script (/Users/anran/Desktop/MyProject/blog/node_modules/hexo/lib/hexo/index.js:232:12)
    at tryCatcher (/Users/anran/Desktop/MyProject/blog/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/Users/anran/Desktop/MyProject/blog/node_modules/bluebird/js/release/promise.js:517:31)
    at Promise._settlePromise (/Users/anran/Desktop/MyProject/blog/node_modules/bluebird/js/release/promise.js:574:18)
    at Promise._settlePromise0 (/Users/anran/Desktop/MyProject/blog/node_modules/bluebird/js/release/promise.js:619:10)
    at Promise._settlePromises (/Users/anran/Desktop/MyProject/blog/node_modules/bluebird/js/release/promise.js:699:18)
    at Promise._fulfill (/Users/anran/Desktop/MyProject/blog/node_modules/bluebird/js/release/promise.js:643:18)
    at Promise._resolveCallback (/Users/anran/Desktop/MyProject/blog/node_modules/bluebird/js/release/promise.js:437:57)
    at Promise._settlePromiseFromHandler (/Users/anran/Desktop/MyProject/blog/node_modules/bluebird/js/release/promise.js:529:17)
    at Promise._settlePromise (/Users/anran/Desktop/MyProject/blog/node_modules/bluebird/js/release/promise.js:574:18)
    at Promise._settlePromise0 (/Users/anran/Desktop/MyProject/blog/node_modules/bluebird/js/release/promise.js:619:10)
    at Promise._settlePromises (/Users/anran/Desktop/MyProject/blog/node_modules/bluebird/js/release/promise.js:699:18)
    at Promise._fulfill (/Users/anran/Desktop/MyProject/blog/node_modules/bluebird/js/release/promise.js:643:18)
    at /Users/anran/Desktop/MyProject/blog/node_modules/bluebird/js/release/nodeback.js:42:21
    at /Users/anran/Desktop/MyProject/blog/node_modules/graceful-fs/graceful-fs.js:115:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:53:3)
Usage: hexo <command>
  • hexo-leancloud-counter-security 版本：1.4.0

解决办法：

1
npm install babel-runtime

Hexo 支持 Echarts

地址

  • hexo-tag-echarts3

安装配置

安装插件：

1
npm install hexo-tag-echarts --save

该插件依赖的 ECharts 版本为 https://cdn.bootcss.com/echarts/3.8.0/echarts.common.min.js, 比较老了，有些新的特性不支持，需要手动修改 ECharts 版本，修改博客目录下的 node_modules/hexo-tag-echarts3/template.html 文件，将其中的 ECharts 引用 url 改为 https://cdn.bootcss.com/echarts/4.1.0-release/echarts.min.js。

已经有人在上面的基础上更新了一下插件：

  • hexo-tag-echarts4

我们可以使用这个插件：

1
npm install hexo-tag-echarts4 --save

这样就无需手动修改文件了。

Hexo 修改 back2top 标签

地址

  • hexo-cake-moon-menu

安装配置

安装插件：

1
npm install hexo-cake-moon-menu --save

然后在站点配置文件_config.yml 中添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
moon_menu:
  back2top:
    enable: true
    icon: fa fa-chevron-up
    func: back2top
    order: -1
  back2bottom:
    enable: true
    icon: fa fa-chevron-down
    func: back2bottom
    order: -2