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

这几天将博客主题从NexT-7.1.2升级到了7.7.0,在重新安装插件的时候顺便记录了本博客当前使用的插件,便于后续修改:

插件 版本
babel-runtime 6.26.0
hexo 4.2.0
hexo-abbrlink 2.0.5
hexo-baidu-url-submit 0.0.6
hexo-blog-encrypt 3.0.9
hexo-cake-moon-menu 1.1.3
hexo-deployer-git 2.1.0
hexo-douban 1.1.3
hexo-filter-nofollow 2.0.2
hexo-generator-archive 1.0.0
hexo-generator-baidu-sitemap 0.1.6
hexo-generator-category 1.0.0
hexo-generator-feed 2.2.0
hexo-generator-index-pin-top 0.2.2
hexo-generator-searchdb 1.2.0
hexo-generator-sitemap 2.0.0
hexo-generator-tag 1.0.0
hexo-leancloud-counter-security 1.4.1
hexo-neat 1.0.4
hexo-related-popular-posts 4.0.0
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一键部署插件

地址

安装配置

安装插件:

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文章永久链接插件

地址

安装配置

安装插件:

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 主题集成了这个插件的配置,因此配置起来非常方便。

地址

安装配置

安装插件:

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站点地图sitemap生成

通用站点地图

安装配置:

1
npm install hexo-generator-sitemap --save

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

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

百度站点地图

安装配置:

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

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

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

Hexo百度主动推送

地址

安装配置

安装插件:

1
npm install hexo-baidu-url-submit --save

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

1
2
3
4
5
6
# 百度主动推送
baidu_url_submit:
count: 5 ## 提交最新的1个链接
host: tding.top ## 百度站长平台中注册的域名
token: ## 准入秘钥
path: baidu_urls.txt ## 文本文档的地址, 新链接会保存在此文本文档里

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

地址

安装配置

安装插件:

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生成插件

地址

安装配置

安装插件:

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调用了这个文件,从而实现了静态网站的本地搜索。

插件地址

安装配置

安装插件:

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文章置顶插件

地址

安装配置

安装插件:

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文章加密插件

地址

安装配置

安装插件:

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 的插件。

地址

安装配置

安装插件:

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插件

安装插件:

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安全设置插件

地址

安装配置

安装插件:

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

地址

安装配置

安装插件:

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

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

我们可以使用这个插件:

1
npm install hexo-tag-echarts4 --save

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

Hexo修改back2top标签

地址

安装配置

安装插件:

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

----------- 本文结束啦感谢您阅读 -----------

赞赏一杯咖啡

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