Bootstrap 样式

hexo-tag-bootstrap： https://www.hahack.com/hexo-theme-freemind-blog/2014/03/16/tag-plugins/

LinkGrid

Examples

{% linkgrid %}
The Papers | https://thepapers.cn/ | Stay hungry. Stay foolish. | /images/5.jpg
The Papers | https://thepapers.cn/ | Stay hungry. Stay foolish. | /images/6.jpg
{% endlinkgrid %}

Result

Alerts

Examples

{% alert warning %}
Best check yo self, you're not looking too good.
{% endalert %}

{% alert danger %}
Change a few things up and try submitting again.
{% endalert %}

{% alert success %}
You successfully read this important alert message.
{% endalert %}

{% alert info %}
This alert needs your attention, but it's not super important.
{% endalert %}

Result

volantis 样式

▌容器-folding

Examples

{% folding, 图片测试 %}
{% fb_img https://cdn.jsdelivr.net/gh/drew233/cdn/dreww.webp %}
{% endfolding %}
{% folding cyan open, 查看默认打开的折叠框 %}

这是一个默认打开的折叠框。

{% endfolding %}
{% folding green, 查看代码测试 %}

{% endfolding %}
{% folding yellow, 查看列表测试 %}
 - haha
 - hehe
{% endfolding %}
{% folding red, 查看嵌套测试 %}

{% folding blue, 查看嵌套测试2 %}

{% folding 查看嵌套测试3 %}

hahaha

{% endfolding %}
{% endfolding %}
{% endfolding %}

Result

▌标签-note

Examples

{% note red, 为简单的一句话提供的简便写法。 %}

{% note quote, 为简单的一句话提供的简便写法。 %}

{% note info, 为简单的一句话提供的简便写法。 %}

{% note warning, 为简单的一句话提供的简便写法。 %}

{% note done, 支持同样丰富的参数。 %}

{% note success, 支持同样丰富的参数。 %}

{% note danger, 支持同样丰富的参数。 %}

{% note error, 支持同样丰富的参数。 %}

{% note radiation, 支持同样丰富的参数。 %}

{% note bug, 支持同样丰富的参数。 %}

{% note idea, 支持同样丰富的参数。 %}

{% note link, 支持同样丰富的参数。 %}

{% note todo, 支持同样丰富的参数。 %}

{% note msg, 支持同样丰富的参数。 %}

{% note guide, 支持同样丰富的参数。 %}

{% note up, 支持同样丰富的参数。 %}

{% note undo, 支持同样丰富的参数。 %}

{% note paperclip, 支持同样丰富的参数。 %}

Result

▌文字

Examples

{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。

{% span small, Test %}
{% span large, Test %}
{% span huge, Test %}
{% span ultra, Test %}
{% span ultra logo red, Test %}

{% p center logo large, The_Papers %}
{% p center small, Hand down,man down %}

Result

The_Papers

Hand down

隐藏文字

代码
{% hint 'Hexo' 'A fast, simple &' 'powerful blog framework' %}

效果

FancyBox 样式

代码

{% fb_img https://fenc.wang/imgs/2020/02/903b3369039d24a0.png sample %}

效果

markdown-it 样式

markdown-it demo： https://markdown-it.github.io/

▌checklist

task
done

▌table

代码

| a | b | c |
|---|---|---|
| 预留宽度|  <img width=200/> | 3 |

| a | b | d |
|---|---|---|
| 1 | <div style="width: 150pt">预留宽度</div>| 3 |

效果

a	b	c
预留宽度		3

Centered Quote

代码
{% centerquote %}Something{% endcenterquote %}

效果

Something

Echarts

插件
npm install hexo-tag-echarts3 --save

代码
{% echarts 400 '85%' %} \\TODO option goes here {% endecharts %}

效果

mindmap

插件
npm install hexo-simple-mindmap

代码

{% pullquote mindmap mindmap-md %}
- [在 Hexo 中使用思维导图](https://hunterx.xyz/use-mindmap-in-hexo.html)
  - 前言
  - 操作指南
    - 准备需要的文件
    - 为主题添加 CSS/JS 文件
  - 使用方法
{% endpullquote %}

效果

• 在 Hexo 中使用思维导图
  • 前言
  • 操作指南
    • 准备需要的文件
    • 为主题添加 CSS/JS 文件
  • 使用方法

mermaid

插件
npm i hexo-filter-mermaid-diagrams

代码

三点mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?©
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
三点

效果

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!