「推荐」本站用到的 hexo 插件

hexo 必备插件与可选功能 花里胡哨

最近新增

实用必装

短链生成

npm install hexo-abbrlink --save
自动生成短链例如 abbrlink: 18338（据说此种格式有利于SEO优化）。
如有必要可直接修改Front-matter（文章信息头）进行自定义 abbrlink: 我的文章-my-posts-12138，尽量使用字母和数字，空格用 - 替代，提升链接可读性。

文章置顶

先 npm uninstall hexo-generator-index --save
再 npm install hexo-generator-index-pin-top --save
在 Front-matter 插入 top:100，数字越大文章在首页的位置越靠前。

文章加密

npm install --save hexo-blog-encrypt
在文章信息头插入
password: mikemessi abstract: 有东西被加密了, 请输入密码查看.
message: 您好, 这里需要密码.
解密后部分元素可能无法正常显示或者表现，见详细配置

文章隐藏

npm install hexo-hide-posts --save
默认 hidden: true 用于隐藏，hidden 可自定义为自己喜欢的名字。

生成feed订阅（RSS）

npm install hexo-generator-feed --save
默认只获取文章摘要或者前140个字符

站点地图 sitemap

自动生成 sitemap.xml ，可提交给搜索引擎（百度拉胯，谷歌和雅虎收录极快，Bing也还行）。搜索 site:loafing.cn 查看被收录情况。

不跟踪外链

npm i hexo-filter-nofollow --save
对SEO友好。 可排除自定义域名。

自动提交链接至搜索引擎

npm install --save hexo-submit-urls-to-search-engine
提交效果不错，但百度放出页面的速度依旧感人，谷歌、必应、雅虎的收录速度很快。

首选网页 canonical

npm install --save hexo-auto-canonical
SEO 友好，为重复网址或重复网页/类似网页指定规范网址。
加进主题的 \themes\cards\layout\_partial\head\index.ejs

<%- autoCanonical(config, page) %>

比如我这里无论是 http://127.0.0.1:4000/tags/ 、https://coding.loafing.cn/tags/ 还是 https://blog.loafing.cn/tags/ 都自动在网页源码的 </head> 标签之前加入
<link rel="canonical" href="https://loafing.cn/tags/">
有利于将搜索结果全部引导至首选域名。

参考：整合重复网址 - Google Search Console

可选功能

可视化编辑

npm install --save hexo-admin
不是很好用，经常 busy

代码压缩

npm install hexo-neat --save
只压缩html就够了吧，去除多余空格和换行。

neat_enable: true
neat_html:
  enable: true
  exclude:

实测：用手机总共生成153个文件，hexo g 的时间从压缩前的 4.43 秒增至 9.95 秒，生成的文件大小从 4.02 MB 缩至 3.62 MB。
耗费少许生成静态文件的时间，提高页面渲染速度，值得😌
不知道怎样排除 /tags/标签/ 和按日期归档这类没多大必要压缩的页面 html 文件，浪费时间🤔

文字上方注释 Ruby

相关介绍见：https://wikipedia.org/wiki/Ruby_character
之前用的 Ruby Character 过于古早，手机安装成功但电脑上使用有问题，弃疗。
加上我已经卸载 hexo 默认的 markdown 渲染器，改用 hexo-renderer-markdown-it（具体使用方法这里不阐述，太长），正好可以试试 markdown-it-ruby
npm install markdown-it-ruby --save
站点根目录配置引入插件

markdown:
  # xxxxxx其它配置项
  plugins:
    - markdown-it-ruby

用法：
{特朗普|川建国} → 特朗普川建国
{特朗普|chuān jiàn guó} → 特朗普chuān jiàn guó
{超電磁砲|レールガン} → 超電磁砲レールガン

如果自己的输入法输入带声调符号的拼音有困难，还可以使用 hexo-pinyin-ruby-marks。
npm install hexo-pinyin-ruby-marks
{% pinyin 初音未来|chu1 yin1 wei4 lai2 %} → 初音未来chū yīn weì laí

文字遮盖效果 Spoiler

预览效果
npm install hexo-spoiler --save
站点根目录配置填写

spoiler:
  style: blur # 或者box
  color: black # 仅当 style 为 box 时起效
  p: false # 没懂啥意思，不管它

{% spoiler option:value text... %}

{% spoiler 默认配置效果 %} → 默认配置效果
{% spoiler style:blur 糊里糊涂 %} → 糊里糊涂
{% spoiler style:box 黑不溜秋 %} → 黑不溜秋
{% spoiler style:box color:red 红光闪闪 %} → 红光闪闪
可见 box 颜色遮盖条的高度跟文字尺寸不匹配，显得尴尬，还是用blur吧😌

{我爱你|{% spoiler 是真的 %}}

分栏

npm install hexo-tag-common
具体使用说明：Tabs-NexT
有效节省空间 预览

数据可视化工具 Chartjs

Chart.js 介绍
插件预览效果
npm install hexo-tag-chart --save
简单展示一下折线图

支持混合重叠，轻便简洁，效果很漂亮，但静态页面改起来好像不太方便😌

盘古之白

npm install hexo-pangu
hexo clean
送给所有中英混输必须加空格的强迫症患者。
（但愿跟其它插件不存在冲突）

死链检查

npm install hexo-broken-links-checker --save-dev
npx hexo check-links
喝杯茶等一会儿……

WARN  The following links are broken:
   - https://

默认配置就够了，偶尔用一次。

二维码 qrcode

效果不美丽太丑了
npm i hexo-tag-qrcode
{% qrcode "自定义内容" %} 👉

# 完整写法
{% qrcode "hello, world" alt:"hello, world" title:"hello, world" hello world %}

悬浮注释 hint

npm install hexo-tag-hint --save

{% hint '这里是正文' '这里是注释 :D' %}
<br> # 换行判定好像有问题，必须手动加 br 标签
{% hint 'I\'m Groot' 'I\'m Groot' %}

碰到单引号 ' 需要反斜杠 \ 转义

动态终端代码演示

npm install @heowc/hexo-tag-gdemo
介绍及效果预览
用法有些复杂

{% gdemo_terminal command [最小高度] [窗口标题] [延迟时间] [提示字符] [唯一id] [高亮语言] %}
content
{% endgdemo_terminal %}

{% gdemo_terminal 'node ./demo' '250px' 'bash' '500' '$' 'demo-teriminal' %}
Hello World!
{% endgdemo_terminal %}

{% gdemo_terminal 'cd /usr/bin;./node ./demo' '250px' 'bash' '500' '$' 'demo-teriminal' %}
Hello World!
{% endgdemo_terminal %}

{% gdemo_editor '250px' 'bash' '500' 'demo-editor' %}
function greet(){
  console.log("Hello World!");
}

greet();
{% endgdemo_editor %}

其它

可能有用jī leì的插件