Hexo 常用插件推荐

Hexo 常用插件推荐

Hexo 本身提供了一个框架，通过丰富的拓展插件，能够进一步优化使用体验，你可以在 Hexo 插件 中寻找适合你的拓展。

生成永久链接

hexo 文章链接默认的生成规则是：:year/:month/:day/:title，即按照年、月、日、标题的顺序

当文件名为中文时，会导致 url 链接中也出现中文

https://emoryhuang.github.io/blog/2021/05/09/Hexo %E5%B8%B8%E7%94%A8%E6%8F%92%E4%BB%B6%E6%8E%A8%E8%8D%90

这样的链接非常不利于阅读，也不美观

hexo-abbrlink 插件通过算法为文章生成永久链接，相对来说更加简洁方便。

1. 安装 hexo-abbrlink 插件

npm install hexo-abbrlink --save

1. 修改 config.yml 文件中的永久链接：

permalink: blog/:abbrlink.html # 也可以直接写 :abbrlink/
abbrlink:
  alg: crc32 #算法： crc16(default) and crc32
  rep: dec #进制： dec(default) and hex

hexo-abbrlink 支持 16 位、32 位以及十进制，十六进制共 4 种不同的模式，你可以按照需求选择。

生成链接样式

# crc16 & hex
https://post.zz173.com/posts/66c8.html

# crc16 & dec
https://post.zz173.com/posts/65535.html

# crc32 & hex
https://post.zz173.com/posts/8ddf18fb.html

# crc32 & dec
https://post.zz173.com/posts/1690090958.html

添加 RSS 订阅

RSS 的全称是 Really Simple Syndication（简易信息聚合），它是一种消息来源的格式规范，网站可以按照这种格式规范提供文章的标题、摘要、全文等信息给订阅用户，用户可以通过订阅不同网站 RSS 链接的方式将不同的信息源进行聚合，在一个工具里阅读这些内容。当网站内容更新时，可以通过订阅 RSS 源在 RSS 阅读器上获取更新的信息

1. 安装 hexo-generator-feed 插件

npm install hexo-generator-feed --save

1. 在 config.yml 文件中添加如下的订阅配置：

feed:
  enable: true
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: " "
  order_by: -date

更多配置信息，可以在这里查看 hexo-generator-feed

配置完成之后，重新部署，在你的网站域名后添加 /atom.xml 即可查看。

https://emoryhuang.cn/atom.xml

Minifier

看名字就知道，很简单的一个插件，可以压缩 HTML, CSS, JS and Image，配置也很简单。

1. 安装 hexo-all-minifier

npm install hexo-all-minifier --save

1. 在 config.yml 文件中添加如下配置：

all_minifier: true

添加看板娘

向你的 Hexo 里放上一只二次元看板娘，项目地址

演示：https://l2dwidget.js.org/dev.html

模型预览：https://huaji8.top/post/live2d-plugin-2.0/

安装

在 Git Bash 中安装模块：

npm install --save hexo-helper-live2d

or

yarn add hexo-helper-live2d

配置

向 Hexo 的 _config.yml 文件添加配置，例子如下

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-wanko  ## 更换为你的模型
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true
  react:
    opacity: 0.7

点这里 可以查看现有的模型

在 Git Bash 中安装喜欢的模型

npm install 模型的包名

将包名输入位于 _config.yml 的 model.use 中。

hexo clean
hexo d -g

更换 Markdown 渲染器

在写博客时，往往会涉及到一些数学公式，当你需要使用 LaTeX 语法时，由于 Hexo 默认的 Markdown 渲染器(hexo-renderer-marked)不支持复杂公式，导致渲染失败，这时候就需要更换 Markdown 渲染器。

在更换 Markdown 渲染器时，需要卸载原先的 Markdown 渲染器

npm uninstall hexo-renderer-marked --save

在 Fluid 主题中，官网给出了推荐的 Markdown 渲染器，你可以 点击这里查看详细信息

不可同时安装多个渲染器，如果更换公式引擎，对应渲染器也要一并更换。

说多了都是泪 😭

下面介绍几种常见的 Markdown 渲染器，你可以在 Hexo 插件 中找到它们。本文使用的渲染器为：@upupming/hexo-renderer-markdown-it-plus，配合 VSCode + Markdown All in One 食用效果良好。

你也可以在 这里 查看更多版本。

1. hexo-renderer-marked

Hexo 默认的 Markdown 的渲染器，不支持 Mathjax，不支持插件扩展，不支持 emoji 表情

• 项目地址：https://github.com/hexojs/hexo-renderer-marked
• 安装命令：npm install hexo-renderer-marked --save

1. hexo-renderer-kramed

基于 hexo-renderer-marked，支持 Mathjax，不支持插件的扩展，不支持 emoji 表情

• 项目地址：https://github.com/sun11/hexo-renderer-kramed
• 安装命令：npm install hexo-renderer-kramed --save

1. hexo-renderer-markdown-it

渲染速度比 hexo-renderer-marked 快，支持脚注（上标，下标，下划线），支持 emoji 表情，支持 LaTeX，扩展需要另外通过 npm 安装，你可以在 这里 找到更多拓展。

• 项目地址：https://github.com/hexojs/hexo-renderer-markdown-it
• 安装命令：npm install hexo-renderer-markdown-it --save

1. hexo-renderer-markdown-it-plus

在 hexo-renderer-markdown-it 的基础上默认自带许多插件，可以直接使用

• 项目地址：https://github.com/CHENXCHEN/hexo-renderer-markdown-it-plus
• 安装命令：npm install hexo-renderer-markdown-it-plus --save

总结

插件虽好，但过犹不及，找到适合自己的才是最重要的，不要看着好用就一股脑全装上去了，食之无味，弃之可惜，最后越来越臃肿。

参考

• hexo-abbrlink
• hexo-generator-feed
• hexo-helper-live2d
• Hexo 的多种 Markdown 渲染器对比分析