Hexo 常用插件推荐

本文最后更新于:4 个月前

Hexo 常用插件推荐

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

生成永久链接

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

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

1
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 插件
1
npm install hexo-abbrlink --save
  1. 修改 config.yml 文件中的永久链接:
1
2
3
4
permalink: blog/:abbrlink.html # 也可以直接写 :abbrlink/
abbrlink:
alg: crc32 #算法: crc16(default) and crc32
rep: dec #进制: dec(default) and hex

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

生成链接样式

1
2
3
4
5
6
7
8
9
10
11
# 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 插件
1
npm install hexo-generator-feed --save
  1. 在 config.yml 文件中添加如下的订阅配置:
1
2
3
4
5
6
7
8
9
10
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 即可查看。

1
https://emoryhuang.cn/atom.xml

Minifier

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

  1. 安装 hexo-all-minifier
1
npm install hexo-all-minifier --save
  1. 在 config.yml 文件中添加如下配置:
1
all_minifier: true

添加看板娘

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

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

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

安装

在 Git Bash 中安装模块:

1
npm install --save hexo-helper-live2d

or

1
yarn add hexo-helper-live2d

配置

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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 中安装喜欢的模型

1
npm install 模型的包名

将包名输入位于_config.ymlmodel.use 中。

1
2
hexo clean
hexo d -g

更换 Markdown 渲染器

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

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

1
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 表情

  1. hexo-renderer-kramed

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

  1. hexo-renderer-markdown-it

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

  1. hexo-renderer-markdown-it-plus

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

总结

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

参考


本文作者: EmoryHuang
本文链接: https://emoryhuang.cn/blog/2220940575.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明来自EmoryHuang