Hexo博客:一些非常有用的插件
前言
使用框架Hexo搭建博客后,你可能需要一些功能,例如:对生成的文件进行压缩,生成站点地图,生成RSS订阅等等。面对官方的插件列表又有些无从下手,这里推荐一些,同时也是我在用的一些插件。
正文
下面示例的配置适用于2026-9-12日前的最新版插件,如果后期插件发生更新,请以官方文档为准。
页面生成器
除了Hexo init自动安装的生成器外,这里介绍一下RSS/Atom订阅生成器和sitemap生成器
hexo-generator-feed
官方仓库:hexo-generator-feed
功能介绍:为你的博客生成feed,别人可以对你的博客进行订阅。
安装:
1
| npm install hexo-generator-feed --save
|
配置示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| feed: enable: true type: atom path: atom.xml limit: 20 hub: content: false content_limit: 140 content_limit_delim: ' ' order_by: -date icon: icon.png autodiscovery: true
|
为某个文章设置图片:
在文章的 front-matter 中设置
如果你博客也有文章封面图但是和这个配置名称不一样可以写个脚本自动转换。
hexo-generator-sitemap
官方仓库:hexo-generator-sitemap
功能介绍:为站点产生一个标准格式的sitemap,方便搜索引擎收录
安装:
1
| npm install hexo-generator-sitemap --save
|
配置示例:
1 2 3 4 5 6 7 8 9
| sitemap: path: - sitemap.xml - sitemap.txt template: ./sitemap_template.xml template_txt: ./sitemap_template.txt rel: false tags: true categories: true
|
排除指定文章/页面
在文章的 front-matter 中设置
功能插件
hexo-abbrlink
官方仓库:hexo-abbrlink
功能介绍:文章静态短链接,拒绝过长的链接
安装:
1
| npm install hexo-abbrlink --save
|
配置示例:
步骤 1:
修改 permalink(_config.yml)
1 2 3 4
| permalink: posts/:abbrlink/
permalink: posts/:abbrlink.html
|
步骤 2:
插件配置(_config.yml)
1 2 3 4 5 6 7
| abbrlink: alg: crc32 rep: hex drafts: false force: false writeback: true
|
效果示例:
1 2 3 4
| crc16 & hex → https: crc16 & dec → https: crc32 & hex → https: crc32 & dec → https:
|
hexo-blog-encrypt
官方仓库:hexo-blog-encrypt
功能介绍:给文章加密,让文章只允许指定人员访问
安装:
1
| npm install --save hexo-blog-encrypt
|
配置示例:
_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
| encrypt: abstract: 有东西被加密了, 请输入密码查看. message: 您好, 这里需要密码. tags: - {name: tagName, password: 密码A} - {name: tagName, password: 密码B} wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试. wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.
decryptButton: show: true text: 解密 autoSave: false stableSalt: false kdf: iterations: 250000 theme: default silent: false
|
文章 front-matter 用法
1 2 3 4 5 6 7 8 9 10 11 12
| --- title: Hello World date: 2016-03-30 21:18:02 password: hello abstract: 有东西被加密了, 请输入密码查看. message: 您好, 这里需要密码. wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试. theme: xray autoSave: true ---
文章正文……
|
特殊用法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| # 对已打 Tag 加密的文章,单独取消加密: --- title: Callback Test tags: - A Tag should be encrypted password: "" # 空字符串 = 取消该篇的 Tag 加密 ---
# 解密后触发事件监听(4.0.3 起 detail.mode 为 manual / cached): <script> window.addEventListener('hexo-blog-decrypt', function (event) { // 解密完成后的回调,可在此重新初始化目录、代码高亮等 console.log('Decrypted:', event.detail.mode); }); </script>
|
⚠️ 注意:
- v4 使用 AES-256-GCM(PBKDF2-SHA256 派生密钥),密文格式与 v3 不互通,升级需
hexo clean && hexo generate; - 生产环境必须 HTTPS(Web Crypto API 要求安全上下文,非 localhost 的纯 HTTP 下解密会静默失败);
- 4.0.3 起,普通外部脚本按文章内顺序加载完成后才执行后续内联脚本(每个脚本最长等待 15 秒),解决了 DPlayer 等组件在依赖库未就绪时就初始化的问题;
- 加密文章的
post.origin 明文、搜索/feed 的明文字段都不应输出,TOC 需在解密回调中基于 #hexo-blog-encrypt 生成,避免标题泄露。
插件主题预览:Demo Page 所有的密码都是hello(当前支持主题:default、xray)
hexo-safego
官方仓库:hexo-safego
功能介绍:外链安全跳转,在要跳转外部链接时,进行提示说明
安装(需先安装 cheerio):
1 2
| npm install cheerio --save npm install hexo-safego --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 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
|
hexo_safego: general: enable: true enable_base64_encode: true enable_target_blank: true
security: url_param_name: 'u' html_file_name: 'go.html' ignore_attrs: - 'data-fancybox'
scope: apply_containers: - '#article-container' apply_pages: - "/posts/" - "/devices/" exclude_pages:
whitelist: domain_whitelist: - "your-site.com"
appearance: avatar: /info/avatar.ico title: "网站名称" subtitle: "网站副标题" darkmode: auto countdowntime: 4 custom_css: /css/go.css leave_text: "您即将离开本站,跳转到:" countdown_text: "⚡将在{seconds}秒后跳转,请自行确认链接安全性" manual_confirm_text: "💡请自行确认链接安全后再继续跳转"
debug: enable: false
|
单页关闭(front-matter)
特别注意:
domain_whitelist:必须填入你的站点域名,否则站内链接也会被处理成跳转页。apply_containers:默认 body(全站生效);按主题调整,如 Butterfly 主题可填 #article-container。想匹配整站可填 body 或删除该项。apply_pages:默认 ['/'](全站);只希望文章页生效,可设为 '/posts/' 或 '/post/'。avatar、title、subtitle:建议改成自己的信息;默认头像走 jsdelivr,国内加载较慢,可换本地图片。
hexo-yam
官方仓库:hexo-yam
功能介绍:静态资源压缩一条龙:HTML/JS/CSS/SVG/XML/JSON 压缩 + gzip/brotli/zstd 预压缩
安装:
1
| npm install --save hexo-yam
|
配置示例:
_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 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
| minify: enable: true previewServer: true
html: enable: true priority: 10 verbose: false exclude: globOptions:
css: enable: true priority: 10 verbose: false exclude: - "*.min.css" level: 2
js: enable: true priority: 10 verbose: false exclude: - "*.min.js" compress: mangle: true output:
svg: enable: true priority: 10 verbose: false include: - "*.svg" - "!*.min.svg" plugins:
xml: enable: false priority: 10 verbose: false include: - "*.xml" - "!*.min.xml" removeComments: true
json: enable: false priority: 10 verbose: false include: - "*.json" - "!*.min.json"
gzip: enable: true priority: 10 verbose: false include: - "*.html" - "*.css" - "*.js" - "*.txt" - "*.ttf" - "*.atom" - "*.stl" - "*.xml" - "*.svg" - "*.eot" - "*.json" level: 9
brotli: enable: true priority: 10 verbose: false include: - "*.html" - "*.css" - "*.js" - "*.txt" - "*.ttf" - "*.atom" - "*.stl" - "*.xml" - "*.svg" - "*.eot" - "*.json" level: 11
zstd: enable: true priority: 10 verbose: false include: - "*.html" - "*.css" - "*.js" - "*.txt" - "*.ttf" - "*.atom" - "*.stl" - "*.xml" - "*.svg" - "*.eot" - "*.json" level: 3
|
glob 匹配注意
1 2 3 4 5
| exclude: - "*foo.html" - "**/bar/*/*.html" globOptions: basename: true
|
说明:hexo-yam 是「全能型」压缩插件,一个插件就能完成 HTML/JS/CSS/SVG/XML/JSON 压缩与 gzip/brotli/zstd 预压缩,但我使用时在vercel时构建时间会增加30s左右(vercel免费账号默认配置)。下面三款(hexo-html-minifier / hexo-clean-css / hexo-uglify)是各自独立的轻量压缩插件,也能实现HTML/JS/CSS,且速度比hexo-yam快。你任选其一即可
hexo-html-minifier
官方仓库:hexo-html-minifier
功能介绍:基于 HTMLMinifier 压缩 HTML 输出
安装:
1
| npm install hexo-html-minifier --save
|
配置示例:
_config.yml
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| html_minifier: exclude: collapseBooleanAttributes: true collapseWhitespace: true removeComments: true removeEmptyAttributes: true removeScriptTypeAttributes: true removeStyleLinkTypeAttributes: true minifyJS: true minifyCSS: true ignoreCustomComments: - !!js/regexp /^\s*more/
|
ignoreCustomComments 需用 !!js/regexp 前缀声明正则。其余可选字段见 HTMLMinifier 选项表。
hexo-clean-css
官方仓库:hexo-clean-css
功能介绍:基于 clean-css 压缩 CSS 输出
安装:
1
| npm install hexo-clean-css --save
|
配置示例:
_config.yml
1 2 3 4
| clean_css: exclude: - '*.min.css'
|
hexo-uglify
官方仓库:hexo-uglify
功能介绍:基于 Terser 压缩 JavaScript 输出
安装:
1
| npm install hexo-uglify --save
|
配置示例:
_config.yml
1 2 3 4 5 6 7
| uglify: exclude: - '*.min.js' mangle: true
|
output、compress 的具体字段见 Terser minify options。
写在最后
以上插件和配置都和我博客实际使用的几乎一致,并且额外尽可能详细地给出了可能用到的配置。希望对你有所帮助。
鸣心/Write