0%

好用的 Hexo 插件推荐

前言

说好了不用Hexo了,但是Typecho又不太好用,还需要一个服务器才能运行,Gitbook访问经常有问题,所以我又滚回来了。

之前Windows上的环境已经丢失,现在转到macOS上再折腾折腾。

工欲善其事必先利其器,用上好用的插件才能有好的心情写文章呀。

一起安装

Hexo 插件都是用npm安装的。

1
2
3
4
5
6
7
8
9
10
npm install -g hexagon-cli
npm install hexo-abbrlink --save
npm install hexo-github-card --save
npm install hexo-related-popular-posts --save
npm install hexo-symbols-count-time --save
npm install hexo-all-minifier --save
npm install hexo-auto-category --save

npm install hexo-generator-feed --save
npm install hexo-generator-searchdb --save

Hexagon

Hexo的插件管理器,我用来看插件列表。

1
2
hexagon -l
hexa -l

这是一个根据文章标题生成一个相应的静态文章地址的插件。如果你跟我一样不喜欢中文标题被URL编码之后变得特别长特别难看,又不喜欢写英文标题,那么这个插件非常适合你。

hexo-abbrlink会首先检测你文章的配置区域有没有abbrlink这个属性,如果没有的话会根据文章标题生成一个,如果有的话就会使用当前abbrlink

1
2
3
4
5
6
7
8
9
10
# 「在Hexo配置文件里修改」

# 首先找到并修改permalink的格式
permalink: posts/:abbrlink/

# 然后再添加abbrlink的配置
# abbrlink config
abbrlink:
alg: crc32 #support crc16(default) and crc32
rep: hex #support dec(default) and hex

hexo-github-card

因为经常在文章中插入Github仓库,直接插入链接不太好看,这个更高逼格,就是上面👆这个。

githubCard的用法很简单,在写文章的时候写上标签就OK了,还有其他参数可以去Github看。

1
{% githubCard user:Gisonrg repo:hexo-github-card %}

这个插件生成的默认卡片宽度是400,在一些宽度较窄的移动设备上会造成缩放问题。虽然说参数里面也能修改width,但是每一次都要写就很麻烦,所以我去修改了源文件。

1
2
3
4
5
6
7
8
// /node_modules/hexo-github-card/index.js

var user = arg_obj.user,
repo = arg_obj.repo,
width = arg_obj.width ? arg_obj.width : '100%', // 把宽度改为100%就能自适应了。
theme = arg_obj.theme ? arg_obj.theme : 'default',
client_id = arg_obj.client_id ? arg_obj.client_id : '',
client_secret = arg_obj.client_secret ? arg_obj.client_secret : '';

还有一个问题,点击githubCard是在当前页面打开链接,这样会对阅读连续性造成不小的影响。

阅读了原作者 lepture 的说明,添加一个target并设置为blank即可。Hexo插件的作者 Gisonrg 好像并没有理会这个属性,但是他的代码写的很好,我们只需要稍微修改一下payload就可以达到目的了。

1
2
3
4
5
6
7
8
9
10
// /node_modules/hexo-github-card/index.js

var payload = {
user: user,
repo: repo,
width: width,
theme: theme,
target: 'blank', // 添加这一行
client_id: client_id,
client_secret: client_secret

根据标签推荐相关文章,原版插件的使用要求编辑主题文件的,但是NexT主题集成了这个插件的配置,配置很方便。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 「在NexT配置文件里修改」

# Related popular posts
# Dependencies: https://github.com/tea3/hexo-related-popular-posts
related_posts:
enable: true
title: # custom header, leave empty to use the default one
display_in_home: false
params:
maxCount: 5
#PPMixingRate: 0.0
#isDate: false
#isImage: false
#isExcerpt: false

hexo-symbols-count-time

文章字数统计和阅读时间估计。

1
2
3
4
5
6
7
# 「在Hexo配置文件里添加」

symbols_count_time:
symbols: true # 文章字数
time: false # 文章阅读时间
total_symbols: true # 站点总字数
total_time: false # 站点总阅读时间

NexT主题也对这个插件进行了集成,可以进行一些高级设置。

1
2
3
4
5
6
7
8
# 「在NexT配置文件里修改」

symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: false
awl: 4 # Average Word Length
wpm: 275 # Words Per Minute

hexo-all-minifier

对网页源代码压缩,就喜欢看这样的源代码。

1
2
3
# 「在Hexo配置文件里添加」

all_minifier: true

hexo-auto-category

每个文章的配置区域都写一次分类名称太麻烦了,并且你如果想改一次分类名字就更折磨人。这个插件就很好地解决了这个问题。

hexo-auto-category会根据目录级别自动填写分类,分类名就是目录名,并且支持多级目录生成多个分类。

1
2
3
4
5
6
7
8
# 「在Hexo配置文件里添加」

# Generate categories from directory-tree
# Dependencies: https://github.com/xu-song/hexo-auto-category
# depth: the depth of directory-tree you want to generate, should > 0
auto_category:
enable: true
depth: 1