Hexo-常用插件&配置

发表于 分类于 阅读次数： 阅读次数： Disqus： 本文字数： 1.3k 阅读时长 ≈ 5 分钟

这里汇总一下自己比较常用的插件以及相关的配置，希望对你有所帮助。
注意： 我使用的是 next 主题，很多配置可能是主题专用！

RSS

安装 hexo-generator-feed 插件即可

npm install hexo-generator-feed

在配置中开启 RSS

1
2
3
4
5
6
# RSS
feed:
    type: atom
    path: atom.xml
    # 用于限制 RSS 中初始多少 feed
    limit: 20

这样其他人就可以在网页上抓取 RSS 了，

202408171255722

同时还可以在文章结尾添加一个订阅提示

1
2
3
4
5
follow_me:
  #Twitter: https://twitter.com/username || fab fa-twitter
  #Telegram: https://t.me/channel_name || fab fa-telegram
  WeChat: /images/wechat_channel.jpg || fab fa-weixin
  RSS: /atom.xml || fa fa-rss

这里同时还可以把自己的微信公众号等放在这里。

中英文自动加空格

next-theme/hexo-pangu: 🀄️ Server side pangu.js filter plugin for Hexo.

再也不用手动在中英文之间敲空格了，虽然现在很多输入法已经带了这个功能，但经常是英文前不加后面加等，各种问题，有这个插件之后就不用考虑这个问题了。

原文：

1
2
3
1. 测试一下 test   中英文。
2. 测试一下test   中英文。
3. 测试一下test中英文。

插件效果：

  1. 测试一下 test 中英文。
  2. 测试一下test 中英文。
  3. 测试一下test中英文。

感觉还是挺不错的，基本涵盖了各种 case。

注意： 这个插件会把标题的中英文也强行加空格，视情况决定要不要使用。

阅读进度

可以在文章顶部显示阅读进度条，简洁美观。

1
2
3
4
5
6
# Reading progress bar
# Dependencies: https://github.com/theme-next/theme-next-reading-progress
reading_progress:
  enable: true
  color: "#37c6c0"
  height: 5px

Sitemap

给搜索引擎使用

1
npm install hexo-generator-sitemap

装完之后 记得在全局配置里面开启插件

1
2
3
plugins:
- hexo-generator-feed
- hexo-generator-sitemap

配合 GoogleAnalytics 使用

百度 sitemap

同上，不过是国内统计使用

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

Git

用于发布

1
npm install hexo-deployer-git --save

安装后需要在配置中开启

1
2
3
4
5
6
7
8
9
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  # repo: https://gitcafe.com/samwei12/samwei12.git
  # branch: gitcafe-pages
  # repo: https://github.com/samwei12/samwei12.github.io.git
  repo: git@github.com:samwei12/samwei12.github.io.git
  branch: main

不过建议直接使用 Github Actions，见 Hexo-Github Actions 自动部署方案 | samwei12’s blog

评论系统

用于管理评论，参考： https://theme-next.js.org/docs/third-party-services/comments#Changyan-China

disqus

1
2
3
4
disqus:
  enable: true
  shortname: blog-samwei12-cn
  count: true

Gitalk

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Gitalk
# Demo: https://gitalk.github.io
gitalk:
  enable: true
  github_id: samwei12  # Github repo owner
  repo: Gitalk # Repository name to store issues 注意这里必须要填名称，而不是链接
  client_id:  # Github Application Client ID
  client_secret:  # Github Application Client Secret
  admin_user: samwei12 # GitHub repo owner and collaborators, only these guys can initialize github issues 这里填名称即可，可以是数组
  distraction_free_mode: true # Facebook-like distraction free mode
  # Gitalk's display language depends on user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you can set a force language value
  # Available values: en, es-ES, fr, ru, zh-CN, zh-TW
  language:
    - en
    - zh-CN
    - zh-TW

畅言

有点过于废旧了，感觉很久没维护了，界面非常丑，放弃

阅读时间统计

建议使用： next-theme/hexo-word-counter: ⏱️ Word count and time to read of articles for Hexo, written in Rust ， 相较于 其他几个字数统计更加精准，速度也会更快。

  • 这里有个注意点,必须要在主配置文件即_config.yml中提前开启,才能在 next 主题中进行配置,否则失效

开启本地搜索功能

1
2
3
4
5
6
7
8
9
10
11
# Local search
# Dependencies: https://github.com/next-theme/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

效果图

202408171306783

相关文章推荐

这里 next 主题中本身自带了一个配置，如下：

1
2
3
4
5
6
# 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: true

但这个已经是被废弃的插件依赖，最新的配置方案参考： sergeyzwezdin/hexo-related-posts: Hexo plugin that generates related posts list with TF/IDF algorithm

配置开启记得直接在 _config.yml 中进行。使用 Next 主题的话，需要同时在 _config.next.yml 中也要补充 

1
2
related_posts:
  enable: true

效果图：

202408171422767

默认是每次构建都会生成相关文章索引，本地查看效果会比较慢，如果希望只在 Github 上部署的时候生效，可以在配置中开启

1
2
3
related_posts:
  enabled: true
  enable_env_name: prod

这样只有在环境变量中包含 prod 的时候才会生效，也就是我们执行 hexo generate --prod 时，对应的 Hexo-Github Actions 自动部署方案 | samwei12’s blog 中使用的 Action 代码是

1
2
- name: Build
        run: npm run build

也就是直接调用 package.json 中的这一段里面的 build 对应的命令，所以我们在这里把 环境变量 prod 添加上即可。

1
2
3
4
5
6
"scripts": {
    "build": "hexo generate --prod",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  }

这样就可以做到本地调试的时候没有推荐文章功能，远程部署的时候带上该功能。

参考文档地址：