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

原创

本文最后更新于 <span id="expire-date"></span> 天前,文中部分描述可能已经过时。

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

音乐播放 aplayer

npm install --save hexo-tag-aplayer
建议新建一个歌单专门用于网站播放,歌曲越多加载越慢。

{% meting "7635339557" "tencent" "playlist" "order:random" "preload:none"%}
点击展开

视频播放 dplayer

npm install hexo-tag-dplayer --save
比video标签好用。功能强大,支持字幕引入。

{% dplayer "url=https://lyfclub.herokuapp.com/videos/%E5%88%98%E4%BA%A6%E8%8F%B2.mp4"  "pic=https://wxt.sinaimg.cn/thumb300/006UN1LVgy1gfauot0mgvj30go0byt97.jpg?tags=%5B%5D" "loop=yes" "theme=#FADFA3" "autoplay=false" %}
点击展开

豆瓣电影/读书/音乐卡片

npm install hexo-douban-card --save

{% douban movie 24745500 %}
{% douban book 30376420 %}
{% douban music 35099703 %}

pdf

npm install --save hexo-pdf

{% pdf http://7xov2f.com1.z0.glb.clouddn.com/bash_freshman.pdf %}
{% pdf ./bash_freshman.pdf %}
{% pdf https://drive.google.com/file/d/0B6qSwdwPxPRdTEliX0dhQ2JfUEU/preview %}
点击展开

代码压缩

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 与 Ruby 二合一
{我爱你|{% spoiler 是真的 %}}

我爱你

是真的

分栏

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

数据可视化工具 Chartjs

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

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

盘古之白

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

為什麼你們就是不能加個空格呢?

https://github.com/vinta/pangu.js
如果你跟我一樣,每次看到網頁上的中文字和英文、數字、符號擠在一塊,就會坐立難安,忍不住想在它們之間加個空格。這個外掛(支援 Chrome 和 Firefox)正是你在網路世界走跳所需要的東西,它會自動替你在網頁中所有的中文字和半形的英文、數字、符號之間插入空白。

漢學家稱這個空白字元為「盤古之白」,因為它劈開了全形字和半形字之間的混沌。另有研究顯示,打字的時候不喜歡在中文和英文之間加空格的人,感情路都走得很辛苦,有七成的比例會在 34 歲的時候跟自己不愛的人結婚,而其餘三成的人最後只能把遺產留給自己的貓。畢竟愛情跟書寫都需要適時地留白。

與大家共勉之。

死链检查

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

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

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

Instagram分享

npm install hexo-tag-instagram --save

{% instagram false https://www.instagram.com/p/B2vyQrxHuIN/ 100% %}

二维码 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' %}
这里是正文
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 %}

这个 editor 有些多余的方块 bug

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

greet();
{% endgdemo_editor %}

demo


其它

可能有用jī leì的插件

稍作介绍

hexo-tag-twentytwenty
处理前/后图片展示,主题冲突,弃用

hexo-charts 预览
Matery 主题中的文章发布统计图、标签统计图、文章分类统计图。

hexo-simple-mindmap 思维导图
将无序列表渲染成思维导图。
感觉定位略尴尬,聊胜于无吧,个人偏向于使用 Xmind 做好思维导图后再导出为 PNG 或者 PDF 放进博客。

hexo-tag-real-time-calculator 计时功能

hexo-tag-ghcode 嵌入在线代码

hexo-tag-remote-code 同上
这个插件就是为了在粘贴gist,repo 里的代码时不需要复制粘贴更新,只需要重新 build 一版就可以。局限就是不能直接加载远程数据,因为那时候考虑到网络的问题,不 build 静态的可能会有些地方访问不了所以就没做(gist 被墙了)。

hexo-tag-googlemaps 谷歌地图
国内可以用这个 bdpostmap

hexo-tag-include

hexo-tag-wikipedia 嵌入维基百科摘要

hexo-tag-kbd 键盘按键

hexo-tag-google-photos-album 谷歌相册(网络问题 😕 )

hexo-infinite-scroll 无限滚动

自欺欺人😅

hexo-tag-easy-charts 用法稍微简单
不如 Chartjs 漂亮

hexo-pwa 缓存策略搞不好,弃疗 😕

yuque-hexo 同步语雀的文章到 Hexo
对语雀的好感不太足,告辞!

hexo-tag-autogallery 从给定目录获取图片并生成相册
https://github.com/dotintegral/hexo-tag-autogallery

hexo-tag-chat 带头像的对话栏
效果见:Chat 标签
作者未给出具体用法。

hexo-tag-color-block 色块展示
写涉及配色的教程估计用得着。

hexo-list-related-posts 基于标签展示相关帖子
帖子多的可以试试

hexo-related-posts 通过推荐相关内容来增加访客在自己网站的逗留时间
比上面的插件更全面,全方位比对全站帖子的标题、标签、分类、关键词……甚至正文的文字,找到帖子之间的相似性。

hexo-tag-gitgraph 博客系统git分支图
不明白使用场景,作者的 demo 挂了

hexo-tag-search-link 要我帮你百度一下吗?
简直鸡肋到爆炸,[]() 这样的 Markdown 语法已经够方便了。

hexo-tag-demo 在正文展示 demo ,想不出实际意义有多大。

hexo-tag-config
自动将 _config.yml 的内容放进 post/page.
**慎用!!!**配置文件里可能包含一些不应当泄露的密码、密钥。

hexo-douban-list hexo-douban 的改良版
没人对你的豆瓣动态感兴趣

hexo-plugin-socials 展示不同平台的动态
包含:豆瓣、知乎、Github、QQ空间、哔哩哔哩……

hexo-web-push-notification 博客更新通知


tm
的通知还嫌不够多吗?

hexo-generator-json-feed
生成 json 格式的文件而不是 xml 用以保存 feed 数据
json 格式似乎更通用。kwgt 用户有福了。

hexo-generator-json-content 同上
只不过生成的是 posts 和 pages 的内容
有 search.json 的话好像用不着这个。

hexo-wordcount 字数统计及阅读时长预计
不擅长排版的人表示不知道放在什么位置才不影响主题的美观😌

hexo-memorial-day 哀悼日全站变成灰色
直接修改 head.ejs 或者用 Hexo 5 注入器 也能实现,插件能少装就少装吧。

hexo-cdn-jsdelivr CDN加速
适合 Github 用户,但Jsdelivr 对待博客资源引用的策略可能产生变化,继续保持观望。

hexo-test-utils 测试 Hexo 插件的沙箱
老实说,不会用😅,我选择另外创建一个 test 文件夹进行 hexo 初始化,然后在里面测试插件。

本文作者:冼仙

本文链接: https://loafing.cn/posts/hexo-tags.html

文章默认采用 CC BY-NC-SA 4.0 许可协议,如有转载请注意遵循。

评论

您所在的地区可能无法访问 Disqus 评论系统,请切换网络环境再尝试。