本文由 简悦 SimpRead 转码， 原文地址 loafing.cn

可视化编辑

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

文字上方注释 Ruby

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

1
2
3
4
5
6

markdown:
  
  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
站点根目录配置填写

1
2
3
4
5
6

spoiler:
  style: blur 
  color: black 
  p: false 

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

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

Spoiler 与 Ruby 二合一

我爱你是真的

是真的

分栏

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

数据可视化工具 Chartjs

Chart.js 介绍
npm install hexo-tag-chart --save
简单展示一下折线图

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

悬浮注释 hint

npm install hexo-tag-hint --save

1
2
3
4
5

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

这里是正文
I’m Groot

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